KQ-1863 · DRIP/CLOCK

Drip Clock

A minimal water clock seen from above, in Canvas 2D: a drop falls into a dark stone basin every second, seen shrinking as it falls with its shadow sliding in, flicks a small crown of spray and sends one thin ring outward, a lit crest over a dark trough; when the ring reaches the lip it lights that second's tick, so the sixty ticks fill round the rim, and in lively water a fainter reflection runs back in to the centre. At the sixtieth tick the rim drains in one cascade and the minute's drop lands with a double ring; tempo can follow the wall clock or a prop. A click drops a drop of your own whose ring crosses the clock's and sounds a plip; the basin is a real button whose aim follows the arrow keys on springs.snap, with Enter or Space dropping at it and Escape hiding it.

KQ-1863 · DRIP/CLOCK

Basinworks · water clock

0:00 · click the water to add a drop

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/drip-clock

Props

tempo: "clock" | "slow" | "fast" | number; default "clock"; What sets the drops: "clock" lands one on every second of the wall clock; "slow" (40 a minute), "fast" (120 a minute) or a number of drops a minute follow this prop instead.
damping: number; default 0.45; How quickly a ring loses its light, 0 (lively water: rings reach the lip bright and run back in) to 1 (still, heavy water).
tone: "ink" | "jade" | "copper" | "night"; default "ink"; The basin's stone and the rings' light, as pigments that read the same in both themes; also the drop's pitch.
sound: boolean; default false; Play a plip when your own drop lands. The clock's drops are always silent.
ringSpeed: number; default 110; How fast a ring runs outward, in px a second at a 94 px basin, 40 to 300.
ticks: boolean; default true; Show the sixty ticks on the lip that the rings light.
basinColor: string; default —; The basin's colour, overriding the tone.
ringColor: string; default —; The rings' colour, overriding the tone.
interactive: boolean; default true; A click (or Enter at the aim) adds a drop of your own.
paused: boolean; default false; Stop the drops; rings already in the water run out.
label: string; default "Water clock"; Names the clock for assistive technology.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onTick: (second: number) => void; default —; Fires when a ring reaches the lip and lights its tick, with the second it counts, 0 to 59.
onMinute: () => void; default —; Fires when the sixtieth tick lights and the minute rolls over.
onDrop: (x: number, y: number) => void; default —; Fires when your drop lands, with its place in px from the basin's centre.
disabled: boolean; default false; Shows the clock keeping time but takes no drops.
className: string; default "size-56"; Sizes the box; the basin is the largest circle that fits.

Prop	Type	Default	Description
tempo	"clock" \| "slow" \| "fast" \| number	"clock"	What sets the drops: "clock" lands one on every second of the wall clock; "slow" (40 a minute), "fast" (120 a minute) or a number of drops a minute follow this prop instead.
damping	number	0.45	How quickly a ring loses its light, 0 (lively water: rings reach the lip bright and run back in) to 1 (still, heavy water).
tone	"ink" \| "jade" \| "copper" \| "night"	"ink"	The basin's stone and the rings' light, as pigments that read the same in both themes; also the drop's pitch.
sound	boolean	false	Play a plip when your own drop lands. The clock's drops are always silent.
ringSpeed	number	110	How fast a ring runs outward, in px a second at a 94 px basin, 40 to 300.
ticks	boolean	true	Show the sixty ticks on the lip that the rings light.
basinColor	string	—	The basin's colour, overriding the tone.
ringColor	string	—	The rings' colour, overriding the tone.
interactive	boolean	true	A click (or Enter at the aim) adds a drop of your own.
paused	boolean	false	Stop the drops; rings already in the water run out.
label	string	"Water clock"	Names the clock for assistive technology.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onTick	(second: number) => void	—	Fires when a ring reaches the lip and lights its tick, with the second it counts, 0 to 59.
onMinute	() => void	—	Fires when the sixtieth tick lights and the minute rolls over.
onDrop	(x: number, y: number) => void	—	Fires when your drop lands, with its place in px from the basin's centre.
disabled	boolean	false	Shows the clock keeping time but takes no drops.
className	string	"size-56"	Sizes the box; the basin is the largest circle that fits.