← all 100 themes
Theme 005 · Product UI as the stage

Light-Mode Data HUD

A near-white cockpit of sixteen hairline-ruled micro-panels — counters, sparklines, tickers — with terminal density and Swiss calm. A thin teal scanline sweeps the whole grid, the camera rack-focuses from panel to panel, and corner brackets snap onto the one number that is wrong.

readability ●○○trust ●●●effort med
LIVE38 DASHBOARDS14 METRICSALL GREEN09:43:58
SIGNUPS412
ACTIVE USERS8,190
CHECKOUT CONV.3.42%
P95 LATENCY212ms
ERROR RATE0.4%
EVENTS/SEC2,418
REVENUE / H+2.1%
DEPLOYS#2231
RETENTION D741%
QUEUE DEPTH17
CPU38%
UPTIME99.98
REFUNDS0.2%
CART SIZE2.4
SESSIONS31k
ALERTS0
STATUS · 16 / 16 PANELS OK
38 dashboards. All green. Almost.
SIGNUPS 412ACTIVE 8,190P95 212MSERR 0.4%EV/S 2,418
1 · HOOK0:00–0:08

Odometer digits roll in every panel at once (steps(10), 0.6 s) while the grid is racked out of focus; on the bar-2 downbeat the corner brackets slam onto the centre plate and “Almost.” lands coral on the snare.

PULSESWEEP 1 / ∞2,418 EV/S14 METRICS
SIGNUPS412
ACTIVE USERS8,190
CHECKOUT CONV.3.42%
P95 LATENCY212ms
ERROR RATE0.4%
EVENTS/SEC2,418
REVENUE / H+2.1%
DEPLOYS#2231
RETENTION D741%
QUEUE DEPTH17
CPU38%
UPTIME99.98
REFUNDS0.2%
CART SIZE2.4
SESSIONS31k
ALERTS0
Acme Pulse
WATCHING · 2,418 EVENTS/SEC
✓ 8 / 16 SCANNEDNEXT SWEEP 00:59
2 · REVEAL0:08 (drop)

On the drop a 4 px teal scanline enters from the left and crosses the grid in 1.2 s (linear, 2 bars would be too slow — it lands on the next downbeat); every panel it passes brightens to teal with a tick, and the Acme Pulse plate fades up centre with teal brackets.

PULSEANOMALIES 1SIGNUPS ✓P95 ✓ERR ✓
SIGNUPS412
ACTIVE8,190
P95212ms
ERR0.4%
CHECKOUT CONVERSION · 09:30–09:48
2.80%−18%
09:42 · deploy #2231
Checkout conversion −18%
since 09:42 · after deploy #2231
Roll backAcknowledge
3 · PROOF MOMENT0:12–0:32

The camera racks focus — every other panel blurs to 6 px as the checkout panel scales up 1.1× (0.8 s power2.inOut); the scanline freezes on 09:42, coral brackets snap in on the snare and the ANOMALIES counter ticks 0→1, then one calm card slides up from below with the human's two options.

SIGNUPS412
ACTIVE USERS8,190
CHECKOUT CONV.3.42%
P95 LATENCY212ms
ERROR RATE0.4%
EVENTS/SEC2,418
REVENUE / H+2.1%
DEPLOYS#2231
RETENTION D741%
QUEUE DEPTH17
CPU38%
UPTIME99.98
REFUNDS0.2%
CART SIZE2.4
SESSIONS31k
ALERTS0
Acme Pulse
Every metric. Every minute.
Start free
● 14 / 14 METRICS NOMINALRESOLVED IN 6 MINACME.EXAMPLE/PULSE
4 · CTA0:36–0:45

All sixteen panels dim to ghost hairlines in a diagonal stagger (0.03 s each, top-left→bottom-right) as the plate grows from the checkout panel's position; the status ticker at the bottom scrolls left continuously and the Start free button lands on the final downbeat.

COMPONENT KIT

MOTION · MUSIC

WHY / RISK · ADAPT IT

Why: density itself is the argument — this is what “watching everything” looks like — and the light, Swiss treatment keeps it trustworthy rather than sci-fi. Risk: at feed size dense panels are unreadable, so every beat must hold one panel hero-sized and blur the rest.

Adapt to your product: fill the sixteen panels with your own KPIs and let the hero panel be the one number your product protects; keep the brackets and scanline as the “our product is looking” device.

References: Edward Tufte — sparklines · Stripe Sessions 2025 — developer keynote