文字動畫
故障文字
RGB 分離與抖動的故障（glitch）文字效果，支援持續播放與滑入觸發。
以 RGB 通道分離、掃描線切片與抖動模擬經典賽博龐克故障文字，純 CSS 動畫、無需字型或外部資源。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add glitch-textPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
2.2
3
編輯中的呼叫預設屬性
<GlitchText/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/glitch-text.json或在 components.json 設定 registries 後，改用 @webberui/glitch-text 安裝。
使用
import { GlitchText } from "@/components/ui/glitch-text";
<GlitchText text="SYSTEM FAILURE" className="text-5xl font-bold" />滑入才故障：
<GlitchText text="hover to glitch" trigger="hover" intensity={2} />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
text | string | — | 要顯示的文字 |
trigger | "always" | "hover" | "always" | 持續故障或僅滑入時故障 |
speed | number | 2.2 | 主故障週期（秒），越小越急促 |
intensity | number | 3 | RGB 通道水平分離幅度（px） |
colorBefore | string | "#ff2d75" | 紅色通道殘影顏色 |
colorAfter | string | "#00e5ff" | 青色通道殘影顏色 |
as | "span" | "p" | "h1"–"h6" | "span" | 渲染的 HTML 標籤 |
className | string | — | 透傳至外層元素 |
可及性
- 使用者系統開啟「減少動態效果」時，直接渲染靜態文字，不套用任何抖動或殘影
- RGB 殘影疊層以
::before/::after產生並標記pointer-events: none，不影響選取與朗讀 - 每個實例以
useId()產生獨立的 keyframes 與類名，多個並存不互相干擾