Pipeline Step Diagram Features Block for React

Edit STAGES at the top of the file: each has a name, a sentence, an icon and its time in seconds. The run's total, each stage's share, the "Slowest" badge and the labels like "2 min 10 s" are all derived from those numbers by small functions, so they always agree. The grid is five columns from md; if you add or remove a stage, change md:grid-cols-5.

Each figure in the closing band is a Sliding Number: its digits roll like an odometer to the value when the band scrolls into view. The old value sits beside it as plain text, so the comparison reads without the animation. Edit IMPACTS for the figures, their units and how many decimals to show.

The stages are an ordered list named "The pipeline, in order", each with a heading, its sentence, its status and its time ("Takes 2 min 10 s"). The chevrons and the share bars are decorative and hidden. Each rolling number carries its final value as hidden text, so it is read once, whole.

The stages run from the right, the chevrons flip to point the way the pipeline goes, and times and percentages are isolated so their units stay in order. The shares and bars follow the same direction.

The header and the stages fade up once on load, with a CSS transition, and the numbers roll when they come into view. With reduced motion the transition is off and the digits change in place.

The five stages become one column of cells with the chevrons pointing down between them, and the three impact figures stack one per row. Nothing scrolls sideways at 320 pixels.