Story Progress Bars

Build segmented story progress bars over a media surface. Structure: a tall media panel, a row of N equal-width segments pinned across its top, and a small position caption. Use SEGMENTS, not one continuous bar. The segment count is a promise - the viewer can see how much is left before deciding whether to stay. A single bar hides the end, which is exactly why people leave stories. Three states in one row: segments before the current index are full, the current one is filling, later ones are empty. Fill each with scaleX from a left transform origin (a transform, not an animated width) so it runs on the compositor while the media behind it is also moving. Advance on an interval (about 60ms) accumulating toward the per-segment duration; when it completes, move to the next index and reset. Press and hold to pause: an invisible full-surface button wired to onPointerDown / onPointerUp, setting a held flag that stops the interval. Every story UI has this and none of them say so, so DRAW the state - a play/pause glyph in the corner. Wire onPointerLeave to release as well; without it, dragging off the surface leaves the story paused forever with no way back. Accessibility: the button carries an aria-label that reflects the state, and the "3 of 5" caption is aria-live="polite" so progress does not depend on seeing five thin bars. Under prefers-reduced-motion, render the current segment full and do not auto-advance. Colors as tokens: ink media surface, paper for the fills, one accent in the media gradient. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.