Theme 065 · Data storytelling

Sankey Leak

Your product as plumbing: every user journey is a ribbon whose width is its volume, in the Minard and Sankey tradition. Dozens of loose streams braid into one Acme Pulse channel, and the anomaly is literally visible as a coral leak peeling off the checkout node.

readability ●●○trust ●●●effort med

1 · HOOK0:00–0:08

Grey ribbons unspool left to right across the frame like tangled cables; the thin coral one is drawn last and the headline's italic Friday lands on the downbeat before the drop.

2 · REVEAL0:08 (drop)

On the drop every ribbon's end snaps toward the centre and they braid into one; the Acme mark punches in at the knot and a thick teal channel pours out to the right on beat 2.

3 · PROOF MOMENT0:12–0:32

Flow pours through Visits → Cart → Checkout → Paid, one stage per beat; at Checkout a coral band peels downward on the snare, −18% counts in, then the camera settles on Roll back.

4 · CTA0:36–0:45

Three thin teal ribbons merge into the main channel, which bends down and becomes the Start free button; the italic line lands on the downbeat and the button fills on the last bar.

COMPONENT KIT

Flow ribbon — cubic-bezier band, width = volume, teal at 55–90 % opacity
Stage node — thin ink bar with a bold stage label above it
Exit fade — gradient ribbon that dissolves = users who normally leave
Leak band — the one coral ribbon that is new since the deploy
Rule + callout — hairline rule separating the diagram from the numbers
Terminal button — the last node of the flow is the CTA itself

MOTION · MUSIC

Pour-through — ribbon clip-path wipes left → right with power1.inOut 0.5 s per stage, one beat per stage at 120 BPM
Braid snap — ribbon endpoints tween to the knot with expo.inOut 0.75 s ending exactly on the drop
Leak peel — coral band grows from 0 to full width with elastic.out(1,0.6) 0.6 s on the snare; label types 30 ms/char

WHY / RISK · ADAPT IT

Width-as-volume makes a conversion drop physical: you see traffic escaping, not a number changing. Risk: Sankeys look technical — keep labels big and the leak the only colour event.

Adapt to your product: Map your core funnel (signup → activate → pay, request → queue → worker) as three or four nodes and let the anomaly be a coloured band leaking from the stage that broke.

References: en.wikipedia.org/wiki/Sankey_diagram (width-as-flow and Minard's 1869 Napoleon map lineage)