TrueFocus
true-focus真实焦点 · 句中一词清晰余词模糊 + 焦点循环移动 + 四角框跟随(测量 rect 定位 · 角框吃 chart token · manualMode 悬停聚焦 · reduced-motion 全清晰)
用法
基础用法
传入整句，按空格切词后自动循环聚焦，余词模糊。
TrueFocusEffect
tsx
<TrueFocus
sentence="True Focus Effect"
className="text-3xl font-bold text-foreground"
/>手动悬停聚焦
manualMode 关闭自动轮播，改由鼠标悬停某词来对焦。
Hovereachword
tsx
<TrueFocus
sentence="Hover each word"
manualMode
className="text-3xl font-bold text-foreground"
/>自定义角框色
borderColor 接受合法 CSS 颜色，建议吃带 --color- 前缀的 token。
瑚琏真实焦点
tsx
<TrueFocus
sentence="瑚琏 真实 焦点"
borderColor="var(--color-primary)"
blurAmount={6}
className="text-3xl font-bold text-foreground"
/>调整模糊与停留
blurAmount 控制失焦模糊半径，animationDuration 控制单词停留秒数。
慢速重模糊焦点
tsx
<TrueFocus
sentence="慢速 重模糊 焦点"
blurAmount={9}
animationDuration={2}
className="text-3xl font-bold text-foreground"
/>何时用
短句逐词聚焦：当前词清晰、其余模糊，四角括号框跟随焦点循环移动，强调「逐词扫读」。要逐词从模糊解析到清晰（不带焦点框、不循环）用 BlurText；要随滚动进度显影用 ScrollReveal；普通标题用 Heading。
导入
ts
import { TrueFocus } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| sentence | string | "True Focus" | 整句文本，按 separator 切词后逐词聚焦 |
| separator | string | " " | 切词分隔符（传给 String.prototype.split） |
| blurAmount | number | 5 | 失焦词的模糊半径（px） |
| borderColor | string | "var(--color-chart-1)" | 四角括号描边色（CSS color，建议吃 token），须带 --color- 前缀或合法 CSS 颜色 |
| animationDuration | number | 1.2 | 单次对焦切换的动画 / 停留秒数 |
| pauseBetweenAnimations | number | 0.6 | 自动模式下两次切换之间的停顿（秒） |
| manualMode | boolean | false | 为 true 时不自动轮播，改由鼠标悬停某词来对焦 |
其余 <div> 原生属性透传。
禁忌 / 坑
- 角框靠测量各词 rect 定位：父容器需给足布局空间（建议固定高度容器），避免换行/挤压让框错位。
borderColor须带--color-前缀或合法 CSS 颜色；裸var(--primary)在本 Tailwind v4 设定下不解析。- 尊重
prefers-reduced-motion：开启减弱动效时全词清晰、不循环聚焦。
相关
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
瑚琏真实焦点效果
<TrueFocus
sentence="瑚琏 真实 焦点 效果"
blurAmount={5}
manualMode={false}
animationDuration={1.2}
/>