Design and implement holographic user interfaces

Holographic UI is a design-style child skill ('made of light - interfaces projected into thin air, visible but completely translucent'), part of the design-it family and not meant to be triggered directly. Three core principles: Zero Opacity Backgrounds (elements are never fully solid - everything is semi-transparent, letting the background show through), Scanlines and Interference (the illusion of a projection is sold by horizontal scanlines, slight chromatic aberration, or flickering), and Luminous Edges (element borders are brighter than their centers, mimicking how lasers or light projections focus at the edges).

Use it when the user's request matches this sci-fi, light-projection aesthetic - futuristic dashboards, AR/VR concept interfaces, or sci-fi game UI that should look like it's made of light rather than solid material. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA is almost exclusively monochrome cyan, blue, or green with white core highlights, thin technical sans-serifs (Rajdhani) with a mandatory glowing text-shadow, and intensive use of rgba(), mix-blend-mode: screen, and CSS filters. The web implementation requires a dark background for the hologram illusion to read at all, panels use an extremely sheer background fill (rgba(0, 200, 255, 0.05)) with a semi-transparent border, a dual box-shadow (inset glow plus outer glow) for the luminous-edge effect, and a repeating linear-gradient sized to a few pixels tall to simulate CRT-style scanlines across the panel. Text uses mix-blend-mode: screen so overlapping glow effects add light rather than obscuring each other. A subtle flicker keyframe randomly dips opacity at irregular percentage points (92%, 93%, 94%, 96%, 98%) rather than a smooth fade, mimicking an unstable projection.

.hologram-panel {
  background: rgba(0, 200, 255, 0.05);
  box-shadow: inset 0 0 20px rgba(0,200,255,0.2), 0 0 15px rgba(0,200,255,0.3);
  background-image: linear-gradient(rgba(136,255,255,0.1) 1px, transparent 1px);
  background-size: 100% 4px;
}

SwiftUI reproduces the effect with .blendMode(.screen) marked as critical for the light-UI look, a colored .shadow() for the glow, a semi-transparent bordered panel matching the web's sheer-fill technique, and animated flicker state for the unstable-projection feel - the same layered glow-plus-transparency-plus-instability recipe as the CSS version, expressed through SwiftUI's native blend mode and shadow modifiers.

Designers and developers building futuristic dashboards, AR/VR concept interfaces, or sci-fi game UI that should read as projected light rather than solid material - leaning on real transparency, glow, and scanline effects rather than a flat neon color scheme alone.