# Motion Reveal On Scroll

Staggered entrance of KPI cards when scrolling a dashboard.

- id: `motion-reveal-on-scroll`
- Page: https://agentic-ui-kit.com/components/motion-reveal-on-scroll
- Live preview: https://agentic-ui-kit.com/live/component/motion-reveal-on-scroll

## Install

```bash
agentic-ui add motion-reveal-on-scroll
npx shadcn@4.17.0 add @agentic-ui/motion-reveal-on-scroll
```

## Metadata

- **Level:** primitive
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** intersection-observer-reveal, staggered-entrance, reveal-variants, personality-gating, reduced-motion-fallback, informative-state-preservation
- **Intents:** navigate, communicate, monitor-live, track-status
- **Suits domains:** saas, ai-workspace, operations, devtools, ecommerce
- **Interaction:** scroll, theme-switch, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Staggered entrance of KPI cards when scrolling a dashboard, Revealing sections on landing pages and changelogs, Activity timeline that appears as it is scrolled through
- **Avoid when:** Dense tables or content the user needs to scan immediately, Virtualized lists where nodes are constantly mounted and unmounted
- **Preserve when adapting:** reduced-motion-fallback, personality-timing-table, stagger-cap, visible-before-hydration
- **Replace when adapting:** demo-content, reveal-variant, threshold-and-root-margin
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.17/10
- **Quality breakdown:** visual 8.8/10, responsive 9/10, accessibility 9.2/10, code 9/10
- **Uses primitives:** card
- **npm dependencies:** @agentic-ui/motion, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion