Matrix Letter Glitch
矩陣式下落字元故障流背景，純 Canvas 2D 繪製的暗底亮字雨幕。
經典「矩陣雨」背景：一欄欄字元由上而下掉落，前緣字元帶光暈、尾巴逐格淡出，並不時出現水平故障撕裂。純 Canvas 2D 近似，無需 WebGL。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
16
1
1
<MatrixLetterGlitch />
安裝
npx shadcn@latest add https://webberui.com/r/matrix-letter-glitch.json或在 components.json 設定 registries 後，改用 @webberui/matrix-letter-glitch 安裝。
安裝依賴後，從 registry JSON（/r/matrix-letter-glitch.json 的 files[0].content）複製 matrix-letter-glitch.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
把它當作有界容器的背景，前景內容以 children 疊在雨幕之上。容器需要明確高度（例如 h-[340px]），避免使用 viewport 高度單位：
import { MatrixLetterGlitch } from "@/components/ui/matrix-letter-glitch";
<div className="relative h-[340px] w-full overflow-hidden rounded-xl">
<MatrixLetterGlitch>
<div className="relative z-10 flex h-full items-center justify-center">
<h3 className="text-4xl font-bold text-white">Wake up, Neo.</h3>
</div>
</MatrixLetterGlitch>
</div>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
color | string | "#22c55e" | 尾巴主色 |
headColor | string | "#d6ffe4" | 頭部前緣字元顏色（帶光暈） |
background | string | "#050a07" | 容器底色 |
fontSize | number | 16 | 字級（px），同時決定字元格與欄距 |
speed | number | 1 | 掉落速度倍率 |
characters | string | 片假名+數字 | 使用的字元集字串 |
glitch | boolean | true | 是否啟用故障橫切撕裂 |
glitchIntensity | number | 1 | 故障觸發頻率倍率，越大越頻繁 |
speed 小於 1 時掉落更緩慢，大於 1 時更急促。
可及性
- 使用者系統開啟「減少動態效果」時，只繪製一幀靜態雨幕，不啟動動畫迴圈也不觸發故障
- Canvas 標記
aria-hidden，純裝飾不干擾輔助科技；前景children照常朗讀