KQ-1213 · EGG/TIMER

Egg Timer

A mechanical kitchen timer, face on: drag round the dial and it turns 1:1 with the hand and ratchets, lingering on each minute's detent and clicking across to the next, rubber-bands past zero and the top of the scale, and lands on the nearest detent on the snap spring when let go, which starts it. While it runs the dial turns back to zero, stepping once a second on the flick spring as the escapement lever rocks on snap (or sweeping silently with ticking off), a red band shrinks toward the pointer, and at zero the shell rattles about its feet on a keyframed tween while the bell rings; a tap pauses and resumes. The dial is a slider in minutes: arrows add or take a minute, Page keys five, Home clears and End sets the whole scale, a held key holds the count like a hand on the dial, and Space or Enter pauses.

KQ-1213 · EGG/TIMER

Soft-boiled eggs

5:12

Running

running · 5:12 left

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/egg-timer

Props

value / defaultValue: number; default 0; Seconds left.
onValueChange: (value: number) => void; default —; Fires with the seconds left: on each detent while setting, on each key step, and once a second while running (while on screen; it catches up on return).
running / defaultRunning: boolean; default false; Whether it is counting down.
onRunningChange: (running: boolean) => void; default —; Fires from the release, key, tap or ring that started or stopped it.
onRing: () => void; default —; Fires when the count reaches zero and the bell rings.
max: number; default 60; The scale in minutes, 15 to 60: the graduations, the numbers (every 5, or every 10 past 30) and the size of each ratchet step.
shell: "pear" | "lemon" | "mint"; default "lemon"; The shell's colour, at a fixed lightness so it reads the same in either theme.
ticking: boolean; default true; Step once a second with the escapement rocking (and a quiet tick-tock, with sound); off, the dial sweeps back smoothly and silently.
label: string; default "Timer"; What is being timed: shown over the reading and used in the dial's name ("Eggs timer").
sound: boolean; default false; Detents while setting, a tick a second while running and the bell's chime — only once someone has set it (a visitor's turn, key, tap or button, or a host change after mount).
disabled: boolean; default false; Keeps counting, but takes no drag, keys or button.
className: string; default —; Classes for the timer's root.

Prop	Type	Default	Description
value / defaultValue	number	0	Seconds left.
onValueChange	(value: number) => void	—	Fires with the seconds left: on each detent while setting, on each key step, and once a second while running (while on screen; it catches up on return).
running / defaultRunning	boolean	false	Whether it is counting down.
onRunningChange	(running: boolean) => void	—	Fires from the release, key, tap or ring that started or stopped it.
onRing	() => void	—	Fires when the count reaches zero and the bell rings.
max	number	60	The scale in minutes, 15 to 60: the graduations, the numbers (every 5, or every 10 past 30) and the size of each ratchet step.
shell	"pear" \| "lemon" \| "mint"	"lemon"	The shell's colour, at a fixed lightness so it reads the same in either theme.
ticking	boolean	true	Step once a second with the escapement rocking (and a quiet tick-tock, with sound); off, the dial sweeps back smoothly and silently.
label	string	"Timer"	What is being timed: shown over the reading and used in the dial's name ("Eggs timer").
sound	boolean	false	Detents while setting, a tick a second while running and the bell's chime — only once someone has set it (a visitor's turn, key, tap or button, or a host change after mount).
disabled	boolean	false	Keeps counting, but takes no drag, keys or button.
className	string	—	Classes for the timer's root.