卡片與網格
3d Marquee
3D 傾斜網格跑馬展示牆，多欄交錯無限捲動。
以 CSS 3D transform 打造的傾斜展示牆：磁磚分成多欄、交替上下無限捲動，只用漸層即可呈現，不需任何外部圖片。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add "https://webberui.com/r/3d-marquee.json?t=<安裝 token>"Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
4
40
150
200
編輯中的呼叫預設屬性
<ThreeDMarquee/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add "https://webberui.com/r/3d-marquee.json?t=<安裝 token>"或在 components.json 設定 registries 後，改用 @webberui/3d-marquee 安裝。
使用
放進一個有明確高度的有界容器即可，元件會自動填滿並保持 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 變數暴露節奏，方便外部覆寫