Text starts blurred then crisply resolves for a soft-focus reveal effect.
Every prop is wired to the controls underneath. The animation starts when the text scrolls into view and replays when a control changes.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "" | The text content to animate. |
animateBy | string | "words" | Determines whether to animate by 'words' or 'letters'. |
direction | string | "top" | Direction from which the words/letters appear ('top' or 'bottom'). |
delay | number | 200 | Delay between animations for each word/letter (in ms). |
stepDuration | number | 0.35 | The time taken for each letter/word to animate (in seconds). |
threshold | number | 0.1 | Intersection threshold for triggering the animation. |
rootMargin | string | "0px" | Root margin for the intersection observer. |
animationFrom | object | undefined | Starting snapshot of each segment (filter, opacity, y). Overrides the direction default. |
animationTo | object[] | undefined | Keyframe snapshots the segment passes through after the starting one. |
easing | function | string | (t) => t | Easing applied across the keyframes. |
animationComplete | event | - | Emitted when the last word/letter finishes animating. |
Keyboard shortcuts and ARIA behavior.