Lanyard Badge

Pro

An ID badge on two straps that you can grab, swing and flick.

Cards · ProInstall ↓Open preview ↗

Loading the demoNew tab ↗

Customize

Shape

Strap#0f766e

Strap text#99f6e4

Strap words

Strap stiffness0.30

Strap damping0.10

Air drag0.030

Grip0.050

Drop in

Drop height650 px

Your code

<LanyardBadge />

Changes show live and stay in the address, so a link keeps them.

Code

This one is a Pro component

Pro components come with Pro Components, any Templates plan or All-Access. Sign in, or enter your licence key, to see the code here and copy it, or install it with the shadcn CLI below.

Install

With the shadcn CLI

Pro components install from a private registry that checks your licence key (Pro Components, a Templates plan or All-Access). Set it up once per project. The key stays in an environment variable and never goes into components.json.

1. Add the registry

Merge this into components.json.

components.json

{
  "registries": {
    "@dimaac-pro": {
      "url": "https://api.dimaac.com/v1/ui/r/{name}.json",
      "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" }
    }
  }
}

2. Add your key

Put it in .env.local (or your shell) and keep that file out of git. The CLI fills in ${DIMAAC_LICENSE_KEY} from it.

.env.local

DIMAAC_LICENSE_KEY=your-licence-key

3. Add the component

npx shadcn@latest add @dimaac-pro/lanyard-badge

@dimaac-pro is the registry from step 1. More in Docs

By hand

npm install gsap @gsap/react matter-js

Install the packages it uses: gsap, @gsap/react, matter-js.
Copy the component file from the Code panel (once your licence key unlocks it) into components/dimaac/lanyard-badge.tsx.
It's styled with Tailwind v4 classes. If that folder sits outside the places Tailwind scans, add it with @source in your CSS.
Import it with import { LanyardBadge } from "@/components/dimaac/lanyard-badge" and give its parent a size: it fills it.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	-	What's printed on the card. It fills the card, so give it its own background.
`shape`	`LanyardShape`	`"portrait"`	The card's outline: a tall badge, a wide one, a disc or a ticket with a tear-off stub.
`strapColor`	`string`	`"#0f766e"`	The strap's colour (also the fabric tab at the clasp).
`strapTextColor`	`string`	`"#99f6e4"`	The colour of the words woven into the strap and of the tab's stitches.
`strapText`	`string`	`"DiMaac UI"`	The words repeated along the strap. Empty for a plain strap.
`stiffness`	`number`	`0.3`	How springy the straps are: low is stretchy, 1 is a stiff chain.
`damping`	`number`	`0.1`	How quickly the straps stop bouncing.
`airFriction`	`number`	`0.03`	Air drag on the card: low keeps it swinging, high settles it fast.
`dragStiffness`	`number`	`0.05`	How hard the card follows the pointer while it's held.
`dropOnLoad`	`boolean`	`true`	The card falls in from above when it first appears.
`dropHeight`	`number`	`650`	How far above its resting place the card starts its fall, in pixels at full scale.
`label`	`string`	`"Badge on a lanyard. Drag it, or use the arrow keys to swing it."`	What screen readers call the card.
`cardClassName`	`string`	`"bg-white text-neutral-900"`	Extra classes for the card's face (the box the children fill).
`className`	`string`	`""`	Extra classes for the outer box. Give it a size (it fills it): the scene scales to its height.

Use with AI

Agent prompt

Paste it into Claude Code, Cursor or any coding agent, or open it straight in a chat. It carries your Customize settings.

Prompt

Add the Lanyard Badge component (<LanyardBadge />) from DiMaac UI to this project. It is a Pro component, so its source needs the owner's DiMaac licence key (Pro Components, a Templates plan or All-Access).

Docs: https://ui.dimaac.com/components/lanyard-badge

1. Add the Pro registry to components.json (merge it into "registries"). Don't write the key into the file:
{
  "registries": {
    "@dimaac-pro": {
      "url": "https://api.dimaac.com/v1/ui/r/{name}.json",
      "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" }
    }
  }
}

2. The owner puts their licence key in .env.local (keep it out of git): DIMAAC_LICENSE_KEY=your-licence-key
   Ask them for it if it isn't set. Never print it or commit it.

3. Install it with:
npx shadcn@latest add @dimaac-pro/lanyard-badge

The registry item is https://api.dimaac.com/v1/ui/r/lanyard-badge.json and wants the header "Authorization: Bearer <licence key>".

Then use it like this:
import { LanyardBadge } from "@/components/dimaac/lanyard-badge";
<LanyardBadge />

It imports gsap, @gsap/react, matter-js; the CLI installs them. It uses Tailwind v4 classes, so make sure Tailwind scans that folder.
Give its parent a size, keep light and dark mode working and keep its prefers-reduced-motion fallback.
Full index for agents: https://ui.dimaac.com/llms.txt

Open in Claude ↗Open in ChatGPT ↗

Files agents read

llms.txt: Every component and how to install it
lanyard-badge.md: This page as Markdown: install, props and the full source

About

A badge card hanging from a lanyard, with real physics. Matter.js runs the card, a clip and two straps of twelve springy links each; the card is plain HTML, so it holds anything, and it hangs from a chrome lobster clasp that threads through a slot cut in the card. It drops in on load, tilts and catches a sliding sheen as it moves, brushes aside when the mouse passes over it, and can be dragged and flicked with a mouse or a finger (only the card takes the touch, so the page still scrolls around it). Four outlines: a tall badge, a wide one, a disc and a ticket with a tear-off stub. The arrow keys push it, Enter drops it in again. The straps' spring, damping, air drag and grip can be tuned live. With reduced motion it skips the drop, the tilt and the hover push, and the air is thick enough that a drag never becomes a big swing. The world is torn down completely on unmount.

Installs to: components/dimaac/lanyard-badge.tsx
Uses: gsap, @gsap/react, matter-js
Tags: physics, matter-js, drag, card, badge, svg

Portrait by Benginur Hajjaj on Lummi (Lummi License).