Sci-Fi HUD

About this style

Fictional user interfaces, often called FUI, are the screens designed for films and games: targeting displays, ship consoles and holographic maps that must read in a second of screen time. They borrow from real head-up displays and radar scopes, with thin bright lines on dark ground, range rings, bracket reticles and dense, constantly updating numbers. Motion designers build them as a specialty, and the look also appears in tech brand films and data dashboards.

Make a 10-second film-style fictional interface: a cyan-on-black targeting HUD with a radar sweep, locking brackets, scrolling telemetry and a wireframe globe.

<inputs>
If I don't give you something, use the default and don't ask.
- Vessel: default "ALCYONE · LONG-RANGE SURVEY", callsign ALC-09
- Target: default "K-114 · DERELICT RELAY", bearing 041°, 18,402 km at lock, closing 2.1 km/s
- Planet: default "TESSALY IV"
- Status lines: default "SCANNING SECTOR 7G" → "CONTACT ACQUIRED" → "LOCK CONFIRMED"
- Length: default 10 seconds
</inputs>

<direction>
- Palette: ground #02070A with a faint lift to #06161C behind the radar; cyan #5FE6FF; dim cyan #1F6E7C for grids and idle frames; white #E8FDFF only for focal numbers; amber #FFB547 only for the lock. No other hues.
- Glow: strokes drawn twice with "lighter" compositing, a 6px pass at 10% under the crisp one (1.5px frames, 1px grids, 2.5px brackets).
- Type: Chakra Petch 500/600 uppercase, tracking 0.12em, 20–28px ("LOCK CONFIRMED" 56px); JetBrains Mono for every number, 20–24px, the focal range 64px. Nothing under 20px.
- Layout in 80px margins: a top rail with title, callsign and a counting "MET 041:17:22"; left (x 80–520) a 12-line telemetry log computed from t over six bar meters; center a 760px radar at (960, 560), rings every 95px, a sweep with a 70° conic afterglow and twelve seeded blips that light as it passes; right (x 1400–1840) a 360px wireframe globe (back lines at 22%) with an orbit, a signal scope and the status line; a heading tape along the bottom.
- Motion: boot-up draws, never fades: frames from their corners (0.35s, easeOutCubic), rings from the center 60ms apart, text typed at 45 characters a second. Instruments run at constant rates (sweep 90°/s, globe 12°/s) until the end.
- Lock: four L-brackets start at 2.4× size, rotated 45°, and converge in 0.45s on cubic-bezier(0.34, 1.56, 0.64, 1), turning amber at contact; a ring tightens 120 → 64px; a two-segment leader draws to a callout.
- Numbers mean something: range = 18,402 + 2.1 × (5.0 − t) km until it latches; heading and telemetry follow t.
- Premium reads like a working instrument: clear hierarchy, one bright focal point, numbers that change for a reason. Cheap is random spinning rings, gibberish hex, glitch and everything glowing.
Banned: glitch or RGB split, matrix rain, random hex, scanlines above 4%, lens flares, a third hue, real agencies or insignia, emoji, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.8: Black; the frame and rails draw outward from each edge's middle.
- 0.8–2.0: Panels boot in turn: log and meters, radar, the globe parallel by parallel; title and clock type in.
- 2.0–4.0: Running: sweep, blips, a log line every 0.25s, globe, scope; heading 214° → 226°; "SCANNING SECTOR 7G".
- 4.0–5.2: The blip at 041° holds lit; "CONTACT ACQUIRED"; brackets lock amber at 5.0s; the callout reads "K-114 · DERELICT RELAY", "RNG 18,402 KM", "BRG 041°", "CLOSING 2.1 KM/S".
- 5.2–7.0: An analysis inset opens corner-first in the radar's upper left: a turning wireframe relay (truss, dish, two panel wings) and an "ANALYSIS" bar to 100%; the globe pings the target's track.
- 7.0–8.4: "LOCK CONFIRMED" types in amber in a bracketed frame; readouts latch.
- 8.4–9.0: Everything decelerates: the sweep parks on 041°; globe, log and scope stop.
- 9.0–10.0: Hold.
For other lengths, stretch running and analysis, keep the lock mid-piece and hold at least 1s.
</structure>

<build>
One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, built for 60fps. Google Fonts via <link>, awaiting document.fonts.load() for each face before defining window.seek. Canvas 2D sized from CSS size × devicePixelRatio; project the wireframes with plain 3D math, no three.js. window.seek(t) (t in seconds) sets every visual from t alone, clamping past the end: no CSS transitions or animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Without ?render in the URL, drive seek from requestAnimationFrame; with ?render, don't start that loop.
</build>

<check>
Before showing me, step through one frame per second (0–10s) and look at each. Fix overlaps, clipped or cramped text and anything off-style or Banned. Only the lock is amber, numbers agree with the inputs, and nothing blinks faster than twice a second. Confirm seek(10) and seek(11) match.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Liquid Glass Interface

Made by us

Glass panels with real refraction float over vivid, striped color: their rims bend what's behind them, two buttons fuse…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…