Scroll Story
Prov1.0.0Scroll through your product's loop step by step, with a panel that plays each step.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { ScrollStory } from "@/components/ui/notchset/blocks/scroll-story";
export function HowItWorks() {
return (
<ScrollStory
title="From a failing run to a shipped fix"
panelLabel="RELAY · PROD"
steps={[
{ key: "CATCH", title: "A run fails", body: "Flagged before customers notice.", panel: (active) => <div>{active ? "Caught" : ""}</div> },
{ key: "SHIP", title: "Ship the fix", body: "Roll out by percent.", panel: () => <div>Rollout</div> },
]}
/>
);
}Props
steps–{ key, title, body, fact?, panel: (active) => node }[]Each step's text and its panel layer, told whether it is active.
panelLabel–stringThe panel's header line.
eyebrow / title / description–string / ReactNode / ReactNodeThe header.
Anatomy
- The active step is the one whose section is 200px into view.
- Rail nodes scroll smoothly to their step (instantly under reduced motion).
- Panels are told whether they are active, so they can animate on entry.
ScrollStorydata-slot="scroll-story"Header, rail, steps and the panel.
Source
components/ui/notchset/blocks/scroll-story.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @beautiful-ui-pro/scroll-storyNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- A 'how it works' section with three to five steps
- Showing a workflow where each step has something to see
Use something else when
- A single feature: use Spotlight Grid or Feature Bento
- Long documentation: use the docs
Mistakes to avoid
- Keep it to three to five steps; each needs something to show
- Make panels play on entry with the active flag, not on mount
Agents find it by
- scroll story, scrollytelling, how it works, product loop, step by step, sticky scroll, feature walkthrough, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/scroll-story.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- ↑ ↓ / Page Up Page Down
- Scroll the story
- Tab then Enter
- Jump to a step from the rail
Accessibility
- The scroller is focusable, so the keyboard scrolls it; rail nodes are buttons named with their step and mark the current one (aria-current=step)
- Inactive panel layers are hidden and inert; the step label is announced as it changes
- Under 760px everything flows in page order with no inner scroller
Motion
- Rail
- The ink fill follows the scroll; the current node grows
- Panel
- Layers cross-fade with a 12px move (520ms, 140ms after the step changes)
- Steps
- Inactive text fades to 30%
Responsive
- Under 760px (container width) the steps flow down the page with each panel under its text.
Performance
- Scroll is read once per animation frame; panels decide their own cost.
Changelog
v1.0.0 · 2026-10-04
First release
Part of
Included with Pro
Pro is in early access.
