Scramble Text
亂碼快速輪轉、由左至右逐字定型的解密文字動畫，支援視口與 hover 觸發。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.05
<ScrambleText />
安裝
npx shadcn@latest add https://webberui.com/r/scramble-text.json或在 components.json 設定 registries 後，改用 @webberui/scramble-text 安裝。
安裝依賴後，從 registry JSON（/r/scramble-text.json 的 files[0].content）複製 scramble-text.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { ScrambleText } from "@/components/ui/scramble-text";
<ScrambleText
text="WEBBERUI DECRYPTED"
className="font-mono text-4xl font-bold"
/>hover 重播模式，中英混合也沒問題：
<ScrambleText text="Hover 我：解密動畫" trigger="hover" duration={0.04} />自訂亂碼字元集（例如駭客風的 0 和 1）：
<ScrambleText text="BINARY MODE" charset="01" className="font-mono" />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
text | string | — | 目標文字，中文與 emoji 皆可 |
duration | number | 0.05 | 每個字元定型的間隔（秒），越小解密越快 |
charset | string | 英數＋符號 | 亂碼輪轉使用的字元集 |
trigger | "view" | "hover" | "view" | 進入視口自動播放，或滑鼠懸停時重播 |
once | boolean | true | trigger="view" 時，只在第一次進入視口播放 |
細節
- 核心是單一
requestAnimationFrame迴圈：依經過時間計算已定型的字元數（由左至右每duration秒多鎖定一個），未定型位置每 2 幀從charset抽一個新亂碼，避免逐幀閃爍太刺眼。動畫直接寫入 DOM 文字節點，不觸發 React re-render；unmount 或重播時都會取消前一個 rAF - 以
Intl.Segmenter做字素切割，中文、emoji、組合字都算一個單位；定型時直接鎖定原始字元，所以中文目標文字一樣正常運作，亂碼輪轉則一律使用charset - 空白字元不參與亂碼，行寬與斷行在動畫過程中保持穩定
- 字寬抖動：亂碼輪轉時各字元寬度不同，畫面會左右跳動。建議搭配
font-mono（等寬字型），或至少在數字為主的場景加上tabular-nums；目標文字含中文時，中英字寬差異讓抖動更明顯，等寬字型效果最好 - 可及性：完整文字放在
sr-only，動畫層標記aria-hidden，螢幕閱讀器永遠讀到完整句子而不是亂碼；使用者系統開啟「減少動態效果」時直接顯示最終文字，不播動畫 once={false}搭配trigger="view"時，離開視口再進入會重播；trigger="hover"則是靜態顯示文字，每次滑鼠移入都重新解密一次