Editorialper-word
True Focus Scan
Words snap from blur to crisp one by one, like a camera scanning.
Installation
Run the following command:
pnpmdlx shadcn@latest add https://mutype.dev/r/true-focus-scan.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| spec | AnimationSpec | — | Animation spec object (imported from components/mutype/specs/<id>). |
| text | string | — | The text to animate. |
| as | "span" | "div" | "h1"–"h4" | "p" | "span" | The HTML element to render. |
| triggerKey | string | number | — | Re-runs the animation when the value changes. |
| duration_multiplier | number | 1 | Scales duration_ms and stagger_ms uniformly. >1 slower, <1 faster. |
| y_travel_multiplier | number | 1 | Multiplier on y_px values; useful to dampen lift on small text. |
| forceReducedMotion | boolean | false | Forces the reduced-motion fallback even when the user has not opted in (testing). |
| onFinished | () => void | — | Fires once when the enter phase completes (not on cancel). |
| className | string | — | Tailwind / CSS class names. Forwarded to the host element. |
Usage notes
The large stagger_ms means only one word is in sharp focus at a time — the others sit at reduced opacity + blur as a soft 'out of focus' bed. Best on 3–7 word headlines; longer copy turns the scan into a slog. For a looping version, drive the implementation to chain enter→hold→exit across each word and restart. Keep the blurred opacity at or above 0.35 so the bed remains legible — going lower drops sighted users below the WCAG-AA contrast threshold for the muted state. Differs from focus-blur-resolve which focus-pulls the whole line at once.
Inspired by Cinematic rack-focus across a headline; Apple keynote scanning emphasis; reactbits TrueFocus..