# Motion Scroll Expand

Image or video that expands to full screen while scrolling.

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

## Install

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

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** scroll-expand-media, pinned-stage, clip-path-window, full-bleed-end-state, heading-fades-out, caption-fades-in, any-media, runway-length, function-mapper-scroll, reduced-motion-fallback
- **Intents:** communicate, explore-detail
- **Suits domains:** marketing, media, travel, ecommerce
- **Interaction:** scroll
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** image or video that expands to full screen while scrolling, scroll expand hero media section, thumbnail grows into a full-bleed banner as you scroll, cinematic scroll reveal that takes over the viewport
- **Avoid when:** Several steps of copy must advance one after another (use motion-scrollytelling-section), Content below must stay visible while scrolling (the stage pins the viewport), A short entrance animation is enough (use motion-reveal-on-scroll), Enterprise personality, where the scroll group is not allowed (the page layout is shown)
- **Preserve when adapting:** clip-path-not-resize, sticky-pinned-stage, solid-caption-background, page-layout-fallback
- **Replace when adapting:** media, title, description, inset, radius, runway
- **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