Dither Shader
復古有序抖動（dithering）噪點美學的動態背景。
以 Bayer 矩陣有序抖動把流動的 plasma 場量化成粗顆粒色階，重現復古螢幕的抖動噪點質感。全程 canvas 2D 繪製，無任何 WebGL 依賴。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
3
4
1
1
<DitherShader />
安裝
npx shadcn@latest add https://webberui.com/r/dither-shader.json或在 components.json 設定 registries 後，改用 @webberui/dither-shader 安裝。
安裝依賴後，從 registry JSON（/r/dither-shader.json 的 files[0].content）複製 dither-shader.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { DitherShader } from "@/components/ui/dither-shader";
<DitherShader interactive className="h-[320px] w-full rounded-xl">
<div className="grid h-full place-items-center text-white">Retro</div>
</DitherShader>levels 設為 2 可得到純雙色的經典抖動；調高 pixelSize 讓像素更粗獷。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
colorBack | string | "#0b1220" | 暗部顏色（圖樣低點） |
colorFront | string | "#38bdf8" | 亮部顏色（圖樣高點） |
pixelSize | number | 3 | 每個抖動像素的螢幕尺寸（px），越大越粗獷 |
levels | number | 4 | 量化色階數，2 為純雙色抖動 |
speed | number | 1 | 動畫速度倍率 |
scale | number | 1 | 圖樣頻率，越大波紋越密 |
interactive | boolean | false | 指標附近浮現亮環（僅滑鼠生效） |
className | string | — | 透傳至容器，用於設定尺寸與佈局 |
可及性
- 使用者系統開啟「減少動態效果」時，只繪製單一靜態畫格、不啟動動畫迴圈
- canvas 為純裝飾層，標記
aria-hidden，前景內容照常朗讀