故障文字

RGB 分離與抖動的故障（glitch）文字效果，支援持續播放與滑入觸發。

以 RGB 通道分離、掃描線切片與抖動模擬經典賽博龐克故障文字，純 CSS 動畫、無需字型或外部資源。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

顯示文字text

觸發方式trigger

故障週期（秒）speed

2.2

分離幅度（px）intensity

紅色通道殘影colorBefore

青色通道殘影colorAfter

<GlitchText />

npx shadcn@latest add https://webberui.com/r/glitch-text.json

或在 components.json 設定 registries 後，改用 @webberui/glitch-text 安裝。

安裝依賴後，從 registry JSON（/r/glitch-text.json 的 files[0].content）複製 glitch-text.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

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} />