Lanyard Team
Team members as conference badges on lanyards. They swing when you brush past or grab them.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Each badge is a damped pendulum. Moving the pointer past it nudges it with your cursor's speed, and you can grab one and fling it. Hole punch, role stripe and barcode included.
Installation
$ npx shadcn@latest add https://guetix.com/r/lanyard-team.json
Uses the shadcn CLI. It creates components/guetix/lanyard-team.tsx and installs nothing else.
Usage
example.tsx
import { LanyardTeam } from "@/components/guetix/lanyard-team";
export default function Example() {
return <LanyardTeam />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| members | { name; role; color; handle? }[] | — | People. |
| title | string | — | Heading. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Badges are real text content; Regular hangs them still.