Installation
Usage
import { ScrollStory } from "@/components/scroll-story"
const steps = [
{ title: "Plan", body: "Agree on what to build.", visual: <div className="bg-sky-200" /> },
{ title: "Build", body: "Make it real.", visual: <div className="bg-violet-200" /> },
{ title: "Ship", body: "Put it in front of people.", visual: <div className="bg-emerald-200" /> },
]
export function HowItWorks() {
return <ScrollStory steps={steps} />
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { eyebrow?, title, body, visual }[] | — | Each step's text, and what the stage shows while it is read. |
| stageSide | "right" | "left" | "right" | Which side the pinned stage sits on (it goes above the text on phones). |
| headingLevel | 2 | 3 | 4 | 3 | Level of each step's title in your page outline. |
| onStepChange | (index: number) => void | — | Called when the step being read changes. |
Accessibility
- Plain content in reading order: an ordered list of steps with real headings; the current one has aria-current="step".
- Only the current visual is exposed; the others are inert and hidden from assistive technology.
- Nothing depends on scrolling to be read: every step's text is always on the page.
- Under prefers-reduced-motion the visuals swap without moving.
Changelog
- v1.0.0Latest
First release.