Vertical Steps Journey Block for React

The stages are STAGES at the top of the file: each has a title, a when, an effort, an action, a done line (how you know it is finished) and an id. The stepper, its count and the "stage 3 of 6" line are all computed from the list, so you can add or remove a stage. Keep when in relative time ("Week 2", "Day 90"), so the page doesn't go stale. The initial stage is useState(2): change it to start somewhere else.

It's the catalog's Steps in vertical orientation, so each stage is a real control. Choosing a stage makes it the current one, and the stages before it complete and tick off. Because the stages aren't a form, there is no Next button and nothing blocks you from jumping: Steps isn't set to linear. The stage's text lives in its trigger, so the whole row is the target, and each stage's "done when" line is the Steps panel its trigger controls.

Tab moves onto the list's one stop, the current stage; the up and down arrow keys move between stages, Home and End jump to the ends, and Enter or Space makes the focused stage the current one. The "you are here" line is a polite status, so changing the stage announces it; the chosen stage's "done when" panel sits right under it. The stage's timing and key action are read as part of its trigger.

The split stacks: the header first, then the stepper as a band ruled from rail to rail with each row full width, then the "you are here" line, which closes the block. The rail and the numbers stay at the start of each row, the text wraps beside them, and nothing scrolls sideways at 320 pixels.

Yes. Steps draws its rail with a physical offset, so the block overrides it with a logical one; the rail stays centred under the numbers, which move to the right in a right-to-left layout, and the row's text follows them.

The header and the stepper fade up once on load, and the indicators change colour when you choose a stage. Under reduced motion the entrance and the colour transitions are skipped. Nothing loops.