TrueFocus
true-focusMoves an animated focus frame and blur treatment between words.
Usage
Basic usage
Input the whole sentence, press the space to segment the words and automatically cycle through the focus, leaving the remaining words blurred.
<TrueFocus
sentence="True Focus Effect"
className="text-3xl font-bold text-foreground"
/>Manual hover focus
manualMode Turn off the automatic carousel and focus on a word by hovering the mouse.
<TrueFocus
sentence="Hover each word"
manualMode
className="text-3xl font-bold text-foreground"
/>Customize corner frame color
borderColor accepts the legal CSS color, and it is recommended to eat token with the --color- prefix.
<TrueFocus
sentence="Hulian Real Focus"
borderColor="var(--color-primary)"
blurAmount={6}
className="text-3xl font-bold text-foreground"
/>Adjust blur and dwell
blurAmount controls the out-of-focus blur radius, and animationDuration controls the word dwell seconds.
<TrueFocus
sentence="Slow Heavy Blur Focus"
blurAmount={9}
animationDuration={2}
className="text-3xl font-bold text-foreground"
/>When to use
Use TrueFocus to scan a short sentence word by word, keeping the active word sharp while a corner frame follows it and the others remain blurred. Use BlurText for a one-time blur reveal without a frame, ScrollReveal for scroll-linked progress, or Heading for static titles.
Import
import { TrueFocus } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| sentence | string | "True Focus" | For the entire sentence text, press separator to segment the words and focus on each word. |
| separator | string | " " | Word segmentation separator (passed to String.prototype.split) |
| blurAmount | number | 5 | Blur radius of out-of-focus words (px) |
| borderColor | string | "var(--color-chart-1)" | Square bracket stroke color (CSS color, token is recommended), must have --color- prefix or legal CSS color |
| animationDuration | number | 1.2 | Animation/dwell seconds of single focus switch |
| pauseBetweenAnimations | number | 0.6 | Pause between switches in automatic mode (seconds) |
| manualMode | boolean | false | When true, the carousel will not be automatically rotated, and a word will be focused by hovering the mouse. |
The remaining <div> native attributes are transparently transmitted.
Example
<TrueFocus sentence="True Focus Effect" className="text-3xl font-bold text-foreground" />
<TrueFocus
sentence="HulianUI true focus"
borderColor="var(--color-primary)"
blurAmount={6}
className="text-3xl font-bold text-foreground"
/>Usage guidelines
- The corner frame is positioned from each word's measured rectangle. Provide enough layout space—preferably a fixed-height container—to avoid wrapping or compression that misaligns the frame.
borderColormust be prefixed with--color-or a legal CSS color; barevar(--primary)will not be parsed under this Tailwind v4 setting.- Under
prefers-reduced-motion, every word remains clear and focus does not cycle.
Related
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
<TrueFocus
sentence="Hulian Real Focus Effect"
blurAmount={5}
manualMode={false}
animationDuration={1.2}
/>