Card Stack Scroll
滾動時卡片依序吸頂堆疊、逐層縮小退場的滾動效果。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
24
12
0.04
<CardStackScroll />
安裝
npx shadcn@latest add https://webberui.com/r/card-stack-scroll.json安裝依賴後，從 registry JSON（/r/card-stack-scroll.json 的 files[0].content）複製 card-stack-scroll.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
每個直接子元素會成為一張堆疊卡片：
import { CardStackScroll } from "@/components/ui/card-stack-scroll";
<CardStackScroll offsetTop={96}>
<div className="h-80 rounded-xl border bg-white p-8">第一張</div>
<div className="h-80 rounded-xl border bg-white p-8">第二張</div>
<div className="h-80 rounded-xl border bg-white p-8">第三張</div>
</CardStackScroll>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
children | ReactNode | — | 每個直接子元素成為一張卡片 |
offsetTop | number | 96 | 卡片吸頂位置（px） |
peek | number | 12 | 堆疊時每層向下錯開的距離（px） |
scaleStep | number | 0.04 | 疊入時每層縮小的比例 |
container | RefObject<HTMLElement> | — | 滾動發生在巢狀 overflow 容器內時，傳入該容器的 ref |
cardClassName | string | — | 套用到每張卡片外層 |
細節
- 以
useScroll+useTransform驅動，動畫跑在 transform 上，不觸發 layout - 使用者系統開啟「減少動態效果」時，退化為一般垂直列表
- 容器可以是頁面本身，也可以是任何
overflow-y: auto的區塊（如上方示範）