Funnel Chart

Build a conversion funnel of four stages. Structure: a vertical stack. Each stage is a label row, a CENTRED bar, and a drop-off line beneath it. Centring is not styling. Each bar is centred so the stack narrows symmetrically; left-align them and you have an ordinary bar chart lying on its side, and the funnel shape stops meaning anything. Show TWO percentages, not one: 1. share of the TOP stage (100%, 35%, 14%, 5%) 2. drop from the PREVIOUS stage ("−65% from visited") The second is the number people actually act on, and it is the one most funnels leave out. Also show the RAW COUNTS beside the percentages. A funnel in percentages alone hides whether the bottom stage is 400 people or 4. Motion: scaleX from 0 to 1 on each centred bar, 550ms on ease [0.22, 1, 0.36, 1], staggered 120ms down the stack, so the narrowing is read in the same direction as the labels. Step the opacity down slightly per stage. One flat colour gives you four bars of different widths rather than a funnel with any depth. Make the whole block replayable (data-demo-trigger) and re-key the bars per run, because it runs once and otherwise can only be seen on first paint. Under prefers-reduced-motion, render every bar at full width with no stagger. Every number is still there. Colors as tokens: accent for the bars with descending opacity, muted ink for the counts and drop-off lines. Use tabular numerals. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.