← ui

scroll-stage

ui

the pinned stage: a tall track, a sticky stage, --stage-p driven by CSS scroll-driven animation, acts as checkpoints

npx shadcn add @ag/scroll-stage
1
2
3
01

one track

The section is tall. Its stage is sticky. Scroll drives --stage-p from 0 to 1 across the dwell, in CSS, no React per frame.

02

acts

Each <Act> gets --act-p (its own window) and --act-on (1 while on stage). Opacity, transform, clip: all CSS.

03

state, rarely

useAct() changes once per checkpoint. Mount a phone when its act begins; never sample scroll.

one track

1

The section is tall. Its stage is sticky. Scroll drives --stage-p from 0 to 1 across the dwell, in CSS, no React per frame.

acts

2

Each <Act> gets --act-p (its own window) and --act-on (1 while on stage). Opacity, transform, clip: all CSS.

state, rarely

3

useAct() changes once per checkpoint. Mount a phone when its act begins; never sample scroll.