Swinging ID Badge React component
An event ID badge hanging from a printed lanyard that you can grab and fling: it swings back on real pendulum physics, the strap stretches and settles, the card turns on its clip and the foil strip shimmers as it moves; click to turn it over to a QR code and access zones.
About the Swinging ID Badge component
Swinging ID Badge is a conference-style badge hanging from a lanyard that begs to be played with. Grab it and throw it: it swings back and forth on real pendulum physics, the strap stretches a little and settles, and the card turns on its clip as it moves, with the foil strip catching the light.
Click it (or press Enter) to turn it over: the back has a QR-style code, the access zones and a 'valid until' line. Arrow keys give it a push for keyboard users.
When to use it
Use it for event and conference sites, 'meet the speaker' or team pages, hackathon tickets, onboarding screens that welcome a new member, or a playful personal landing page.
It's a centrepiece: one per screen works best, with enough space above and around it to swing.
Installation
Add the Swinging ID Badge component to your project with the shadcn CLI. It lands in components/swinging-id-badge.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/swinging-id-badgeOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<SwingingIdBadge /> accepts 15 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| name | string | "Mara Lindqvist" |
| role | string | "Design Engineer" |
| company | string | "Northline" |
| event Event or pass label, printed on the strap and the badge. | string | "Build Week 2026" |
| badgeId | string | "NL-0427" |
| photo | string | "/demo/39.webp" |
| photoAlt | string | "" |
| zones Access zones listed on the back. | string[] | ["Main stage", "Studios", "Workshop floor", "Speaker lounge"] |
| validUntil | string | "14 Mar 2026" |
| length Strap length in px, from the anchor to the clip. | number | 190 |
| gravity Stronger gravity swings faster. | number | 2400 |
| damping 0 = swings for a long time, 1 = settles quickly. | number | 0.35 |
- namestringDefault: "Mara Lindqvist"
- rolestringDefault: "Design Engineer"
- companystringDefault: "Northline"
- event
Event or pass label, printed on the strap and the badge.
stringDefault: "Build Week 2026" - badgeIdstringDefault: "NL-0427"
- photostringDefault: "/demo/39.webp"
- photoAltstringDefault: ""
- zones
Access zones listed on the back.
string[]Default: ["Main stage", "Studios", "Workshop floor", "Speaker lounge"] - validUntilstringDefault: "14 Mar 2026"
- length
Strap length in px, from the anchor to the clip.
numberDefault: 190 - gravity
Stronger gravity swings faster.
numberDefault: 2400 - damping
0 = swings for a long time, 1 = settles quickly.
numberDefault: 0.35
Show all 15 propsShow fewer
| flippable Click (or Enter) turns the badge over. | boolean | true |
| accent | string | "#d4ff3f" |
| theme | "dark" | "light" | "dark" |
- flippable
Click (or Enter) turns the badge over.
booleanDefault: true - accentstringDefault: "#d4ff3f"
- theme"dark" | "light"Default: "dark"
npm dependencies
Installed for you by the shadcn CLI.
Swinging ID Badge FAQ
- Is the QR code real?
- No, it's a decorative QR-style pattern generated from badgeId, so each badge looks different. Swap the back for a real QR image if it needs to scan.
- How do I make it swing longer or settle faster?
- damping goes from 0 (swings for a long time) to 1 (settles quickly). gravity changes how fast it swings and length sets the strap length.
- Does it work on phones?
- Yes. Drag it with a finger to swing it and tap to flip; the badge itself doesn't scroll the page while you hold it.
- Can I turn off flipping?
- Set flippable={false} and a click does nothing; dragging still swings it.
