Interactive Box Grid
hover 逐格高亮的滿版方格背景，游標經過的格子點亮並留下漸隱餘光。
滿版的方格背景，游標移過時逐格點亮，並以 canvas 繪製漸隱的餘光軌跡。可放前景內容當作 hero 或 section 底圖。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
48
0.92
<InteractiveBoxGrid />
安裝
npx shadcn@latest add https://webberui.com/r/interactive-box-grid.json或在 components.json 設定 registries 後，改用 @webberui/interactive-box-grid 安裝。
安裝依賴後，從 registry JSON（/r/interactive-box-grid.json 的 files[0].content）複製 interactive-box-grid.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { InteractiveBoxGrid } from "@/components/ui/interactive-box-grid";
<InteractiveBoxGrid className="h-[340px] w-full rounded-xl">
<div className="flex h-full items-center justify-center">
<h2 className="text-3xl font-bold">Hover me</h2>
</div>
</InteractiveBoxGrid>前景內容作為 children 疊在方格之上；容器需自帶明確高度（如 h-[340px]），避免使用 viewport 高度單位。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
cellSize | number | 48 | 每格邊長（px），決定方格密度 |
colors | string[] | 青／靛／紫／翠／琥珀 | 高亮配色池，每格點亮時取其一 |
lineColor | string | undefined | 格線顏色；未指定時隨主題切換 |
fade | number | 0.92 | 每幀餘光衰減係數（0~1，越大殘留越久） |
children | ReactNode | undefined | 疊在方格之上的前景內容 |
className | string | undefined | 透傳至外層容器 |
可及性
- 使用者系統開啟「減少動態效果」時，只渲染靜態格線、不啟動動畫與互動
- canvas 標記
aria-hidden，且pointer-events-none，不干擾前景內容的互動 - 高亮僅由滑鼠 hover 觸發（
pointerType為mouse），觸控裝置不作用