GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

HUD Interface Design: 9 UIs That Watch You Back

· Godrich · 9 items · 15 min read

Design trendsPage templateCSS onlyLanding pageHero sectionCTA

HUD interface design borrows the targeting reticles and radar overlays from sci-fi movies and games, laying corner brackets and coordinate readouts over the

This post turns that surveillance-console feel into nine working landing-page pieces — terminal ui design 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.

Open the full page

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. In the same design pillar, Y2K Web Design leads with chrome gloss instead of amber brackets, and Neumorphism Design Kit drops contrast until only a pair of soft shadows is left.

Lock-on hero01 hero-hud Status-bar nav02 nav-hud Target-lock cards03 card-grid-hud System-log list04 feature-list-hud Locked-target plan05 pricing-hud Face-scan quote06 testimonial-hud Alert band07 cta-band-hud Terminal footer08 footer-hud Lock-on button, scan input09 buttons-inputs-hud

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

01Lock-on hero

What moves

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.

Lock-on hero
Open in a new tab

01 · Lock-on hero — Measured area 48.094% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

브래킷 락온스캔라인 스윕모노스페이스 리드아웃

In the code

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

What moves

The whole nav sits inside a bracket-framed status bar, and a scanning underline glides between tabs to mark whichever one is active.

Status-bar nav
Open in a new tab

02 · Status-bar nav — Measured area 0.389% · moving frames 7/23Original by GODRICH · SCSS and React ship in the zip · See the password

스캔 밑줄 이동브래킷 프레임깜빡이는 상태 점

In the code

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

What moves

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.

Target-lock cards
Open in a new tab

03 · Target-lock cards — Measured area 34.317% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

뷰파인더 브래킷순차 스캔좌표 리드아웃

In the code

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

What moves

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.

System-log list
Open in a new tab

04 · System-log list — Measured area 9.292% · moving frames 18/23Original by GODRICH · SCSS and React ship in the zip · See the password

세로 스캔타임스탬프순차 체크

In the code

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

What moves

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.

Locked-target plan
Open in a new tab

05 · Locked-target plan — Measured area 5.45% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

브래킷 맥동LOCKED 배지디포커스

In the code

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

What moves

A face-recognition box sweeps once across the avatar, and the quote card wears a bracket frame with a VERIFIED tag.

Face-scan quote
Open in a new tab

06 · Face-scan quote — Measured area 1.751% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

원샷 스캔VERIFIED 태그브래킷 프레임

In the code

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

What moves

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.

Alert band
Open in a new tab

07 · Alert band — Measured area 48.985% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

대각 스캔 드리프트브래킷 맥동글리치 호버

In the code

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

What moves

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.

Terminal footer
Open in a new tab

08 · Terminal footer — Measured area 29.669% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

노이즈 플리커브래킷 코너모노스페이스 링크

In the code

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

What moves

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.

Lock-on button, scan input
Open in a new tab

09 · Lock-on button, scan input — Measured area 7.12% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

브래킷 스냅스캔 포커스 글로우깜빡이는 캐럿

In the code

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.

result

Where it breaks (the trap)

sci-fi hud design — where does it break?

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 next snag

Monospace readouts lose their column alignment first when they move into an email body, and that limit is mapped out in Marketing Email Design. 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

What we checked

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.

Where to go next

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

Is this cyberpunk ui design copied from a real game or movie 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. A kit that assumes a light ground from the very first section is the Pastel Website Design Kit 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.

Enter the archive password

The password is inside this article. You will find it as you read.