# Motion Scrollytelling Section

Product tour on the website where each step of how the product works takes over a sticky product visual.

- id: `motion-scrollytelling-section`
- Page: https://agentic-ui-kit.com/components/motion-scrollytelling-section
- Live preview: https://agentic-ui-kit.com/live/component/motion-scrollytelling-section

## Install

```bash
agentic-ui add motion-scrollytelling-section
npx shadcn@4.17.0 add @agentic-ui/motion-scrollytelling-section
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** scroll-driven-steps, sticky-visual, centre-line-activation, layer-crossfade, single-visual-progress, hero-sequence, step-navigation, step-caption, offscreen-pause, reduced-motion-fallback
- **Intents:** navigate, explore-detail, communicate
- **Suits domains:** saas, marketing, ai-workspace, devtools, analytics, knowledge
- **Interaction:** scroll, click, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Product tour on the website where each step of how the product works takes over a sticky product visual, Landing page hero sequence whose frame fills in panel by panel as the headline steps scroll past, Explainer or case study page where short paragraphs drive one chart or diagram beside them
- **Avoid when:** Content users must compare side by side or complete as a task (use a grid, a comparison table or a stepper), Auto-advancing feature tabs that do not depend on scroll (use motion-feature-highlight-seq), Enterprise, billing or regulated screens and app dashboards; the policy lists the scroll group as none for the enterprise personality
- **Preserve when adapting:** steps-in-document-flow, centre-line-activation, text-caption-for-the-active-step, static-list-without-motion
- **Replace when adapting:** steps, visuals, labels, offset, sticky-top
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion