解密文字
亂碼字元快速跳動後逐一鎖定為真實文字，駭客風解密效果。
進入視窗時每個字元先快速跳動亂碼，再由左至右逐一鎖定為真實文字，鎖定前緣帶有閃爍游標，重現經典駭客電影的解密畫面；支援進入視窗、掛載、懸停三種觸發時機，可自訂字元集與隨時重播。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
50
35
<DecryptText />
安裝
npx shadcn@latest add https://webberui.com/r/decrypt-text.json或在 components.json 設定 registries 後，改用 @webberui/decrypt-text 安裝。
安裝依賴後，從 registry JSON（/r/decrypt-text.json 的 files[0].content）複製 decrypt-text.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { DecryptText } from "@/components/ui/decrypt-text";
<DecryptText text="ACCESS GRANTED — 驗證通過" />
// 懸停觸發 + 自訂亂碼字元集（CJK 文字用全形字元可避免寬度抖動）
<DecryptText
text="機密檔案已解鎖"
trigger="hover"
characters="機密檔案已解鎖加密金鑰核心資料"
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
text | string | — | 要解密顯示的完整文字 |
trigger | "inView" | "load" | "hover" | "inView" | 觸發時機：進入視窗、掛載後立即、懸停/聚焦 |
lockSpeed | number | 50 | 每個字元鎖定的間隔（毫秒），越小解密越快 |
scrambleSpeed | number | 35 | 亂碼跳動的更新間隔（毫秒） |
characters | string | 英數＋符號 | 亂碼字元集 |
once | boolean | true | trigger="inView" 時是否只播放一次 |
playKey | number | string | — | 變更此值即重新播放動畫 |
onComplete | () => void | — | 全部字元鎖定完成後的回呼 |
scrambleClassName | string | — | 未鎖定亂碼段的自訂樣式，覆蓋預設綠色 |
className | string | — | 透傳到外層容器，與預設 font-mono 合併 |
可及性
- 使用者系統開啟「減少動態效果」時，直接顯示完整文字，完全不播放亂碼動畫
- 完整文字以
sr-only提供給螢幕閱讀器，跳動中的亂碼與游標對輔助科技隱藏（aria-hidden），不會被逐字播報 trigger="hover"時元素可鍵盤聚焦（tabIndex=0），focus與滑鼠懸停同樣能觸發解密- 亂碼以 index-seeded 偽亂數產生，SSR 與水合輸出一致，不會造成內容跳動或警告