拍立得散落網格
隨機旋轉散落的拍立得相片牆，hover 拉正並浮起。
以 index 種子偽隨機散落的拍立得相片牆：每張相片帶白框、半透明膠帶、漸層假照片與手寫風標題，hover 時旋轉歸零、放大浮起並提升層級，適合回憶相簿、作品集或活動花絮區塊。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
1
<PolaroidScatterGrid />
安裝
npx shadcn@latest add https://webberui.com/r/polaroid-scatter-grid.json或在 components.json 設定 registries 後，改用 @webberui/polaroid-scatter-grid 安裝。
安裝依賴後，從 registry JSON（/r/polaroid-scatter-grid.json 的 files[0].content）複製 polaroid-scatter-grid.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { PolaroidScatterGrid } from "@/components/ui/polaroid-scatter-grid";
<PolaroidScatterGrid
columns={3}
items={[
{ title: "墾丁的浪", note: "2025.07.12", hue: 205 },
{ title: "山頂看日出", note: "合歡山主峰", hue: 25 },
{ title: "夜市燈火", hue: 285 },
]}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
items | PolaroidItem[] | — | 拍立得相片資料清單 |
scatter | number | 1 | 散落強度（0–1），越大旋轉與偏移越明顯 |
columns | 2 | 3 | 4 | 3 | sm 斷點以上的網格欄數，小螢幕固定 2 欄 |
className | string | — | 透傳到最外層網格容器 |
PolaroidItem 欄位：
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
title | string | — | 相片底部的手寫風標題 |
hue | number | — | 假照片漸層的主色相（0–360） |
note | string | — | 選填小註記（日期、地點），顯示於標題下方 |
可及性
- 使用者系統開啟「減少動態效果」時，停用進場落下與 hover 拉正動畫，直接呈現靜態散落版面
- 每張相片以
figure/figcaption語意標記，標題與註記為真實文字，輔助科技可完整朗讀 - 裝飾性圖層（膠帶、光點、山稜線、光澤）皆標記
aria-hidden，不干擾朗讀順序 - 散落角度與偏移以 index 種子偽隨機計算，伺服器與客戶端渲染結果一致，無版面跳動