127 Components
Sticky Scroll Storytelling
CardsPinned split-screen storytelling layout where scrolling through text chapters on the left animates the sticky media stage on the right in real time.
Scroll inside the container or click any chapter
01 · Design System
Machined from a single block of tokens.
Every border, surface, and shadow shares a unified monochrome scale that adapts seamlessly between daylight and OLED dark mode.
02 · Spring Physics
Interruptible motion that respects momentum.
Unlike fixed-duration CSS curves, spring animations preserve velocity when redirected mid-flight for natural tactile feedback.
03 · Zero Lock-In
Own every line of code in your repository.
Install via CLI or copy the TypeScript file directly. No black-box npm wrapper, no CSS conflicts, and full control over markup.
Step 1/3
Contrast Ratio
18.4 : 1 AAA
Synced Sticky Stage
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/sticky-scroll-story.json"
Props
TypeScript props supported by <StickyScrollStory />.
| Prop | Type | Default | Description |
|---|---|---|---|
| sections | StorySection[] | — | Array of chapters ({ id, badge, title, description, metricLabel, metricValue }). |
| heading | string | "Scroll inside the container or click any chapter" | Helper text displayed in the top bar of the storytelling container. |
| className | string | — | Additional Tailwind CSS classes for the outer wrapper. |
Key Features
- Split layout with scrollable narrative chapters on the left and a sticky media card on the right.
- Automatically tracks scroll position and syncs the active chapter with spring transitions.
- Clickable chapter blocks and top progress dots for instant keyboard/pointer navigation.
Keyboard & Accessibility
- Includes clickable chapter indicators with descriptive aria-labels for non-scroll navigation.
- Maintains high-contrast focus and active states on the current narrative step.
- Respects prefers-reduced-motion for media card transitions.