Warp Background
卡片式時空扭曲網格背景，四面光束朝隧道深處奔流。
以 CSS 3D 透視把四面網格牆折成隧道，光束沿牆面向深處飛行，營造 warp speed 效果。純 CSS transform 與 keyframes，無任何 WebGL 相依。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
100
3
5
3
210
<WarpBackground />
安裝
npx shadcn@latest add https://webberui.com/r/warp-background.json或在 components.json 設定 registries 後，改用 @webberui/warp-background 安裝。
安裝依賴後，從 registry JSON（/r/warp-background.json 的 files[0].content）複製 warp-background.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { WarpBackground } from "@/components/ui/warp-background";
<WarpBackground className="p-10">
<h3 className="text-2xl font-semibold">穿越時空扭曲</h3>
</WarpBackground>容器需要明確尺寸：用 className 給定高度與內距（例如 h-[320px] max-w-md p-10），前景內容置中的佈局也寫在 className。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
perspective | number | 100 | 透視強度（px），越小扭曲越劇烈 |
beamsPerSide | number | 3 | 每一面同時飛行的光束數 |
beamSize | number | 5 | 網格格子與光束寬度（佔容器 %） |
beamDelayMin | number | 0 | 光束延遲最小值（秒） |
beamDelayMax | number | 3 | 光束延遲最大值（秒） |
beamDuration | number | 3 | 單束飛完全程秒數 |
gridColor | string | rgba(128,128,140,0.28) | 網格線顏色 |
beamHue | number | — | 固定色相（0~360）；不給則每束隨機取色 |
children | ReactNode | — | 疊在網格上的前景內容 |
className | string | — | 透傳到容器；在此指定尺寸與內距 |
可及性
- 使用者系統開啟「減少動態效果」時，只保留靜態透視網格，光束不飛行
- 背景層帶
aria-hidden且pointer-events-none，不干擾前景互動與朗讀 - 光束使用亂數色相，故僅在客戶端掛載後渲染，避免 SSR hydration 不一致