Scroll Story
Scrollytelling: a sticky phone mockup whose screen changes as each feature step scrolls into view.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
An IntersectionObserver with a thin center band picks the active step; the phone cross-fades its screen in the scroll direction and the progress rail fills with the step's color. Works inside any scroll container.
Installation
$ npx shadcn@latest add https://guetix.com/r/scroll-story.json
Uses the shadcn CLI. It creates components/guetix/scroll-story.tsx and installs nothing else.
Usage
example.tsx
import { ScrollStory } from "@/components/guetix/scroll-story";
export default function Example() {
return <ScrollStory />;
}
Feature toursOnboardingCase studies
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01rootMargin -45% / -45% turns the viewport into a thin 'reading line', so exactly one step is active.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { title; body; screen; color }[] | — | Steps with their phone screen. |
| title | string | — | Heading. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Active step marked with aria-current; inactive screens are aria-hidden.