Blur Text
A text animation that reveals words or letters with a blur-in effect using Framer Motion
Preview
Hello World
Overview
BlurText animates text by splitting it into words or individual letters, then revealing each segment with a smooth blur-to-clear transition. Supports customizable direction, delay, easing, and multi-step keyframe animations.
Features
- Animate by words or letters — choose your split granularity
- IntersectionObserver — triggers only when visible in viewport
- Multi-step keyframes — blur → semi-blur → clear with configurable steps
- Custom easing — pass any Framer Motion easing function
Usage
import BlurText from '@/components/blur-text'
<BlurText
text="Hello World"
delay={150}
animateBy="words"
direction="top"
className="text-4xl font-bold"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | '' | The text content to animate |
delay | number | 200 | Delay between each word/letter animation (ms) |
animateBy | 'words' | 'letters' | 'words' | Split text by words or individual letters |
direction | 'top' | 'bottom' | 'top' | Direction of the blur-in entrance |
threshold | number | 0.1 | IntersectionObserver visibility threshold |
className | string | '' | CSS class for the container |
stepDuration | number | 0.35 | Duration of each animation step (seconds) |
onAnimationComplete | () => void | — | Callback when animation finishes |