KQ-1226 · WRISTBAND

Wristband

An event wristband drawn as 36 flat slices on a cylinder in CSS 3D, each with an outer and an inner face, so it can lie flat and then curl round into a real loop with the inside of the far side showing. A sideways drag curls it 1:1; past 94% the clasp catches and the ends close on the fabric's own spring (drift for woven, snap for silicone, glide for paper), it snaps shut with the loop tightening on recoil, and the tier and the wearer's name print on behind a moving print head. Worn, a tap or Enter lifts it toward the reader on snap while three rings ripple out from its print with a chime, a drag turns it on the wrist and it swings back on glide, and the Unsnap button pops the clasp and lets it fall open.

KQ-1226 · WRISTBAND

Drag or tap the band to put it on

unworn · tap the band to put it on

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/wristband

Props

name: string; default —; Who wears it: printed on the band, and part of its accessible name.
event: string; default "Admit one"; The event, repeated along the band and naming the group.
code: string; default —; The ticket's code, printed ahead of the event along the band.
access: string; default per tier; Where the band lets them in, shown under it and spoken on a scan. GA defaults to Gates A to C, VIP to Lounge, Gate B, Crew to All areas.
snapped / defaultSnapped: boolean; default false; Whether the band is snapped on. A host that changes it moves the band silently; one that refuses a snap gets the band back.
onSnappedChange: (snapped: boolean) => void; default —; Fires from the drag, tap or key whose clasp caught, or from Unsnap.
onScan: () => void; default —; Fires when a worn band is held to the reader: a tap, Enter or Space on it.
fabric: "woven" | "silicone" | "paper"; default "woven"; What the band is made of: woven twill with stitched edges and a soft curl, glossy silicone with a travelling highlight and a lively curl, or paper with fibres, die-cut slits and a crisp curl. Each has its own height.
tier: "ga" | "vip" | "crew"; default "vip"; The ticket tier: the band's colour (cobalt, gold, red), the word printed on it, the default access and the chime's pitch.
wrap: number; default 0.6; How much depth the band shows, 0 to 1: worn, 0 is straight on and nearly flat and 1 looks down into the loop with strong perspective; off, it is how much of the wrist's curve the band keeps as it rests.
sound: boolean; default false; A snap as the clasp catches (lower as it opens) and a chime on a scan, pitched by tier. Only ever in answer to the visitor.
disabled: boolean; default false; Shows the band but takes no drags, taps or keys.
className: string; default —; Classes for the root.

Prop	Type	Default	Description
name	string	—	Who wears it: printed on the band, and part of its accessible name.
event	string	"Admit one"	The event, repeated along the band and naming the group.
code	string	—	The ticket's code, printed ahead of the event along the band.
access	string	per tier	Where the band lets them in, shown under it and spoken on a scan. GA defaults to Gates A to C, VIP to Lounge, Gate B, Crew to All areas.
snapped / defaultSnapped	boolean	false	Whether the band is snapped on. A host that changes it moves the band silently; one that refuses a snap gets the band back.
onSnappedChange	(snapped: boolean) => void	—	Fires from the drag, tap or key whose clasp caught, or from Unsnap.
onScan	() => void	—	Fires when a worn band is held to the reader: a tap, Enter or Space on it.
fabric	"woven" \| "silicone" \| "paper"	"woven"	What the band is made of: woven twill with stitched edges and a soft curl, glossy silicone with a travelling highlight and a lively curl, or paper with fibres, die-cut slits and a crisp curl. Each has its own height.
tier	"ga" \| "vip" \| "crew"	"vip"	The ticket tier: the band's colour (cobalt, gold, red), the word printed on it, the default access and the chime's pitch.
wrap	number	0.6	How much depth the band shows, 0 to 1: worn, 0 is straight on and nearly flat and 1 looks down into the loop with strong perspective; off, it is how much of the wrist's curve the band keeps as it rests.
sound	boolean	false	A snap as the clasp catches (lower as it opens) and a chime on a scan, pitched by tier. Only ever in answer to the visitor.
disabled	boolean	false	Shows the band but takes no drags, taps or keys.
className	string	—	Classes for the root.