Lanyard Badge
3D 慣性擺盪的識別證吊牌，可拖曳、放開後如單擺自然收斂。
一張掛在吊帶上的識別證，抓住卡片拖曳、放開時會帶著慣性擺盪並逐漸靜止，卡片同時在 Y 軸輕轉呈現 3D 面向感。純 CSS 3D transform 與單擺物理模擬，不依賴 WebGL。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.24
0.7
<LanyardBadge />
安裝
npx shadcn@latest add https://webberui.com/r/lanyard-badge.json或在 components.json 設定 registries 後，改用 @webberui/lanyard-badge 安裝。
安裝依賴後，從 registry JSON（/r/lanyard-badge.json 的 files[0].content）複製 lanyard-badge.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
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