Applies dynamic blur / clarity over a series of words in order.
Every prop is wired to the controls underneath. Turn on Hover Mode to move the focus frame with the pointer instead of a timer.
| Prop | Type | Default | Description |
|---|---|---|---|
sentence | string | 'True Focus' | The text to display with the focus animation. |
separator | string | ' ' | Optional string used to separate words in the sentence. |
manualMode | boolean | false | Disables automatic animation when set to true. |
blurAmount | number | 5 | The amount of blur applied to non-active words. |
borderColor | string | 'green' | The color of the focus borders. |
glowColor | string | 'rgba(0, 255, 0, 0.6)' | The color of the glowing effect on the borders. |
animationDuration | number | 0.5 | The duration of the animation for each word. |
pauseBetweenAnimations | number | 1 | Time to pause between focusing on each word (in auto mode). |
Keyboard shortcuts and ARIA behavior.