# Motion Scroll Container 3d

Card that rotates from tilted to flat as it scrolls into view.

- id: `motion-scroll-container-3d`
- Page: https://agentic-ui-kit.com/components/motion-scroll-container-3d
- Live preview: https://agentic-ui-kit.com/live/component/motion-scroll-container-3d?piece=motion-scroll-container-3d

## Install

```bash
agentic-ui add motion-scroll-container-3d
npx shadcn@4.17.0 add @agentic-ui/motion-scroll-container-3d
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** scroll-linked-tilt, tilt-to-flat-on-enter, scale-and-lift, perspective-stage, default-analytics-window, any-content, heading-and-description, function-mapper-scroll, reduced-motion-fallback
- **Intents:** communicate, explore-detail
- **Suits domains:** marketing, saas, devtools, ai-workspace, analytics
- **Interaction:** scroll
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** card that rotates from tilted to flat as it scrolls into view, 3d scroll container for a product screenshot on a landing page, hero dashboard mockup that tilts back and straightens on scroll, perspective scroll animation for an app preview
- **Avoid when:** The picture must be pixel-sharp while it moves (use motion-reveal-on-scroll), A pinned story that advances with the scroll is wanted (use motion-scrollytelling-section), Layers drifting at different speeds are wanted (use motion-depth-scroll), Enterprise personality, where the scroll group is not allowed (the flat card is shown)
- **Preserve when adapting:** perspective-on-the-stage-not-the-card, function-mappers, flat-final-state, heading-level-prop
- **Replace when adapting:** content, title, description, rotate, scale, lift, perspective
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, motion, react
- **Motion:** profile subtle, library motion, reduced-motion fallback yes, target 60 fps
- **npm dependencies (registry):** motion@12.23.24
- **Registry dependencies:** lib-motion