文字動畫
Split Text Reveal
逐字/逐詞 stagger 進場的文字動畫，支援模糊揭示與視口觸發。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add split-textPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.03
0.6
16
編輯中的呼叫預設屬性
<SplitText/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/split-text.json或在 components.json 設定 registries 後，改用 @webberui/split-text 安裝。
使用
import { SplitText } from "@/components/ui/split-text";
<SplitText text="Animate everything." className="text-4xl font-bold" />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
text | string | — | 要動畫的文字 |
by | "char" | "word" | "char" | 拆分單位 |
delay | number | 0 | 進場前延遲（秒） |
stagger | number | 0.03（tracking 為 0.12） | 每單位間隔（秒）；tracking 模式為每行間隔 |
duration | number | 0.6 | 單一單位動畫時長（秒） |
y | number | 16 | 初始垂直位移（px） |
blur | boolean | true | 進場時是否附帶模糊 |
once | boolean | true | 只在第一次進入視口時播放 |
immediate | boolean | false | 首屏模式：文字一開始就不透明，進場只動位移（與模糊），改用 animate 直接播放 |
mode | "reveal" | "tracking" | "reveal" | 動畫模式；"tracking" 逐行翻入並展開字距 |
trackingFrom | string | "-0.2em" | tracking 模式的起始字距，展開到 0 |
字距展開（tracking 模式）
mode="tracking" 把文字依換行（\n）拆成多行，每行從遮罩下方翻上來（y 100% → 0、透明度 0 → 1），同時字距從 trackingFrom 展開到 0。行與行的間隔仍由 stagger 控制，未傳時預設 0.12 秒；by、y、blur 在這個模式不作用。
<SplitText
mode="tracking"
text={"Less noise.\nMore signal."}
stagger={0.15}
className="text-4xl font-semibold"
/>可及性
- 使用者系統開啟「減少動態效果」時，直接渲染靜態文字；tracking 模式同樣直接顯示並保留換行
- 容器帶
aria-label，拆分後的單位對輔助科技隱藏（aria-hidden），朗讀時是完整句子