KQ-1103 · POUR/HOLD

Pour Hold

A value input you fill by pouring: holding tips a carafe on a weighted spring, and once it passes the pour angle a stream leaves the mouth in a real ballistic arc, lands in the glass, and from that frame the level (the value) rises. Letting go rights the carafe, the stream's tail falls and lands as the last drop, and the surface rocks back to level on a spring whose damping is the liquid's viscosity, while the glass's own shape turns volume into height so a flute climbs fast and a jar slowly. It is a slider: arrow keys pour or lower one step, Page keys ten, End pours to the brim, Home empties, and Space or Enter held pours for as long as they are held.

KQ-1103 · POUR/HOLD

Water

0 ml

glass empty · hold to pour

Open it on the Tactile stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/pour-hold

Props

value / defaultValue: number; default 0; The amount poured, 0 to max. Controlled or uncontrolled; the level follows a pour as it happens and settles on whatever the host says once it ends.
onValueChange: (value: number) => void; default —; Fires from the pour or the key that changed it: once for each step a pour crosses, and once for each key step or empty.
max: number; default 100; What a full glass is worth.
step: number; default 5; The value's resolution, what one arrow key pours, and what a tap pours.
label: string; default —; What is being poured: the slider's accessible name, also shown over the reading.
format: (value: number, max: number) => string; default —; The reading under the glass and the slider's spoken value. Defaults to a percentage of max.
emptyLabel: string; default "Empty"; The text of the button that empties the glass.
rate: number; default 0.5; How hard it pours, 0 to 1: the tilt, the stream's thickness, the flow (about 6 s to fill at 0, 1.6 s at 1) and the loudness.
viscosity: number; default 0.2; Water to syrup, 0 to 1: slower flow, a thicker and denser stream, a lower pour note, and a surface that barely sloshes.
glass: "tumbler" | "flute" | "jar"; default "tumbler"; The glass's shape, which sets both the drawing and how fast the level climbs for the same pour.
overflow: boolean; default false; Let a held pour run over the brim: the surface domes, a sheet runs down the outside and pools, and the value stays at max. Off, the carafe rights itself at the brim and a further hold is refused.
sound: boolean; default false; Play the pour, whose pitch rises as the glass fills, and the last drop. Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Dims the instrument, takes it out of the tab order and stops any pour.
className: string; default —; Merged onto the root's classes.

Prop	Type	Default	Description
value / defaultValue	number	0	The amount poured, 0 to max. Controlled or uncontrolled; the level follows a pour as it happens and settles on whatever the host says once it ends.
onValueChange	(value: number) => void	—	Fires from the pour or the key that changed it: once for each step a pour crosses, and once for each key step or empty.
max	number	100	What a full glass is worth.
step	number	5	The value's resolution, what one arrow key pours, and what a tap pours.
label	string	—	What is being poured: the slider's accessible name, also shown over the reading.
format	(value: number, max: number) => string	—	The reading under the glass and the slider's spoken value. Defaults to a percentage of max.
emptyLabel	string	"Empty"	The text of the button that empties the glass.
rate	number	0.5	How hard it pours, 0 to 1: the tilt, the stream's thickness, the flow (about 6 s to fill at 0, 1.6 s at 1) and the loudness.
viscosity	number	0.2	Water to syrup, 0 to 1: slower flow, a thicker and denser stream, a lower pour note, and a surface that barely sloshes.
glass	"tumbler" \| "flute" \| "jar"	"tumbler"	The glass's shape, which sets both the drawing and how fast the level climbs for the same pour.
overflow	boolean	false	Let a held pour run over the brim: the surface domes, a sheet runs down the outside and pools, and the value stays at max. Off, the carafe rights itself at the brim and a further hold is refused.
sound	boolean	false	Play the pour, whose pitch rises as the glass fills, and the last drop. Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Dims the instrument, takes it out of the tab order and stops any pour.
className	string	—	Merged onto the root's classes.