Blur Text
Text Effects
Viewport-triggered blur reveal animation for words or letters with configurable direction and stagger.
Loading preview...
Customize
Animate By:
Direction:
Text
Delay (ms)120
Step Duration (s)0.35
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | '' | Text content to animate. |
delay | number | 200 | Stagger delay per segment in milliseconds. |
className | string | '' | Additional classes for the wrapper element. |
animateBy | 'words' | 'letters' | 'words' | Split animation by words or letters. |
direction | 'top' | 'bottom' | 'top' | Initial movement direction. |
threshold | number | 0.1 | IntersectionObserver threshold. |
rootMargin | string | '0px' | IntersectionObserver rootMargin. |
animationFrom | Record<string, string | number> | auto | Initial keyframe values. |
animationTo | Array<Record<string, string | number>> | auto | Animation keyframe snapshots. |
easing | Easing | Easing[] | (t) => t | Framer Motion easing value. |
stepDuration | number | 0.35 | Duration of each keyframe step in seconds. |
onAnimationComplete | () => void | undefined | Callback after final segment finishes. |