Scroll storyPro
A feature section where scrolling the copy drives a pinned product view through each step.
Live block · sample data
- Marketing pages that walk through a product in a few steps as people scroll.
- Feature sections where a pinned product view should change with the copy.
- Use scroll-highlight for a single paragraph that reveals with scroll.
- Use chaos-to-order for one before and after switch.
- Use feature-illustration for a static feature visual.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this on a marketing page to walk through a product in a few steps. Replace the step copy and the product states with your own.
example.tsx
import { ScrollStory } from "@/registry/blocks/scroll-story/scroll-story"; export default function FeaturesSection() { return ( <section> <ScrollStory /> </section> );}Built fromMotion
ScrollStory
A feature section where scrolling the copy drives a pinned product view through four steps: messages arrive, sort by theme, fold into a trend and end in a share sheet. Takes no props; STEPS, MESSAGES, THEMES, TREND, TEAM and LINK are inline sample data in scroll-story.tsx, and sending to a channel is simulated.
No props.
- Arrow leftorArrow right
- On the step tabs, scrolls to the previous or next step.
- The scrolling viewport is a focusable, labelled region, so it scrolls with the keyboard.
- Step tabs use a tablist with roving tabindex, and the active step in the copy carries aria-current="step".
- The product status and copy link and send results are announced through polite live regions.
- Scroll position drives a progress value that fills the step tabs, sorts messages on springs and draws the trend line.
- Springs are restated as stiffness and damping, so retargeting mid-scroll keeps velocity.
- Reduced motion jumps to steps instead of smooth scrolling and replaces the springs with short fades.
- The story scrolls inside its own viewport of clamp(480px, 74vh, 600px), not the page.
- Below a 700px container the product view stacks above the copy and stays pinned while the steps scroll under it.
- Scroll is read in a passive listener and measured once per animation frame.
- Product states are memoized per step, so they do not re-render on every scroll frame.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use on a marketing page to walk through a product in a few steps.
- Replace STEPS copy and the product states (MESSAGES, THEMES, TREND, TEAM, LINK) in scroll-story.tsx with your own.
- Below 700px the product view stacks above the copy and stays pinned; no extra layout work is needed.
The full library index for assistants is at /llms.txt.
