交疊拼貼版面
元素互相交疊的雜誌拼貼構圖，hover 各自浮起。
以 CSS grid 讓圖塊、文字卡、籤條與徽章的欄列區間互相重疊，構成雜誌拼貼式版面；進場時各單元依序 stagger 浮現，hover 時單元以 spring 浮起、拉正並提升 z-index，像被從桌面拿起端詳。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.1
12
<OverlapCollageLayout />
安裝
npx shadcn@latest add https://webberui.com/r/overlap-collage-layout.json或在 components.json 設定 registries 後，改用 @webberui/overlap-collage-layout 安裝。
安裝依賴後，從 registry JSON（/r/overlap-collage-layout.json 的 files[0].content）複製 overlap-collage-layout.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import {
OverlapCollageLayout,
OverlapCollageItem,
} from "@/components/ui/overlap-collage-layout";
<OverlapCollageLayout columns={12} rows={10} className="h-[420px]">
<OverlapCollageItem column="1 / 9" row="2 / 9" rotate={-2}>
<div className="h-full rounded-2xl bg-gradient-to-br from-sky-400 to-teal-600" />
</OverlapCollageItem>
<OverlapCollageItem column="6 / 13" row="6 / 11" rotate={2} zIndex={2}>
<div className="h-full rounded-xl border bg-white p-5">文字卡內容</div>
</OverlapCollageItem>
</OverlapCollageLayout>Props
OverlapCollageLayout
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
columns | number | 12 | 版面網格的欄數，子項以 gridColumn 區間定位 |
rows | number | 10 | 版面網格的列數，子項以 gridRow 區間定位 |
stagger | number | 0.1 | 進場 stagger 間隔（秒），子項依 DOM 順序浮現 |
liftAmount | number | 12 | hover 時單元向上浮起的距離（px） |
straightenOnHover | boolean | true | hover 時是否將單元的旋轉角度拉正 |
className | string | — | 透傳 class，建議在此指定整體高度或長寬比 |
children | React.ReactNode | — | 拼貼內容，放入多個 OverlapCollageItem |
OverlapCollageItem
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
column | string | — | gridColumn 定位字串（如 "1 / 9"），區間重疊即交疊 |
row | string | — | gridRow 定位字串（如 "2 / 9"） |
rotate | number | 0 | 靜止時的旋轉角度（度），營造拼貼隨性感 |
zIndex | number | 1 | 靜止時的堆疊層級，hover 或聚焦時自動提升 |
className | string | — | 透傳 class，合併到單元外層 |
children | React.ReactNode | — | 單元內容：圖塊、文字卡、籤條、徽章等 |
可及性
- 使用者系統開啟「減少動態效果」時，進場僅淡入不位移縮放，hover 也不再浮起放大
- 單元內的可聚焦元素（連結、按鈕）獲得鍵盤焦點時，該單元自動提升 z-index，確保交疊下仍完整可見
- 拼貼僅影響視覺定位，內容維持原本 DOM 順序，螢幕閱讀器依序朗讀不受交疊影響
- 進場動畫透過
viewport once只播放一次，不會反覆干擾閱讀