Stories Viewer Team Block for React

The filling segment is a bar that slides in over seven seconds with a CSS animation; when the animation ends, the next story is shown. There is no timer in script. Pausing stops the animation, so a paused story keeps the fill where it was and resumes from there. Change the duration in FILL (--tw-animation-duration:7s) and in the copy.

The Pause stories toggle sits in the controls row, under the viewer on a phone and under the heading from lg; it reports whether it is pressed. With reduced motion the toggle starts pressed and the stories do not advance until a visitor presses it, because moving content they asked not to have is theirs to start.

Tab goes to the five segments, then (on Ark UI, Vue, Svelte and Solid) the viewer itself, then Previous, Next and the toggle. The Left and Right arrows (reversed on a right-to-left page) move between stories from the viewer or from either button. A story is read out when you move by hand, never when the timer does.

Edit STORIES at the top of the file: an id, a name, a role and one sentence in quote. Keep a quote under about 110 characters, since the slides are a fixed height; the segments, the counter and the loop follow the array.

The viewer is full width with the segments across its top, and the controls sit under it on one line. The slide height is fixed, so nothing moves when the story changes.