Scroll Scene
Scroll scene: a pinned screen changes step by step, with a progress rail. Pro · 3D and motion › Scroll scenes
Scrollytelling for product tours, case studies and reports: the text scrolls by as usual while a pinned stage swaps its visual for each step — fading, sliding, zooming or flipping in 3D — and a rail shows the progress. The scroll is native; React renders only when the step changes. Where scroll-driven animations work, the rail fills in CSS and the step is noticed as it crosses the reading line, so nothing runs per scrolled frame; elsewhere the scene writes one progress property once per scrolled frame. The rail's buttons jump to a step; visuals of other steps are inert and hidden from assistive technology, the text stays in reading order. Narrow screens stack the stage over the text. Reduced motion: visuals swap without movement.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add scroll-scenenpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ScrollScene } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
steps * | ScrollSceneStep[] | The chapters: each has its text and the visual the stage shows while it is read. | |
layout | 'split' | 'overlay' | 'split' | split — text beside a pinned stage; overlay — text cards scroll over a full-width pinned stage. |
transition | 'fade' | 'slide' | 'zoom' | 'flip' | 'fade' | How the stage changes from one visual to the next. |
stageHeight | number | string | 'min(72vh, 520px)' | Height of the pinned stage, px or any CSS length. |
offset | number | 24 | Distance from the top of the scroll area at which the stage pins, px. |
rail | boolean | true | Shows the rail: overall progress and a button per step. |
headingLevel | 2 | 3 | 4 | 3 | Heading level of the step titles. |
onStepChange | (index: number) => void | Called when another step becomes the one being read. | |
labels | Partial<ScrollSceneLabels> | Text for the rail. |
Related components
- Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll
- Stacking Panels — Panels stick on scroll and pile into a stack
- Helix Rail — Cards on a helix that spins with scroll
- Parallax Layers — Depth layers that shift with scroll and cursor
- Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
- Stagger — Lists, grids and table rows appear in a wave, one after another
- Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
- Layout Group — Jump-free reordering: filter, sort, regrid
- Presence — Enter and exit: an element stays mounted until its exit animation ends
- Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
- Orbit Showcase — 3D ring of cards: drag with momentum, arrows, keyboard
- Coverflow Carousel — 3D product carousel on native scroll: swipe with momentum, arrows, keyboard
Previous: Helix Rail · Next: Parallax Layers · All 3D and motion