FUI — Fantasy / Fictional User Interface¶

The industry term for sci-fi UI: the HUDs, consoles, and data overlays in Iron Man, Blade Runner 2049, The Martian, Westworld, The Expanse. Not "cyberpunk" (too broad — that's the umbrella aesthetic). Not "HUD" (that's a UI mode — heads-up). FUI is what to search when looking for references.

Part of the muriel skill, under Aesthetic Vocabularies. See the top-level index for mission and universal rules that apply across every vocabulary.

When to reach for it¶

Agent-as-instrument readouts. When the agent's output wants to feel like telemetry — live stats, mission clocks, bearing readouts, signal traces — rather than a paragraph of prose.
Research and demo framing. Eye-tracking visualizers, pupillometry dashboards, saliency overlays: FUI grammar gives instrument-style credibility without leaning on dashboard-chrome clichés.
Product marketing for technical tools. Scrutinizer, Psychodeli, AdSERP viewers — things that are instruments read well in instrument grammar.

Don't reach for it when:

The content is editorial prose. FUI adds chrome that the words have to fight through. Use marginalia via channels/web.md.
The information isn't real. FUI applied to fake data reads as cosplay. Either ship real numbers or stylize the placeholder so clearly nobody mistakes it for real (████, XX.XX).
Ambient decoration is the actual goal. See vocabularies/kinetic-typography.md or vocabularies/visible-language.md — different traditions, different payoffs.

Canonical lineage¶

Studio / Designer	Work	Notable for
Perception NYC (John LePore)	Iron Man's Stark HUDs, Black Panther's Shuri lab, Avengers	Radial geometry, translucent data layers
Territory Studio	Blade Runner 2049, The Martian, Ex Machina, Ghost in the Shell (2017)	Analytical overlays, thin-stroke grids, restraint
Ash Thorp	Prometheus, Ender's Game, Call of Duty Ghosts	Motion-forward reveals, procedural data
GMUNK (Bradley G. Munkowitz)	TRON: Legacy, Oblivion, Prometheus	Radial/polar compositions, shader-driven textures
Jayse Hansen	Iron Man 3, Big Hero 6, Star Trek Beyond	Typographic/numeric precision in flight HUDs

Visual grammar¶

Thin strokes (0.5–1px) arranged in grids, polar coordinates, concentric rings, or parallel rules.
Corner brackets (L-shaped marks at the corners of data blocks). Cheap signature, high legibility.
Monospace numerics with leading zeros — 00042, 0.0384, N 40°42'46", T-00:14:22. font-variant-numeric: tabular-nums is the CSS for this.
Radial / polar elements — dials, compass overlays, scan arcs, rose diagrams. Psychodeli's 10-ring wordmark border is a well-tempered instance.
Grid overlays — faint lines in accent color, sometimes animated or parallax-scrolling.
Leader lines — thin diagonal strokes from a data point to a typographic callout, like an engineering drawing.
Scan lines — subtle horizontal-line texture across the frame (~3% opacity, 2px period). Optional chromatic aberration for CRT nostalgia.
Data tickers — live-updating numbers, requestAnimationFrame-driven counters that roll or flicker between values.
Animated reveals — elements fade / translate / scale in with a 100 ms stagger between elements, not instantly (the stagger is a hold, start to start; muriel.motion exempts holds from the duration binary). cubic-bezier(0.4, 0, 0.2, 1) for the "precise machinery" feel; this is muriel's --mg-ease-emphasis.
Restrained palette — one dominant accent hue (cyan, amber, red) on near-black. Matches the universal OLED rule.
Glitch / noise accents — used as punctuation, never as ambient texture.

Circular grammar is semantic, not a skin¶

The circular displays associated with FUI do not share one interaction model. Use ring, pie, or radial menu only when direction selects a command. A bearing/range instrument, cyclic timeline, annular gauge, hierarchy, and reticle may look related while making different claims.

Before adding concentric geometry, declare:

what angle means and where zero sits;
what radius means and whether area is perceptually relevant;
what the centre represents;
the source, update cadence, and interaction of each ring; and
a linear equivalent for exact reading, accessibility, and narrow screens.

Keep data paths and hit paths stable while state paint and scan feedback move. A sweep belongs to sampling phase; a pulse belongs to a sample or alarm; a trail belongs to a named history window. If a moving ring has no owner, remove it. Load references/annular-interfaces.md for the full shared contract and its two worked cases. Load references/radial-menus.md for the specialized command-selector compositor.

Substrate decision¶

Layer	Pick	Why
Thin-stroke geometry (compass rings, grids, crosshairs, corner brackets)	SVG	Lossless scaling; `stroke-width` and `stroke-dasharray` animate on CSS/rAF; no pixel aliasing.
Text + layout	HTML + CSS Grid with `font-variant-numeric: tabular-nums`	Tabular digits stop the ticker from juddering; Grid does the block arithmetic for free.
Tickers, waveforms, scrub overlays	Canvas2D + `requestAnimationFrame`	60fps redraw without DOM reflow; cheap enough for dozens of simultaneous readouts. Use pretext when the animation needs precise text measurement; see `channels/interactive.md`.
Post-process (scan lines, chromatic aberration, noise, glitch)	CSS `repeating-linear-gradient` for scan lines; WebGL2 fragment shader for anything spatially-varying	Scan lines don't need a GPU; glitch does. One fullscreen WebGL pass on top is enough — don't try to render the whole HUD in WebGL.
3D depth (HUD-in-scene, e.g. Iron Man's in-helmet view)	Three.js with Troika SDF text	Respect the SDF alpha rule (see below). Rare; most FUI work is 2D.

Not PixiJS unless you have 10k+ particle-dense elements. FUI is sparse and thin-stroked; PixiJS is overkill.

Common failures¶

Mushy typography. Most amateur FUI dies here. Pick one monospace face, commit to it, track tight, and let the numbers do the work. Don't mix display and working mono in the same block.
Juddering counters. Ticker digits changing width causes layout shift each frame. Fix with font-variant-numeric: tabular-nums on the container — this is a one-line fix that people forget.
Decorative strokes below 55/255. Muriel's universal rule: decorative elements need ≥55/255 on a dark background or they vanish on small screens. Thin-stroke grids at 10% opacity look right on a 5K display and disappear on a phone.
SDF text alpha fades. Never modulate alpha on Troika/BMFont SDF text — it breaks distance-field antialiasing. Cross-fade via RGB tween or scale instead. (See vocabularies/kinetic-typography.md for the canonical phrasing.)
Fake data that reads as fake. Lorem 0923.88.Ipsum is worse than ████. Stylized blanks commit to being blanks; Lorem-style placeholders read as lazy worldbuilding.
Everything animating at once. If the reveal stagger collapses to zero, the composition reads as a pop-in, not as machinery waking up. Keep a 100 ms stagger between elements.
Chrome without content. Corner brackets, scan lines, and thin-stroke grids don't substitute for information. A FUI block with nothing to say is a cosplay prop.
Contrast drift mid-animation. A reveal that tweens from opacity: 0 passes through low-contrast states for several frames. If it dips below 8:1 for more than a frame on readable text, fix by tweening translate/scale instead.

Reference exemplar¶

examples/fui-scaffold.html — a single-file scaffold demonstrating the four load-bearing primitives:

Data ticker — rAF-driven counter with leading zeros, mission clock, packet hex, all tabular-nums.
Radial compass — SVG thin-stroke rings, 36 tick marks (every 9th longer for cardinals), rotating needle bound to time.
Canvas waveform — scrolling signal trace with RMS/peak readouts; shows how Canvas2D and SVG coexist inside the same HUD block.
Staggered reveal — CSS animation using muriel's --mg-duration-reveal and --mg-ease-emphasis tokens with --mg-stagger: 100ms between blocks.

Also demonstrates: corner brackets via ::before/::after, scan-line overlay via repeating-linear-gradient, prefers-reduced-motion fallback, 8:1 contrast on every text element, brand-token CSS custom properties (overridable from a StyleGuide.to_css_vars() drop-in).

Open it directly in a browser: open examples/fui-scaffold.html (macOS) or the equivalent.

examples/annular-fui-console.html is the second circular-interface case after the radial command selector. Its deterministic simulated sensor records map bearing to angle and range to radius; confidence, trails, range gates, and the scan sweep retain distinct layer roles. The same records feed a keyboard- and touch-safe linear contact list, proving that FUI grammar can remain legible and accessible without pretending every ring is a menu.

Reference archives¶

fuidesign.com — Ash Thorp's curated showcase.
hudsandguis.com — dormant but canonical Tumblr archive; still the best single-site reference.
Perception’s portfolio / territorystudio.com — studio portfolios.
CodePen search for #fui, #hud, #sci-fi-ui — community implementations worth forking.
Film stills from the lineage above — particularly Blade Runner 2049 (analytical spread), The Martian (orbital mechanics), Ghost in the Shell 2017 (full-screen data overlays).

Integration with other muriel channels¶

channels/interactive.md — the scaffold lives here as a runnable pattern; CodePen Prefill it to hand readers a live fork.
channels/video.md — capture the running scaffold with Playwright or desktop-control, then burn captions with ffmpeg.
channels/raster.md — screenshot a frozen frame for hero images or paper figures.
channels/style-guides.md — swap the four CSS custom properties at the top of the scaffold for a brand's palette; the composition inherits.
vocabularies/kinetic-typography.md — the overlap surface: sci-fi title cards are kinetic typography in the FUI idiom. The SDF alpha rule belongs to both vocabularies.

Rules that always apply¶

Muriel's universal rules don't relax because the interface is fictional:

8:1 contrast minimum on every text element, including mid-animation states.
Decorative strokes ≥55/255 on a dark background.
Measure before drawing. Canvas at devicePixelRatio for crisp strokes on hidpi; SVG viewBox for scale independence.
Label every number. Bearing 042° not 042; T-00:14:22 not 14:22.
No false profundity. If a tick mark moves and you can't state the reason in one sentence, it shouldn't move.