True Focus Text
逐詞在模糊與清晰之間循環聚焦，並以動態外框標示焦點。
逐詞循環聚焦：焦點詞清晰、其餘模糊，四角外框會平滑地移動到當前的詞；也支援 manualMode 改由滑鼠 hover 控制。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
5
0.5
1
<TrueFocusText />
安裝
npx shadcn@latest add https://webberui.com/r/true-focus-text.json或在 components.json 設定 registries 後，改用 @webberui/true-focus-text 安裝。
安裝依賴後，從 registry JSON（/r/true-focus-text.json 的 files[0].content）複製 true-focus-text.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { TrueFocusText } from "@/components/ui/true-focus-text";
<TrueFocusText
sentence="Focus Sharpens Everything"
borderColor="#22d3ee"
glowColor="rgba(34, 211, 238, 0.55)"
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
sentence | string | "True Focus Text" | 要循環聚焦的句子，以空白拆詞 |
blurAmount | number | 5 | 未聚焦詞的模糊強度（px） |
borderColor | string | "#22d3ee" | 聚焦外框四角的顏色 |
glowColor | string | "rgba(34, 211, 238, 0.55)" | 四角的光暈顏色 |
animationDuration | number | 0.5 | 外框位移／模糊切換的動畫時長（秒） |
pauseBetweenAnimations | number | 1 | 每個詞停留在聚焦的時間（秒） |
manualMode | boolean | false | 改由滑鼠 hover 控制聚焦，不自動循環 |
可及性
- 使用者系統開啟「減少動態效果」時，直接渲染清晰、無外框的靜態句子
- 完整句子以
sr-only提供給輔助科技，拆分後的視覺詞與外框皆標記aria-hidden