# Animated Blur Text

> BlurText is a lightweight, customizable React animated text component that reveals content with smooth blur effects and dynamic text scroll animation. Ideal for modern React landing pages, hero sections, and interactive UIs, it supports both letter-by-letter and word-by-word animation using Framer Motion. Built-in Intersection Observer support ensures animations trigger only when text enters the viewport, making it perfect for react intersection observer animation use cases. Whether you're building a sleek portfolio or an engaging website, BlurText delivers responsive, performant, and eye-catching text reveal effects for React.

- Author: [deleted_rb](https://21st.dev/@deleted_reactbits)
- Library: deleted_rb
- License: unknown
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@deleted_reactbits/components/animated-blur-text

## Install

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