HUD Interface Design: 9 UIs That Watch You Back

This post turns that surveillance-console feel into nine working landing-page pieces you can paste straight into a project, even if you've never written a line of CSS.

Scroll the full page below first. From the header nav down to the terminal footer, every corner bracket and scanline should pulse on the same rhythm — that consistency is what makes the style read as one system instead of nine random widgets.

The nine pieces that built that page are in the grid below, each one openable on its own. They're ordered the way a visitor actually reads the page: first glance, checking the menu, skimming features, watching progress, comparing plans, trusting a review, one more nudge, signing up, then the footer.

Auto-plays · click a tile to jump to its section · all nine in one zip

• 01 Lock-on hero
• 02 Status-bar nav
• 03 Target-lock cards
• 04 System-log list
• 05 Locked-target plan
• 06 Face-scan quote
• 07 Alert band
• 08 Terminal footer
• 09 Lock-on button, scan input

01Lock-on hero

Four corner brackets close in around the headline card on a 0.15-second stagger, like a camera locking focus, while a scanline sweeps once from top to bottom behind it. Use it on a SaaS landing first screen or a product-launch cover, anywhere the first impression should feel like the screen just noticed you.

<div class="relative w-full max-w-md overflow-hidden rounded-control bg-ink px-6 py-8 shadow-glow">
  <span class="corner corner-tl" aria-hidden="true"></span>
  <span class="corner corner-tr" aria-hidden="true"></span>
  <span class="corner corner-bl" aria-hidden="true"></span>
  <span class="corner corner-br" aria-hidden="true"></span>
  <div class="scan-sweep absolute inset-0 pointer-events-none" aria-hidden="true"></div>
  <p class="mb-3 flex items-center gap-2 text-[11px] font-bold uppercase tracking-widest text-accent">
    <span class="blink-dot inline-block h-1.5 w-1.5 rounded-full bg-accent"></span>SENTRY / ONLINE
  </p>
  <h1 class="mb-2 text-2xl font-bold leading-tight">Never miss a moment</h1>
  <p class="mb-4 text-sm text-cream/60">It detects and logs in real time.</p>
  <button class="rounded-control border border-accent bg-accent/10 px-5 py-2 text-sm font-bold text-accent">Start for free</button>
</div>

02Status-bar nav

The whole nav sits inside a bracket-framed status bar, and a scanning underline glides between tabs to mark whichever one is active. Reach for it on a landing-page top bar or a dashboard nav, any spot where the brand, the menu, and a live status all need to share one row.

<nav class="relative flex items-center gap-4 rounded-control bg-ink/95 px-3 py-2 shadow-glow" aria-label="SENTRY">
  <span class="shrink-0 whitespace-nowrap pl-2 font-extrabold text-sm">SENTRY</span>
  <div class="relative flex min-w-0 flex-1 items-stretch">
    <span class="relative z-10 flex-1 whitespace-nowrap py-2 text-center text-xs font-semibold text-cream/70">Home</span>
    <span class="relative z-10 flex-1 whitespace-nowrap py-2 text-center text-xs font-semibold text-cream/70">Features</span>
    <span class="relative z-10 flex-1 whitespace-nowrap py-2 text-center text-xs font-semibold text-cream/70">Pricing</span>
    <span class="relative z-10 flex-1 whitespace-nowrap py-2 text-center text-xs font-semibold text-cream/70">Contact</span>
    <span class="nav-indicator absolute bottom-0 left-0 h-[2px] w-1/4 bg-accent"></span>
  </div>
  <span class="shrink-0 whitespace-nowrap flex items-center gap-1 pr-2 text-[10px] font-bold tracking-widest text-accent">
    <span class="blink-dot inline-block h-1.5 w-1.5 rounded-full bg-accent"></span>LIVE
  </span>
</nav>

03Target-lock cards

Every card in the grid gets a viewfinder-style bracket frame, and a scanline sweeps card by card in sequence while a coordinate readout sits in the corner. This is the one for a feature showcase grid or a portfolio, anywhere the same card shape repeats across several slots.

<div class="relative overflow-hidden rounded-card bg-ink p-4 shadow-glow">
  <span class="corner corner-sm corner-tl" aria-hidden="true"></span>
  <span class="corner corner-sm corner-tr" aria-hidden="true"></span>
  <span class="corner corner-sm corner-bl" aria-hidden="true"></span>
  <span class="corner corner-sm corner-br" aria-hidden="true"></span>
  <div class="scan-sweep absolute inset-0 pointer-events-none" style="animation-delay:-.5s"></div>
  <span class="relative mb-2 block text-right text-[10px] font-bold text-data/85">#A1</span>
  <span class="relative mb-3 block h-5 w-5 rounded border border-accent bg-accent/20"></span>
  <p class="relative text-sm font-bold">Track</p>
</div>

04System-log list

Each row carries a timestamp prefix, and a bright scan bar sweeps down through the rows one at a time, leaving an OK mark behind it. It suits a feature list or an onboarding checklist — anywhere you want visitors to feel a sequence of checks finishing in order.

<ul class="flex flex-col gap-1">
  <li class="row-scan flex items-center gap-3 rounded px-3 py-2">
    <span class="flex-none text-[10px] font-bold text-accent/70">00:01</span>
    <span class="min-w-0 flex-1 text-sm font-semibold">User authentication verified</span>
    <span class="flex-none text-[10px] font-bold text-accent">OK</span>
  </li>
  <li class="row-scan flex items-center gap-3 rounded px-3 py-2" style="animation-delay:-.5s">
    <span class="flex-none text-[10px] font-bold text-accent/70">00:02</span>
    <span class="min-w-0 flex-1 text-sm font-semibold">Location data synced</span>
    <span class="flex-none text-[10px] font-bold text-accent">OK</span>
  </li>
</ul>
<p class="mt-3 text-[10px] text-accent/70">READY <span class="blink-dot inline-block h-2.5 w-1.5 bg-accent"></span></p>

05Locked-target plan

Only the recommended plan's brackets pulse like a breathing lock and wear a LOCKED badge, while the other card's opacity drops so it looks like it's fallen out of focus. Pull it out for a two-tier pricing table or any free-versus-paid comparison where one option should clearly win the eye.

<div class="glow-breathe relative flex-1 basis-40 rounded-card bg-ink p-5 shadow-glow">
  <span class="corner corner-sm corner-tl" aria-hidden="true"></span>
  <span class="corner corner-sm corner-tr" aria-hidden="true"></span>
  <span class="corner corner-sm corner-bl" aria-hidden="true"></span>
  <span class="corner corner-sm corner-br" aria-hidden="true"></span>
  <span class="mb-2 inline-block rounded bg-accent/15 px-2 py-1 text-[10px] font-bold tracking-widest text-accent">LOCKED</span>
  <p class="mb-1 text-base font-bold">Pro</p>
  <p class="mb-3 text-xs text-cream/60">$9/mo</p>
  <ul class="flex flex-col gap-1 text-xs text-cream/75">
    <li>Real-time tracking</li>
    <li>Unlimited channels</li>
  </ul>
</div>

06Face-scan quote

A face-recognition box sweeps once across the avatar, and the quote card wears a bracket frame with a VERIFIED tag. Testimonials and partner quotes are the natural home for it, anywhere you want a line of copy to read as coming from someone the system has already checked.

<div class="flex flex-wrap items-center gap-4">
  <div class="relative h-16 w-16 flex-none overflow-hidden rounded-control bg-ink">
    <span class="face-scan absolute left-0 top-0 h-[3px] w-full bg-accent/85"></span>
  </div>
  <div class="relative min-w-[220px] flex-1 rounded-card bg-ink p-4 shadow-glow">
    <span class="corner corner-sm corner-tl" aria-hidden="true"></span>
    <span class="corner corner-sm corner-tr" aria-hidden="true"></span>
    <span class="mb-2 inline-block text-[10px] font-bold tracking-widest text-accent">VERIFIED</span>
    <blockquote class="mb-2 text-sm font-semibold leading-relaxed">Nothing slips through, so I can relax.</blockquote>
    <p class="text-xs text-cream/60">Lee Do-yoon · Security Team Manager</p>
  </div>
</div>

07Alert band

A diagonal scanline drifts slowly across the full-width band while the corner brackets pulse, and the button gives a brief glitch shudder every two seconds. It works as a sign-up band or a start-free-trial prompt, a second hook partway down the page.

<div class="relative overflow-hidden rounded-card bg-ink px-8 py-12 shadow-glow">
  <span class="corner corner-tl" aria-hidden="true"></span>
  <span class="corner corner-tr" aria-hidden="true"></span>
  <span class="corner corner-bl" aria-hidden="true"></span>
  <span class="corner corner-br" aria-hidden="true"></span>
  <div class="scan-diag absolute inset-0 pointer-events-none"></div>
  <p class="mb-2 text-[11px] font-bold uppercase tracking-widest text-accent">ALERT</p>
  <h2 class="mb-5 max-w-2xl text-2xl font-bold leading-snug sm:text-3xl">Turn on your watch network right now</h2>
  <button class="glitch-btn rounded-control border border-accent bg-accent/10 px-6 py-3 text-sm font-bold text-accent">Start free trial</button>
</div>

08Terminal footer

Faint noise flickers to a new spot every frame over the ink-dark background, the link columns read like data panels, and brackets sit on the top corners. Use it for a multi-column footer or a sitemap-style link dump, anywhere a lot of links need one consistent tone.

<footer class="relative overflow-hidden rounded-t-card bg-ink px-6 pt-8 pb-6 shadow-glow">
  <span class="corner corner-tl" aria-hidden="true"></span>
  <span class="corner corner-tr" aria-hidden="true"></span>
  <div class="noise-flicker absolute inset-0 pointer-events-none"></div>
  <div class="relative grid grid-cols-1 gap-6 sm:grid-cols-3">
    <div class="min-w-0">
      <p class="mb-2 text-[10px] font-bold uppercase tracking-widest text-accent">SYSTEM</p>
      <ul class="flex flex-col gap-1 text-xs text-cream/70">
        <li>Dashboard</li>
        <li>Notification settings</li>
      </ul>
    </div>
  </div>
  <p class="relative mt-6 border-t border-accent/20 pt-3 text-[10px] text-cream/40">SENTRY © 2026</p>
</footer>

09Lock-on button, scan input

Press the button and its corner brackets snap inward and lock; focus the input and its underline grows into an amber glow that spreads like a scan. It's built for form submit buttons and email inputs, the exact spot where a visitor's last click deserves a clear, physical-feeling response.

<form class="mx-auto flex max-w-md flex-col gap-3 rounded-card bg-ink p-6 shadow-glow sm:flex-row">
  <label class="field-glow relative flex-1 rounded-control bg-ink">
    <input class="w-full rounded-control bg-transparent px-4 py-3 text-sm text-cream outline-none" type="email" placeholder="Email address">
  </label>
  <button class="btn-snap relative rounded-control border border-accent bg-accent/10 px-5 py-3 text-sm font-bold text-accent">
    <span class="snap-corner snap-tl" aria-hidden="true"></span>
    <span class="snap-corner snap-tr" aria-hidden="true"></span>
    <span class="snap-corner snap-bl" aria-hidden="true"></span>
    <span class="snap-corner snap-br" aria-hidden="true"></span>
    Sign up
  </button>
</form>

Custom tailwind.config

Every piece above and the full page pull their color, type, radius, and shadow values from this one config — nowhere else. Change a number here and the whole page follows, from the bracket color to the card corners.

theme: {
  extend: {
    colors: {
      ink: "#17141a",
      cream: "#fff7e6",
      accent: "#ffd23f",
      data: "#2f6df6",
      line: "rgba(255,210,63,.12)",
    },
    fontFamily: {
      display: ["'Space Grotesk'", "system-ui", "sans-serif"],
      body: ["'Inter'", "system-ui", "sans-serif"],
    },
    borderRadius: { control: "12px", card: "16px", pill: "999px" },
    boxShadow: {
      glow: "0 0 0 1px rgba(255,210,63,.4), 0 0 24px rgba(255,210,63,.16)",
      "glow-strong": "0 0 0 1px rgba(255,210,63,.6), 0 0 32px rgba(255,210,63,.4)",
    },
    spacing: { gutter: "16px" },
  },
},

There are really only two colors doing any work. The amber accent (#ffd23f) carries every bracket, status dot, and button; the blue data color (#2f6df6) is the one deliberate exception, reserved for coordinates and ID numbers that need to read as "this is a number" rather than "this is UI."

Vibe-Coding Prompt

Drop that config into your project first, and the instruction you hand Claude Code or Cursor can stay this short. The full prompt with every rule spelled out lives in the zip's prompt.md.

Background is ink(#17141a) alone, accent is amber(#ffd23f) alone. Give every card, header,
and CTA corner an L-shaped bracket that pulses softly in accent. Use monospace only for
coordinates, timestamps, and status text — leave headings and body copy on the regular
fonts. Stick to three radii: rounded-card, rounded-pill, rounded-control.

I ran that instruction against page/index.html and captured the full page at 1280px wide.

Where it breaks (the trap)

The most common trap is setting a max-width on a big heading and never checking it at more than one screen size. Section 07's alert band had this exact bug: with max-w-sm (384px) on the heading, the headline text wrapped so that a single short word got orphaned alone on its own line — and it did that even on a 1280px desktop, because the cause was the max-width value itself, not the viewport. Testing only narrow screens would never have caught it. Switching to max-w-2xl fixed the heading at all three widths we checked (1280, 768, and 375px). The second trap sits in section 06's face-scan quote: the distance the scan box travels (61px) is hardcoded from the avatar's height (64px) minus the box's own thickness, in raw pixels — resize the avatar and you have to redo that subtraction by hand.

The zip bundling all nine files, the react port, and the full prompt is locked, and the password is t2nt5x9v — the download button is below.

A third trap shows up in section 03's card grid, where the scan order is set with nth-child delays. Add or remove a card from the four-card layout and the animation-delay sequence has to be re-matched by hand, or the scan starts overlapping cards or skipping a slot.

Accessibility

All nine demos wrap their motion in the prefers-reduced-motion media query, as documented on MDN, so a visitor who has that setting on sees a locked, static end-state — brackets at full size, dots and carets always lit — instead of the scanning and glitching. The bracket, scanline, and noise layers are all marked aria-hidden="true" since they're decoration, and status words like LOCKED, VERIFIED, and LIVE are carried in text, not color alone, so they still read for colorblind visitors.

If a different look catches your eye, the design trend index has the rest, and the about page explains how each piece gets checked before it's posted.

FAQ

Did you copy a real game or movie's HUD?

No. Nothing here reproduces a specific game, film, or product's screen — it borrows general surveillance-console visual language (bracket lock-on, scanlines, monospace readouts) that shows up across dozens of sci-fi interfaces. SENTRY, the service name used throughout, is a placeholder we made up for the demo.

Can this dark tone work on a light site?

Only partway, and we wouldn't recommend forcing it. The HUD/terminal feel depends on brackets and scanlines standing out against a dark ground; flip the background light and you'd need to push the accent color much harder for the same contrast, which starts reading as a warning or error state instead.

Does this work without Tailwind, in plain CSS?

Yes — link the tokens.css file that ships in the zip. It's the same values from tailwind.config.js carried over as CSS variables (--color-ink, --color-accent, and so on), so referencing var(--color-accent) directly gets you the same amber without Tailwind in the project at all.