# Scroll Animated Video

> A production-ready React hero section built with GSAP ScrollTrigger and optional Lenis smooth scrolling, it auto-respects system dark/light mode and ships with a bold, modern typographic style.  What’s inside  Sticky, expanding media container (video or image) with depth darkening Overlay that reveals on scroll with caption, heading, paragraphs, and a slot for CTAs Headline “film-roll” exit animation Fully prop-driven API (layout, easing, blur, scroll length, toggles) System theme only (no manual overrides) via color-scheme + prefers-color-scheme Single-file component, SSR-safe dynamic imports (Next.js friendly) Clean teardown of ScrollTriggers/Lenis to prevent leaks

- Author: [scott clayton](https://21st.dev/@lovesickfromthe6ix)
- License: unknown
- Live preview: https://21st.dev/@lovesickfromthe6ix/components/scroll-animated-video

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/lovesickfromthe6ix/scroll-animated-video?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