Vertical Stages Funnel Stats Block for React

Edit FLOW at the top of the file: each stage is a name and the count of people who reached it, first to last. Every bar width, share, drop, lost count, the overall conversion, the biggest drop and the headline are computed from the counts. Five stages fit the column; four or six work, and the weights in FILLS are listed by position, so add or remove one with each stage.

As a share of the stage before, not of the first stage: "30% dropped" on the way to Shipping details means 3,750 of the 12,480 carts were left, while the stage's own share (70%) is of the first stage. The big figure is the last stage's share of the first, to one decimal, and the stage named in the headline is the one with the biggest drop.

Whether a drop is a problem depends on the stage, so the block states it in words and numbers on a hairline and keeps the bars to weights of the text colour. That keeps it correct in every theme and readable in greyscale. If a drop crosses a threshold you care about, add a status badge to its connector row rather than tinting the bars.

The funnel is an ordered list: each stage has an h3 with its name, its count and share as text, and the connector row that comes before it carries the drop and the people lost as text, so a screen reader hears "30% dropped, 3,750 people", then "Shipping details, 8,730, 70%". The bars and the hairlines are decorative. The big figure rolls up when it scrolls into view and ends on its real value; with reduced motion it simply appears.

The bars sit in a left-to-right box, so each one starts at the left edge of the column, while the names, numbers and connector rows follow the page direction, with each number and percent in a bdi element, and the down arrows never mirror.

Below lg the divider becomes a rule with a + on each rail and the two parts stack: the header, the conversion and the facts first, then the funnel at its full width. The bars are as wide as the column, and nothing scrolls sideways at 320 pixels.