← All components
Text / effect
True Focus
A moving frame draws one word into focus while the rest softly blur.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- The included Demo.tsx recreates the preview. The implementation owns one animation loop and excludes paused, hidden and offscreen time.
- Reduced motion keeps the content readable. Original attribution and notice are included.
- Manual mode supports pointer hover, Left/Right, Home/End and Enter/Space. Resize and font changes remeasure the focus frame.
- All words stay clear under reduced motion. Animation duration and pause are measured in seconds.
React 19framer-motion@12.42.2
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
sentence | string | "True Focus" | Sentence |
separator | string | " " | Word separator |
manualMode | boolean | false | Manual focus |
blurAmount | number | 5 | Blur amount |
borderColor | string | "#00ff00" | Frame color |
glowColor | string | "#00ff0099" | Glow color |
animationDuration | number | 0.5 | Transition duration |
pauseBetweenAnimations | number | 1 | Pause between words |
paused | boolean | false | Freeze animation without advancing hidden time. |
replayToken | number | 0 | Change to restart. |
className | string | '' | Additional container classes. |