卡片與網格
Lanyard Badge
3D 慣性擺盪的識別證吊牌，可拖曳、放開後如單擺自然收斂。
一張掛在吊帶上的識別證，抓住卡片拖曳、放開時會帶著慣性擺盪並逐漸靜止，卡片同時在 Y 軸輕轉呈現 3D 面向感。純 CSS 3D transform 與單擺物理模擬，不依賴 WebGL。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add "https://webberui.com/r/lanyard-badge.json?t=<安裝 token>"Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.24
0.7
編輯中的呼叫預設屬性
<LanyardBadge/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add "https://webberui.com/r/lanyard-badge.json?t=<安裝 token>"或在 components.json 設定 registries 後，改用 @webberui/lanyard-badge 安裝。
使用
import { LanyardBadge } from "@/components/ui/lanyard-badge";
<LanyardBadge
name="Ada Lovelace"
role="Principal Engineer"
company="WEBBER LABS"
accent="#6366f1"
/>;元件會自足撐開一塊有界區域（min-h-[420px]），把它放進你自己的框裡即可；不要用滿版高度包住它。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
name | string | "Ada Lovelace" | 持證人姓名，同時作為無障礙標籤 |
role | string | "Principal Engineer" | 職稱／副標 |
company | string | "WEBBER LABS" | 卡片頂部機構名稱 |
accent | string | "#6366f1" | 主題色，套用於吊帶、色帶、頭像與光澤 |
strapLabel | string | "WEBBER · UI ·" | 吊帶上重複印刷的標語 |
initialSwing | number | 0.24 | 進場初始擺角（弧度），會自然擺盪後靜止 |
damping | number | 0.7 | 阻尼係數，越小擺盪越久（建議 0.4 ~ 1.2） |
className | string | — | 透傳至最外層容器 |
可及性
- 使用者系統開啟「減少動態效果」時，吊牌直接垂直靜止，不啟動物理迴圈與拖曳
- 卡片帶
role="img"與aria-label，朗讀時回報姓名與職稱 - 掛載後才切換 reduced-motion 靜態版，避免 SSR hydration mismatch