True Focus Text
Words cycle in and out of focus between blur and sharpness, with an animated frame marking the focal point.
Focus cycles word by word: the focused word is sharp and the rest are blurred, while a four-corner frame glides smoothly to the current word. manualMode hands control over to mouse hover instead.
Loading preview…
npx shadcn@latest add https://webberui.com/r/true-focus-text.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
5
0.5
1
<TrueFocusText />
Installation
npx shadcn@latest add https://webberui.com/r/true-focus-text.jsonOr, once registries are configured in components.json, install it as @webberui/true-focus-text.
Usage
import { TrueFocusText } from "@/components/ui/true-focus-text";
<TrueFocusText
sentence="Focus Sharpens Everything"
borderColor="#22d3ee"
glowColor="rgba(34, 211, 238, 0.55)"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
sentence | string | "True Focus Text" | The sentence to cycle focus through, split on whitespace |
blurAmount | number | 5 | Blur strength of unfocused words (px) |
borderColor | string | "#22d3ee" | Color of the four corners of the focus frame |
glowColor | string | "rgba(34, 211, 238, 0.55)" | Glow color of the corners |
animationDuration | number | 0.5 | Duration of the frame movement and blur switch (seconds) |
pauseBetweenAnimations | number | 1 | How long each word stays in focus (seconds) |
manualMode | boolean | false | Let mouse hover control the focus instead of cycling automatically |
Accessibility
- When the user has "reduce motion" enabled at the system level, a sharp, frameless static sentence is rendered
- The complete sentence is exposed
sr-onlyto assistive technology, and both the split visual words and the frame are markedaria-hidden