Grain Overlay
canvas 逐幀閃爍的噪點顆粒疊層，提供 fine／coarse／vintage 三款質感，替漸層與圖片補上底片般的雜訊。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.22
1
0.55
24
<GrainOverlay />
安裝
npx shadcn@latest add https://webberui.com/r/grain-overlay.json或在 components.json 設定 registries 後，改用 @webberui/grain-overlay 安裝。
安裝依賴後，從 registry JSON（/r/grain-overlay.json 的 files[0].content）複製 grain-overlay.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
GrainOverlay 是一層絕對定位的疊層，放進任何 relative 容器即可覆蓋整塊背景。若容器加上 isolate，混合模式只會作用於容器內部、不透到頁面背後。
import { GrainOverlay } from "@/components/ui/grain-overlay";
<div className="relative isolate overflow-hidden rounded-xl bg-gradient-to-br from-indigo-500 to-pink-500">
<GrainOverlay variant="coarse" />
{/* 你的內容 */}
</div>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
variant | "fine" | "coarse" | "vintage" | "fine" | 顆粒質感預設，未覆蓋的參數沿用此款 |
intensity | number | 依 variant | 疊層整體不透明度（0–1） |
grainSize | number | 依 variant | 單顆顆粒邊長（CSS px，整數） |
contrast | number | 依 variant | 噪點對比（0–1），每顆亮暗的振幅 |
blendMode | GrainBlendMode | 依 variant | 混合模式（overlay／soft-light 等） |
fps | number | 依 variant | 閃爍更新頻率（1–60） |
animated | boolean | true | 是否逐幀閃爍；false 時為靜態單張 |
frameCount | number | 8 | 預先產生並循環的噪點張數（1–24） |
三款 variant 的預設值：fine（grainSize 1、細緻低調）、coarse（grainSize 3、對比高、粗獷）、vintage（soft-light 柔光、慢速閃爍，仿老膠卷）。任一數值 prop 顯式傳入時即覆蓋該款預設。
細節
- 噪點以 canvas 逐幀繪製：預先產生
frameCount張獨立的低解析灰階雜訊，每幀依fps節流隨機挑一張放大填滿，形成真實的底片閃爍。 - 顆粒亮度以中灰（128）為中心、
contrast決定振幅；搭配overlay混合模式時，中灰不改變底色，只疊加明暗顆粒。 grainSize以 CSS 像素計，透過關閉影像平滑（方塊放大）維持顆粒銳利，並在高 DPR 螢幕上保持一致的顆粒大小。- 調整
intensity與blendMode屬純樣式變更，不會重建噪點；grainSize、contrast、fps等改動才會重新產生張數。 - 以
ResizeObserver監看容器尺寸，重建噪點採去抖處理；rAF、計時器與 Observer 於卸載時全數清理。
可及性
- 疊層帶
aria-hidden且pointer-events-none，純裝飾、不干擾輔助科技與底層互動。 - 使用者系統開啟「減少動態效果」時，自動停止逐幀閃爍、改渲染單張靜態噪點。