Scroll storyPro
A feature section where scrolling the copy drives a pinned product view through each step.
- 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { ScrollStory } from 'animui/scroll-story';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
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.
import { ScrollStory } from "animui/scroll-story"; export default function FeaturesSection() { return ( <section> <ScrollStory /> </section> );}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.
