# Video Scroll Hero

> The Video Scroll Hero component creates an engaging scroll-triggered video scaling effect where a video starts at a very small size (25% scale) and smoothly expands to full size as users scroll down the page. The video remains fixed in the center of the screen during scaling, providing a cinematic experience that draws attention to the content while maintaining smooth performance through direct CSS transforms. This component is perfect for hero sections, product showcases, or any landing page where you want to create an immersive first impression that encourages users to explore further content below.

- Author: [Isaiah](https://21st.dev/@isaiahbjork)
- License: unknown
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@isaiahbjork/components/video-scroll-hero

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/isaiahbjork/video-scroll-hero?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt