Steps Section

Scroll it: the cards stagger in, the rule draws itself from the first marker toward the last, and a ring draws round each marker — all four over the same window as the step they belong to, off one shared animation-range. The geometry is centre-to-centre, so the rule can neither start before the first marker nor overshoot the last, and a scale can only ever shorten it. Then watch it at rest: a slow highlight travels down each segment on a clock, offset per step so it reads as one signal running the chain rather than every segment throbbing at once. Narrow the frame past md and the row stacks — the rule is display:none there, and a display:none element runs neither the draw nor the pulse.

The same geometry and the same sweep at twice the count, because the rule is per-pair rather than one line stretched behind the row. Six steps hold their single row from lg instead of md — grid-flow-col with auto-cols-fr guarantees one row, which is the guarantee the connector depends on. The stagger tightens rather than trailing off: five gaps of 11.25% is 56.25% of the row's entry phase, just under the 60% cap, and the last card still lands at exactly entry 100%. This is also the count that shows the flow pulse as a train: 3.8s a pass at a 0.42s offset per segment, so several are lit at different phases and the eye follows one down the row.

The other end of the range. One segment, still centre-to-centre, and the second half of the row has no rule after it. Long titles do not move it — the marker is a fixed-size box, so the rule's offset never depends on how many lines the copy takes.

The onboarding case: completed steps become a check with sr-only text, and current carries aria-current="step" plus a slow ring at 0.42Hz — an order of magnitude under the 3Hz flash threshold, and gone entirely under reduced motion. The current marker is the one that does not get the drawn sweep ring: it already wears a static ring and that pulse, and a third circle on one disc is a bullseye. Here each step drives its own segment from its own timeline, so the rule fills one step at a time however long the list runs, and the pulse runs downward through the markers. Neither prop is needed for the marketing case.

Media and copy swap sides down the page, and the DOM stays copy-then-media on every row: only the grid placement flips. Swapping the JSX or reversing the flex row would put the artwork before the sentence explaining it for half the page, for a screen reader and for Tab. Below md there is one track and the placement does nothing. Scroll a row in slowly and watch the two columns: the copy is lifted from below by Reveal while the frame settles down from above and scales back from 1.04 with a bloom arriving under it — opposite directions over one window is the parallax read, bought without any range that can strand at the bottom of a page. Then hover a row, or Tab into one: the frame's border tints and the artwork zooms inside it, never with it, so nothing beside it moves.

Wide rows, a hairline between them, and a display numeral that arrives hollow and fills from the baseline up as its row enters. Scroll the real page rather than this frame: a preview that is fully visible has already finished, which is exactly what a fully-visible section is supposed to do. Then hover a row, or Tab into one — the fill jumps to full and stays there, because the scroll and the pointer are composed with max() rather than one replacing the other, so pointing at a row you already scrolled past does nothing at all. No marker and no connector here: every rule in the other three layouts is measured from a marker's centre, and drawing one to an empty column would be a diagram pointing at nothing.

current and completed in a layout with no marker to put them on. They land on a word above the title instead — visible to everyone, so nothing rides on the colour of a numeral that is aria-hidden decoration. The completed label is read aloud because nothing else announces a finished step; the current one is aria-hidden because aria-current="step" on the row already said it.

The most important frame on this page. A numeral has no honest hollow resting state the way a heading does — an outline nobody fills is a number nobody can read — so the emptying lives inside the same @supports and reduced-motion guards as the fill that ends it. No stylesheet, no animation-timeline, reduced motion and motion={false} all land here: solid ink, full contrast, no stroke.

The numeral block is sized in em against the numeral's own font size, so the skeleton row is the height the real row will be at any viewport — a rem guess here is the layout jump the skeleton exists to prevent. Same padding, same hairline, same two tracks.

The state this docs site exists to prove, and the one every degraded path lands on: the rule drawn end to end, every marker at full size and unringed, every frame flat and in place, every step composed. An engine without animation-timeline and an install that skipped the two stylesheet imports get exactly this. So does a reduced-motion visitor, with one deliberate difference — they keep the hover and focus-within affordance, because which step is under the pointer is state, not a gesture; only the transition into it is dropped. The travel is only ever added to this, never subtracted from it, so there is no configuration in which the connector is half drawn or a frame is left mid-drift.

The same grid, the same marker box and the same three text lines, so the copy landing under it moves nothing. No reveal and no draw here — a skeleton that animates in is a second wait on top of the one it is announcing. Hidden from the accessibility tree because the section already says aria-busy.

Nothing renders, heading included. A one-step "how it works" is a bug in the caller's copy, and drawing a lone numbered card with a connector to nowhere would hide it.