Lanyard Badge
A badge dangling from a lanyard with real rope physics — grab it, throw it, and it swings on a verlet-simulated strap until it settles.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/lanyard-badge.json▸ Or install manually
- Copy the source from the Code tab above.
- Place it at
components/mellow/lanyard-badge.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | — | Badge face content — fills the card. |
| height | number | 430 | Container height in px. |
| strapLength | number | 185 | Strap rest length in px, anchor to clip. |
| cardWidth | number | 240 | Card width in px. |
| cardHeight | number | 150 | Card height in px. |
| gravity | number | 2600 | Downward pull in px/s² — higher swings snappier. |
| className | string | — | Additional CSS classes. |