KQ-1154 · BEEPER

Beeper

A pocket pager on the desk: a new notice buzzes it in pulses that say how urgent it is, and during each pulse it walks a seeded step across the surface and stays where it walked, while the backlight comes up and the message steps across a 14-segment display a whole character at a time. Pressing its one button acknowledges the message and loads the next on springs.flick; holding it charges a bar along the cells and clears everything at 900ms. The display is a focusable message named by its whole text — arrow keys read the others, Delete acknowledges, Shift+Delete clears — and Space or Enter on the button presses or holds it the same way a finger does.

KQ-1154 · BEEPER

3 waiting · on call · basinworks

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/beeper

Props

notices: BeeperNotice[]; default —; The messages waiting, oldest first: { id, title, body?, tone? }. The newest arrival is the one shown.
onDismiss: (id: string) => void; default —; A message was acknowledged: the button's press, or Delete on the display.
onClearAll: () => void; default —; Every message was cleared by holding the button or Shift+Delete. Without it, onDismiss fires for each.
label: string; default "Pager"; The pager's accessible name.
emptyText: string; default "No messages"; What the display reads when nothing waits.
buzz: number; default 0.6; How hard it buzzes, 0 to 1: the shake, how far it walks and how loud. 0 is silent mode.
lcd: "green" | "amber" | "ice"; default "green"; The display's glass.
scroll: number; default 1; How fast the characters step across the display, 0.5 to 2.
sound: boolean; default false; Play the button and the buzz. An arrival is heard only when the visitor has just acted.
disabled: boolean; default false; Turns the button and the display off.
className: string; default —; Classes for the desk the pager lies on.

Prop	Type	Default	Description
notices	BeeperNotice[]	—	The messages waiting, oldest first: { id, title, body?, tone? }. The newest arrival is the one shown.
onDismiss	(id: string) => void	—	A message was acknowledged: the button's press, or Delete on the display.
onClearAll	() => void	—	Every message was cleared by holding the button or Shift+Delete. Without it, onDismiss fires for each.
label	string	"Pager"	The pager's accessible name.
emptyText	string	"No messages"	What the display reads when nothing waits.
buzz	number	0.6	How hard it buzzes, 0 to 1: the shake, how far it walks and how loud. 0 is silent mode.
lcd	"green" \| "amber" \| "ice"	"green"	The display's glass.
scroll	number	1	How fast the characters step across the display, 0.5 to 2.
sound	boolean	false	Play the button and the buzz. An arrival is heard only when the visitor has just acted.
disabled	boolean	false	Turns the button and the display off.
className	string	—	Classes for the desk the pager lies on.