# Hero Video

> ✔️ ContainerScroll component props: accepts react html attributes ✔️ ContainerStagger component: staggers/delayed the animated children by default <<transition staggerChildren is set to 0.2>> accepts html motion props ✔️ ContainerAnimated component: (⚠️ to get orchestrated animations make sure to make it inside <ContainerStagger /> component) accepts "animation" prop define the animation set type: "left" | "right" | "top" | "bottom" | "z" | "blur" | undefined (set to opacity by default), accepts html motion props ✔️ ContainerInset component:  {   translateYRange?: \[string, string\] 👉 default:\["-25%", "50%"\]   insetYRange?: \[number, number\] 👉 default: \[35, 0\]   insetXRange?: \[number, number\] 👉 default:👉 default :\[35, 0\]   roundednessRange?: \[number, number\] 👉 default: \[1000, 16\] } ⚠️ <ContainerInset /> can be used only inside <ContainerScroll /> component

- Author: [YoucefBnm Bnm](https://21st.dev/@youcefbnm)
- Library: [Systaliko UI](https://21st.dev/@youcefbnm/library/systaliko-ui)
- License: mpl-2.0
- npm dependencies: motion
- Live preview: https://21st.dev/@youcefbnm/components/hero-video

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/youcefbnm/hero-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