文字動畫
True Focus Text
逐詞在模糊與清晰之間循環聚焦，並以動態外框標示焦點。
逐詞循環聚焦：焦點詞清晰、其餘模糊，四角外框會平滑地移動到當前的詞；也支援 manualMode 改由滑鼠 hover 控制。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add true-focus-textPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
5
0.5
1
編輯中的呼叫預設屬性
<TrueFocusText/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/true-focus-text.json或在 components.json 設定 registries 後，改用 @webberui/true-focus-text 安裝。
使用
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