Dropoff Rate Funnel Stats Block for React

Edit FLOW at the top of the file: each step is a name and the count of people who reached it. The bar widths, the ghosts, every drop rate, the share that stayed to the end, the badge and the headline are computed from those counts. Add or remove a step and the list, the numbering and the biggest leak follow. Steps are expected to shrink: a count above the step before would draw a negative ghost.

It is the width that was lost. Every bar is drawn as a share of the first step, so a step's solid bar ends where its count ends, and the hatched ghost runs from there to where the step before ended. The ghost's width is the drop, which makes a big leak a wide hatch you can see before you read the number. The hatching is a foreground colour at a low weight, so it works in light and dark themes and every preset.

It is the step that lost the largest share of the step before it, not the largest number of people. If two steps tie, both are ringed. It is marked with a ring and a badge, never with colour: a warning colour would be wrong in some themes and would say nothing to a reader who can't see it. The state is the ring, the word "Biggest leak" and the number.

Yes. The steps are an ordered list with a heading for each step, and the count and the drop are plain text ("3,210 users", "minus 59% lost at this step"). The bars and their ghosts are decorative and hidden from assistive technology because the text says the same thing. Contrast of the text and the ring passes in light and dark. The drop figure is written with a true minus sign and sits in its own direction box, so a right-to-left page doesn't move the sign.

Each row stacks: the step and its count on one line, the bar under it, and the drop rate under the bar ("−59% lost at this step"). The bars keep their scale at any width, and nothing scrolls sideways at 320 pixels. The bars run from the start of the line in every language, because time flows one way in a funnel, so the box is always left to right.

The header and the framed list fade up once on load. The bars are drawn as they are, because they report a total rather than a progress. With reduced motion nothing fades.