Lanyard Badge
An ID badge on a lanyard that swings in 3D with momentum — drag it, let go, and it settles naturally like a pendulum.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
An ID card hanging from a lanyard: grab the card, drag it, and on release it swings with momentum and gradually comes to rest, while the card also turns slightly around the Y axis for a sense of 3D facing. Pure CSS 3D transforms and a pendulum physics simulation, with no dependency on WebGL.
npx shadcn@latest add "https://webberui.com/r/lanyard-badge.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<LanyardBadge />
Installation
npx shadcn@latest add "https://webberui.com/r/lanyard-badge.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/lanyard-badge.
Usage
import { LanyardBadge } from "@/components/ui/lanyard-badge";
<LanyardBadge
name="Ada Lovelace"
role="Principal Engineer"
company="WEBBER LABS"
accent="#6366f1"
/>;The component holds open a bounded area on its own (min-h-[420px]), so just drop it inside your own frame; do not wrap it in a full-viewport height.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | "Ada Lovelace" | Name of the badge holder, which also serves as the accessible label |
role | string | "Principal Engineer" | Job title / subtitle |
company | string | "WEBBER LABS" | Organization name at the top of the card |
accent | string | "#6366f1" | Theme color, applied to the lanyard, the color band, the avatar, and the sheen |
strapLabel | string | "WEBBER · UI ·" | Slogan printed repeatedly along the lanyard |
initialSwing | number | 0.24 | Initial swing angle on reveal (radians); it swings naturally and then settles |
damping | number | 0.7 | Damping coefficient; lower values keep it swinging longer (0.4 to 1.2 recommended) |
className | string | — | Forwarded to the outermost container |
Accessibility
- When the user has "reduce motion" enabled at the system level, the badge hangs straight down at rest and neither the physics loop nor dragging starts
- The card carries
role="img"and anaria-label, announcing the name and job title - The static reduce-motion version is only swapped in after mount, avoiding an SSR hydration mismatch