Ribbon Wave Timeline Features Block for React

Edit STAGES at the top of the file: each has a name, a sentence, a time marker and an icon. HERE is the index of the stage the account is at. The ribbon and the nodes are laid out for six stages; the wave is drawn across six columns of the band, so a different count means changing the wave's width in WAVE and the column count on the list.

SOLID draws the same wave only as far as the account's node, in the same box, so the solid part always ends exactly at the node, whatever the width.

The stages are an ordered list with a heading for each, so they are read in order with the time marker, the name and the sentence. The ribbon is a drawing and is hidden from assistive technology; "You are here" is text under the stage it belongs to.

The ribbon would be too cramped for six sentences, so the stages stack in one column with a line joining their nodes down the start side. It is the same list, restyled, so the order and the words are identical.

The wave keeps its direction, since time runs across it, so the list is laid out left to right from lg; the vertical list below that follows the page's direction, with the line and nodes on the right.

The timeline is the feature, and it has no controls. Add a Shine Button to the header if you want one.