3d Marquee
3D 傾斜網格跑馬展示牆，多欄交錯無限捲動。
以 CSS 3D transform 打造的傾斜展示牆：磁磚分成多欄、交替上下無限捲動，只用漸層即可呈現，不需任何外部圖片。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
4
40
150
200
<3dMarquee />
安裝
npx shadcn@latest add https://webberui.com/r/3d-marquee.json或在 components.json 設定 registries 後，改用 @webberui/3d-marquee 安裝。
安裝依賴後，從 registry JSON（/r/3d-marquee.json 的 files[0].content）複製 3d-marquee.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
放進一個有明確高度的有界容器即可，元件會自動填滿並保持 3D 傾斜。
import { ThreeDMarquee } from "@/components/ui/3d-marquee";
<div className="relative h-[340px] w-full overflow-hidden rounded-xl">
<ThreeDMarquee />
</div>自訂磁磚內容（傳入任意 CSS background 字串）：
<ThreeDMarquee
tiles={[
"linear-gradient(135deg, #6366f1, #8b5cf6)",
"linear-gradient(135deg, #06b6d4, #3b82f6)",
"#f43f5e",
]}
columns={5}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
tiles | string[] | 內建漸層組 | 每塊磁磚的 CSS background（漸層或純色） |
columns | number | 4 | 欄數，決定畫面密度 |
speed | number | 40 | 單欄捲動一輪的基準秒數，越大越慢 |
tileHeight | number | 150 | 單塊磁磚高度（px） |
columnWidth | number | 200 | 單欄寬度（px） |
className | string | — | 透傳到根容器 |
可及性
- 使用者系統開啟「減少動態效果」時，捲動會凍結為靜態的傾斜牆
- 整個裝飾層帶
aria-hidden，不干擾輔助科技朗讀 - 元件以
--wb-marquee-durationCSS 變數暴露節奏，方便外部覆寫