# Container Text Scroll

> The ContainerTextScroll component is a dynamic React/Next.js UI element designed to create visually engaging scroll-based animations for text content. It leverages framer-motion to animate the text’s position, scale, and tilt as the user scrolls, creating a smooth parallax-like effect. The component is fully responsive, adjusting animation parameters for mobile and desktop screens, and allows placing titles or paragraphs directly over images or backgrounds. It is ideal for hero sections, landing pages, or any interface where immersive, interactive scrolling experiences are desired. By combining motion, scaling, and rotation effects, ContainerTextScroll helps developers deliver modern, eye-catching UI with minimal setup.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@ruixen.ui/components/container-text-scroll

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/container-text-scroll?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