Split Text Reveal
逐字/逐詞 stagger 進場的文字動畫，支援模糊揭示與視口觸發。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.03
0.6
16
<SplitText />
安裝
npx shadcn@latest add https://webberui.com/r/split-text.json或在 components.json 設定 registries 後，改用 @webberui/split-text 安裝。
安裝依賴後，從 registry JSON（/r/split-text.json 的 files[0].content）複製 split-text.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
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 | 每單位間隔（秒） |
duration | number | 0.6 | 單一單位動畫時長（秒） |
y | number | 16 | 初始垂直位移（px） |
blur | boolean | true | 進場時是否附帶模糊 |
once | boolean | true | 只在第一次進入視口時播放 |
可及性
- 使用者系統開啟「減少動態效果」時，直接渲染靜態文字
- 容器帶
aria-label，拆分後的單位對輔助科技隱藏（aria-hidden），朗讀時是完整句子