磁鐵詩牆
冰箱磁鐵字卡可自由拖曳排列組句，微旋轉與吸附感。
白色磁鐵字卡帶微隨機旋轉與紙質陰影，散佈在髮絲紋冰箱門板上，可自由拖曳排列組句。拖起時字卡放大、陰影加深並浮到最上層；放開時以低阻尼 spring 輕微搖擺，模擬磁鐵「啪」一下吸附回門面的手感。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
300
7
7
<MagneticFridgePoetry />
安裝
npx shadcn@latest add https://webberui.com/r/magnetic-fridge-poetry.json或在 components.json 設定 registries 後，改用 @webberui/magnetic-fridge-poetry 安裝。
安裝依賴後，從 registry JSON（/r/magnetic-fridge-poetry.json 的 files[0].content）複製 magnetic-fridge-poetry.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { MagneticFridgePoetry } from "@/components/ui/magnetic-fridge-poetry";
<MagneticFridgePoetry
words={["月光", "在", "屋頂", "輕輕", "融化"]}
onArrange={(items) => console.log(items)}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
words | string[] | — | 磁鐵字卡的詞語清單 |
onArrange | (items: FridgeArrangement[]) => void | — | 任一字卡拖放或鍵盤移動完成時回呼；每項含 word、index 與字卡中心相對板面的 x/y（0～1） |
height | number | 380 | 板面高度（px） |
seed | number | 7 | 初始散佈的亂數種子，改變可得到另一種排列 |
maxTilt | number | 7 | 字卡最大隨機旋轉角度（度） |
className | string | — | 透傳到板面容器 |
可及性
- 每張字卡可鍵盤聚焦（
Tab），以方向鍵微調位置、Shift+ 方向鍵大步移動，位移會自動夾在板面範圍內 - 板面為
role="list"、字卡為role="listitem"，並以aria-label朗讀「磁鐵字卡」語意與操作提示 - 使用者系統開啟「減少動態效果」時，拖放僅即時跟隨，不播放搖擺與回彈動畫
- 字卡套用
touch-none，觸控拖曳不會誤觸頁面捲動 - 初始散佈使用種子偽隨機數，SSR 與客戶端渲染結果一致，不會產生水合閃動