KQ-1828 · LANYARD/BADGE

Lanyard Badge

A small LED badge hanging on a printed lanyard: behind a smoked lens a crisp grid of square LEDs runs rippling waves in four PWM steps, the messages scrolling in a 5×7 pixel face, or simple pictures wiped in column by column, and two buttons on its edge cycle the mode and the brightness, each press travelling in on springs.flick with a click. Dragging the badge swings it on its lanyard as a pendulum held to its strap; on release a damped pendulum takes the throw while the badge rocks on its clip, a lighter hinge that lags and overshoots before both settle. The face is a button: Enter or Space push it, the arrow keys push it either way.

KQ-1828 · LANYARD/BADGE

Gaugeworks Summit · day two

Your badge, on its lanyard

mode auto · brightness 3 of 4

Open it on the Canvas stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/lanyard-badge

Props

mode / defaultMode: "waves" | "name" | "pictures" | "auto"; default "auto"; What the screen runs: rippling waves, the messages scrolling, pictures, or all three in turn; controlled or the uncontrolled start.
onModeChange: (mode: LanyardBadgeMode) => void; default —; Fires from the mode button with the new mode.
brightness / defaultBrightness: number; default 0.75; How bright the LEDs are: 0.25, 0.5, 0.75 or 1; controlled or the uncontrolled start.
onBrightnessChange: (brightness: number) => void; default —; Fires from the brightness button with the new level.
messages: string[]; default ["FIELDLINE"]; The messages the name mode scrolls in turn; letters, digits and simple punctuation.
pitch: number; default 5; LED pitch in px, 4 to 8: a finer pitch fits more, smaller LEDs.
color: "amber" | "red" | "green" | "blue" | string; default "amber"; The LEDs' colour: a preset or any CSS colour.
strapColor: string; default —; The lanyard's colour; defaults to a deep navy from the tokens.
strapText: string; default "FIELDLINE"; The word printed along the lanyard.
speed: number; default 1; How fast the screen runs — scrolling, ripples and pictures — 0.25 to 3.
swing: number; default 0.6; How freely the badge swings, 0 settling at once to 1 swinging on and on.
sound: boolean; default false; A click from the side buttons.
label: string; default "LED badge"; The badge's accessible name.
paused: boolean; default false; Freezes the screen.
disabled: boolean; default false; No buttons, swinging or keys.
className: string; default —; Sizes the piece; the badge scales to its width. 224px tall by default.

Prop	Type	Default	Description
mode / defaultMode	"waves" \| "name" \| "pictures" \| "auto"	"auto"	What the screen runs: rippling waves, the messages scrolling, pictures, or all three in turn; controlled or the uncontrolled start.
onModeChange	(mode: LanyardBadgeMode) => void	—	Fires from the mode button with the new mode.
brightness / defaultBrightness	number	0.75	How bright the LEDs are: 0.25, 0.5, 0.75 or 1; controlled or the uncontrolled start.
onBrightnessChange	(brightness: number) => void	—	Fires from the brightness button with the new level.
messages	string[]	["FIELDLINE"]	The messages the name mode scrolls in turn; letters, digits and simple punctuation.
pitch	number	5	LED pitch in px, 4 to 8: a finer pitch fits more, smaller LEDs.
color	"amber" \| "red" \| "green" \| "blue" \| string	"amber"	The LEDs' colour: a preset or any CSS colour.
strapColor	string	—	The lanyard's colour; defaults to a deep navy from the tokens.
strapText	string	"FIELDLINE"	The word printed along the lanyard.
speed	number	1	How fast the screen runs — scrolling, ripples and pictures — 0.25 to 3.
swing	number	0.6	How freely the badge swings, 0 settling at once to 1 swinging on and on.
sound	boolean	false	A click from the side buttons.
label	string	"LED badge"	The badge's accessible name.
paused	boolean	false	Freezes the screen.
disabled	boolean	false	No buttons, swinging or keys.
className	string	—	Sizes the piece; the badge scales to its width. 224px tall by default.