# Marketing Scrollytelling

Scrollytelling how it works section where a sticky product visual changes as the visitor scrolls through steps.

- id: `marketing-scrollytelling`
- Page: https://agentic-ui-kit.com/components/marketing-scrollytelling
- Live preview: https://agentic-ui-kit.com/live/component/marketing-scrollytelling?piece=marketing-scrollytelling

## Install

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

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** scroll-driven-story, sticky-visual, crossfade-layers, step-navigation, static-fallback, custom-visuals, reduced-motion, dark-mode
- **Intents:** explore-detail, communicate
- **Suits domains:** marketing, saas, ai-agents, devtools, analytics
- **Interaction:** scroll, click, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** scrollytelling how it works section where a sticky product visual changes as the visitor scrolls through steps, scroll-driven product story on a landing page with four steps and pinned illustrations, explain our workflow step by step with scroll animation and a static fallback for reduced motion
- **Avoid when:** short pages where a three-card feature grid is enough (use marketing-feature-grid), content that must be compared side by side, inside scroll containers other than the page
- **Preserve when adapting:** document-order-steps, static-fallback, step-caption
- **Replace when adapting:** copy, steps, visuals, side
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion-scrollytelling-section, lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives, motion-scrollytelling-section