Motion Primitives

Scroll the panel. The card lifts over its own entry phase and is finished the moment it is all the way inside the panel, which is a point every scroller can reach — so there is no scroll position, and no un-scrollable box, that leaves it faded. Scroll back up and it is still there: the resting style is the base state.

Watch the fifth row. Each row takes a later slice of one shared timeline, because a scroll timeline has no clock to delay against — but only the start moves. Every row ends inside the group's entry phase and the last one ends exactly as the group finishes entering, so by the time all five are on screen all five have arrived. The tail cannot be left dimmed.

Nothing to scroll. The content is rendered twice to hide the seam and the copy is aria-hidden and inert, so a screen reader hears six chips and Tab visits six. The track clips itself — the page never gains a scrollbar.

Hover it, or Tab into it. Same primitive with reverse and pauseOnHover; focus always pauses it whether asked or not. Under prefers-reduced-motion this row becomes a static, horizontally scrollable list, not a frozen half-pass.

Scroll inside the frame: the bar and the ring both track this panel, not the page, because the frame names its own scroll timeline. Both are aria-hidden — they duplicate the scrollbar — and both render nothing under reduced motion.

Scroll inside the frame. Each panel parks a step below the one before and settles by scale, never opacity: watch the buried panels stay solid — the paragraph underneath must never read through them as ghost text.

Scroll the panel to run all three counters together: the band names one view timeline and the numbers borrow it, which is the documented way to give a one-line number a longer run than its own height. They finish as the band lands, never later, so a counter can never sit on a half-counted number. The true value is real text underneath — what a screen reader reads, what reduced motion shows, what a headless render prints.