Card Swap
卡片以佈局動畫互換位置與堆疊，前排卡片沿弧線繞回最後方，形成會呼吸的 3D 牌堆。
一疊帶 3D 透視的卡片，前排卡片會沿弧線落下再繞回最後方，其餘卡片同步遞補向前，形成連續循環的堆疊互換效果。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
2800
44
44
0
4
<CardSwap />
安裝
npx shadcn@latest add https://webberui.com/r/card-swap.json或在 components.json 設定 registries 後，改用 @webberui/card-swap 安裝。
安裝依賴後，從 registry JSON（/r/card-swap.json 的 files[0].content）複製 card-swap.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge lucide-react使用
每個直接子節點就是一張卡片，元件會自動堆疊並輪播。
import { CardSwap } from "@/components/ui/card-swap";
<CardSwap interval={2800}>
<div className="p-6">第一張</div>
<div className="p-6">第二張</div>
<div className="p-6">第三張</div>
</CardSwap>把 interval 設為 0 可關閉自動輪播，只保留點擊互換（clickToSwap）。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
children | React.ReactNode | — | 每個直接子節點是一張卡，建議 2–6 張 |
interval | number | 2800 | 自動輪播間隔（毫秒），設 0 關閉 |
offsetX | number | 44 | 每往後一層的水平位移（px） |
offsetY | number | 44 | 每往後一層的垂直位移（px） |
scaleStep | number | 0.07 | 每往後一層縮小的比例 |
depthStep | number | 60 | 每往後一層在 Z 軸後退的距離（px） |
rotateStep | number | 0 | 每往後一層附加的旋轉角度（deg） |
maxVisible | number | 4 | 最多同時可見的層數，超出的卡片淡出 |
direction | "up" | "down" | "up" | 堆疊生長方向 |
perspective | number | 1200 | 3D 透視距離（px），越小透視越強 |
pauseOnHover | boolean | true | 滑鼠移入時暫停輪播 |
clickToSwap | boolean | true | 點擊卡片即前進到下一張 |
cardClassName | string | — | 套用到每張卡片外框的樣式（含尺寸） |
可及性
- 使用者系統開啟「減少動態效果」時，停止自動輪播並靜態呈現整疊卡片
- 隨機無關、以 mounted 兩段式渲染避免 SSR hydration 不一致
- 動畫僅使用 CSS 3D transform，離開元件時清除計時器