Stage Icons Funnel Stats Block for React

Edit FLOW at the top of the file. A step is a count, an icon (any lucide icon), a short name for the column, a note that completes the sentence screen readers hear ("18,400 visitors reached the signup page"), a fill (a weight of the foreground) and an entrance delay. Heights, the heads, the conversions and the headline are computed from the counts. Keep names short, one word where you can: five columns share the width of a phone.

It is the share of the step before that reached the next one: "65%" between Landing and Form means 65% of the people who landed started the form. It is not the share of everyone, which is the height of the column. The overall conversion, the last column over the first, is in the header.

Yes. The steps are an ordered list; each has a heading, and a sentence only screen readers hear gives its count and conversion ("11,960 visitors started the signup form, 65% of the step before"). The columns, plates and conversions are decorative and hidden from assistive technology. The head above a column uses a short form ("18.4K"), and the exact number is in the spoken sentence. Contrast passes in light and dark, because the figures are text on the page, not on a fill.

All five columns stay in one row: the figure is inset only a few pixels, the plates shrink from 40 to 28 pixels, the columns are a little shorter and the conversions sit on the hairline between the plates. At 320 pixels the names are the only text that could crowd, which is why they are one word. Nothing scrolls sideways.

The figure is always drawn from the start of the line to its end in left-to-right order, because a funnel's steps are a sequence rather than a layout. The text around it, the header and the caption, follows the page's direction.

The header and the figure fade up once on load, and the columns grow from their baseline in turn. With reduced motion everything is drawn as it is, with no movement.