Pixel Reveal Card
以像素溶解揭示內容的卡片
覆蓋在卡片內容上的彩色像素會依指定順序逐格淡出，像馬賽克被風吹散一樣揭示底下的內容。支援懸停與進入視口兩種觸發方式，整個效果以 2D canvas 繪製，效能穩定。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
16
0.9
<PixelRevealCard />
安裝
npx shadcn@latest add https://webberui.com/r/pixel-reveal-card.json或在 components.json 設定 registries 後，改用 @webberui/pixel-reveal-card 安裝。
安裝依賴後，從 registry JSON（/r/pixel-reveal-card.json 的 files[0].content）複製 pixel-reveal-card.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { PixelRevealCard } from "@/components/ui/pixel-reveal-card";
<PixelRevealCard trigger="hover" pixelSize={14} className="h-[300px] w-[260px]">
<div className="flex h-full w-full flex-col justify-end bg-gradient-to-br from-indigo-500 to-fuchsia-500 p-5 text-white">
<h3 className="text-xl font-semibold">Nebula Pass</h3>
<p className="mt-1 text-sm text-white/80">Hover to reveal.</p>
</div>
</PixelRevealCard>卡片內容照常寫在 children，覆蓋期間內容仍在 DOM 中，可被輔助科技讀取。容器預設沒有高度，請透過 className 給定明確尺寸（例如 h-[300px] w-[260px]）。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
children | React.ReactNode | — | 要被揭示的卡片內容 |
trigger | "hover" | "view" | "hover" | 觸發方式：懸停切換或進入視口自動揭示 |
pixelSize | number | 16 | 單一像素邊長（px），越小顆粒越細 |
colors | string[] | 靛紫洋紅四色 | 覆蓋層配色，逐格隨機取用形成馬賽克 |
direction | "random" | "left" | "right" | "top" | "bottom" | "diagonal" | "random" | 像素溶解的排序方向 |
duration | number | 0.9 | 完整溶解或回填所需時間（秒） |
once | boolean | true | trigger="view" 時是否只揭示一次 |
className | string | — | 透傳到最外層容器，用來給定尺寸與樣式 |
可及性
- 使用者系統開啟「減少動態效果」時，直接顯示內容、不繪製像素覆蓋層
- 覆蓋期間內容仍在 DOM，
canvas覆蓋層標記aria-hidden，不影響輔助科技朗讀 hover模式的卡片可被鍵盤聚焦（focus即揭示、blur即回填）