On the surface every dashboard card looks healthy. A bright scanner band passes over them and, inside it, the product turns to X-ray: the hidden skeleton of the flow glows in bone-white lines, and one bone is fractured. A thermal pass then shows the heat spreading around the break until a human cools it down.
readability ●●●trust ●●●effort med
And the drop still shipped on Friday.
✓ OK
SIGNUPS
1,204
✓ OK
ACTIVE USERS
18,930
✓ OK
P95 LATENCY
212 ms
✓ OK
ERROR RATE
0.4 %
✓ OK
CHECKOUT
3.1 %
✓ OK
EVENTS/SEC
2,418
Surface view · every card says fine
1 · HOOK0:00–0:08
Six healthy cards pop in, left→right, one per beat, each stamping a green "✓ OK"; the calm is the joke. "Friday." lands on the bar-2 downbeat.
✓ OK
SIGNUPS
1,204
✓ OK
P95 LATENCY
212 ms
✓ OK
ERROR RATE
0.4 %
✓ OK
EVENTS/SEC
2,418
✓ OK
UPTIME
99.9 %
✓ OK
QUEUE
12 ms
Acme Pulse
Scan pass 1
X-ray band
2 · REVEAL0:08 (drop)
On the drop the scanner band slams in from the left and parks at centre; inside it the cards become bone-white wireframes and the Acme mark and "Acme Pulse" glow as the only solid things, on beats 1 and 3.
Scan pass 2 · the flow under the card
−18%Checkout conversion
since 09:42 · after deploy #2231 · the card on the surface still says OK
Roll backAcknowledge
3 · PROOF MOMENT0:12–0:32
The band travels left→right at constant speed, drawing the flow's bones node by node; at Cart→Checkout it finds the fracture, the palette cross-fades to thermal on the downbeat and the heat blooms (sine.inOut, 1.2 s loop) until the card asks for a human call.
Acme Pulse
Caught before customers noticed.
Start free
thermal · all cool
4 · CTA0:36–0:45
The thermal image cools from coral to teal and navy as the heat drains out, right→left; the lockup and tagline fade up through the cool field and Start free lands warm on the final downbeat.
COMPONENT KIT
Surface cards — ordinary healthy-looking UI with green "✓ OK" chips; the lie on the surface.
Scanner band — bright-edged vertical band with a soft bleed; everything inside it is X-ray.
Skeleton layer — the product's hidden flow (Visit → Cart → Checkout → Paid) drawn as glowing bones and joints.
Fracture — a coral zigzag break between two bones; the anomaly, precisely located.
Thermal LUT — navy → teal → amber → coral → white legend; heat means risk.
Hot-spot readout — "RISK 0.87 · DEPLOY #2231" callout over the heat bloom.
MOTION · MUSIC
Band mask — clip-path inset() window travelling at constant speed, 1 frame-width per bar (2 s at 120 BPM); only inside the band is X-ray.
Palette switch — X-ray → thermal via CSS filter / SVG feComponentTransfer cross-fade over 400 ms, exactly on a downbeat.
Heat bloom — hot spot scales 0.9 → 1.1 with sine.inOut on a 1.2 s loop; cools right→left for the CTA.
WHY / RISK · ADAPT IT
It shows the product's core truth in one image: the surface looks fine while something underneath is broken, and only a scan can see it. Risk: medical imagery can feel clinical or alarming; keep fractures small and always resolve them with a human decision.
Adapt to your product: Put your own dashboard on the surface and draw your real pipeline or architecture as the skeleton; the fracture sits wherever your product finds problems.
