← Components · Playground

Scroll stories with <usa-story>

Six scroll-storytelling templates (5.4) — each sets --usa-story-progress and fires usa:step. Under reduced motion nothing slides or zooms: the gallery stacks, counters show their final values.

template="pin"

Chapter one — the stage stays pinned while the text scrolls.

Chapter two — the active step drives the stage via data-active-step.

Chapter three — style it with plain CSS.

template="gallery"
1
2
3
4
5
template="zoom"
ZOOM
template="compare"
Before
After
template="counter"
0developers
0uptime
0raised
template="highlight"

Every story starts with a question.

The paragraph crossing the middle of the screen lights up.

The others step back so the reader keeps their place.