React Scrollytelling Components
Chapter progression, frame-by-frame playback, pinned elements and scenes driven by scroll progress. Suited to product launch pages and long-form stories, but expensive to build, so make sure the content can carry the format first.
7 components, 1 of them free to install without an account.
A scroll-driven exploded view — once the section pins, the product's cut-out layers blow apart along the Z axis, the specs annotated on each layer reveal in order, and at the end of the scroll everything collapses back into the complete product and releases into the next section.
A full-screen, scene-by-scene scroll-snap narrative scroll — as each scene settles, oversized numbers and keywords are choreographed in, the background color transitions across the whole scene by theme, and progress dots and autoplay are built in.
A two-column scroll narrative with a sticky data stage on the left and step-by-step prose on the right; the stage's chart state, highlight band, and annotation line morph between steps by tweening on the step index.
A field-guide style scroll walkthrough — a full-bleed plate is pinned on one side and numbered notes run down the other; scrolling to a note pans and zooms the camera to its hotspot and lights up the numbered leader line.
- Strata HeadersFree
Section headers pin to the top and stack up in order once you scroll past them, accumulating into a live table of contents built out of your reading progress.
Place each passage of content by coordinate on an oversized canvas, and let scroll drive a camera that pans, zooms, and rotates along a waypoint path for a Prezi-style spatial narrative.
A page-scale A/B duel split screen — scrolling reveals the metrics round by round while the divider in the middle slides like a tug-of-war rope and the running score at the bottom jumps in sync.