Retro Grid
合成波風格透視捲動的復古網格背景。
以純 CSS 3D transform 打造合成波（synthwave）風格的透視地平線網格，無限捲動、支援亮暗色與減少動態效果。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
65
60
12
0.5
<RetroGrid />
安裝
npx shadcn@latest add https://webberui.com/r/retro-grid.json或在 components.json 設定 registries 後，改用 @webberui/retro-grid 安裝。
安裝依賴後，從 registry JSON（/r/retro-grid.json 的 files[0].content）複製 retro-grid.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { RetroGrid } from "@/components/ui/retro-grid";
<RetroGrid className="flex h-[340px] items-center justify-center rounded-xl">
<span className="text-5xl font-bold">Retro Grid</span>
</RetroGrid>元件本身是相對定位的有界容器，網格鋪滿背景、children 疊在其上。請透過 className 指定高度與佈局，避免使用 100vh 類的視口高度單位。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
angle | number | 65 | 網格傾斜的透視角度（度），越大越貼近地平面 |
cellSize | number | 60 | 單一格子邊長（px） |
speed | number | 12 | 捲動一輪的秒數，越小越快 |
opacity | number | 0.5 | 網格線與整體不透明度（0 ~ 1） |
lightLineColor | string | "#6b7280" | 亮色模式下的網格線顏色 |
darkLineColor | string | "#9ca3af" | 暗色模式下的網格線顏色 |
children | ReactNode | — | 疊在網格之上的前景內容 |
可及性
- 使用者系統開啟「減少動態效果」時，網格靜止不捲動，仍保留透視背景
- 網格層帶
aria-hidden且pointer-events-none，不影響輔助科技與互動