KQ-1802 · TUBE/RACK

Tube Rack

A rack of glass test tubes, each filled to its value with glossy coloured liquid behind a front rail: a curved meniscus climbs the glass, a shine runs down the liquid and the glass has its own long glint. Every few seconds a slow wave runs along the rack and nudges each tube as it passes, so the surfaces tilt and rock back to level in turn on a damped oscillator. Pick a tube and drag on it: a target mark follows the finger 1:1 and the liquid pours to meet it, capped at a pour rate and settling on springs.glide's constants, with a thin stream falling from the mouth as it rises and bubbles climbing as it drains; each tube is a vertical slider under one tab stop, Left and Right move between tubes, Up and Down step, Page keys move a tenth, Home empties and End fills.

KQ-1802 · TUBE/RACK

Basinworks · soil lab

Nitrate by plot

mg/L · week 32

six plots · mean 54 mg/L

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/tube-rack

Props

values / defaultValues: number[]; default defaultTubeValues; One level per tube, from 0 to max, controlled or initial.
onValuesChange: (values: number[]) => void; default —; Fires from the drag or key that changed a level, with every level.
labels: string[]; default defaultTubeLabels; A short name under each tube; also each slider's accessible name.
max: number; default 100; The value of a full tube.
step: number; default 1; How far an arrow key moves a level; drags snap to it too.
palette: "lab" | "berry" | "sea" | "amber"; default "lab"; The liquids' colours, cycled along the rack.
colors: string[]; default —; Liquid colours of your own, any CSS colours; overrides palette.
slosh: number; default 0.5; How far the surfaces tilt when the wave passes and how long they rock, 0 (still) to 1.
gloss: number; default 0.6; The glass's highlight and the liquid's shine, 0 (matte) to 1.
wavePeriod: number; default 6500; How often a slow wave runs along the rack, in ms.
pourSpeed: number; default 0.5; How fast liquid pours to a new level, 0 (a slow trickle) to 1 (a quick pour).
graduations: boolean; default true; Faint graduations at each quarter of the glass.
format: (value: number) => string; default —; Formats a value for its chip, its label and assistive technology; defaults to a rounded number.
onActiveChange: (index: number | null) => void; default —; Fires when a tube is picked by a press or by focus, or with null when focus leaves the rack.
label: string; default "Tube rack"; The rack's accessible name.
sound: boolean; default false; Play the glug of the pour, rising as the tube fills, for the visitor's own changes; it stops when the pour does.
disabled: boolean; default false; Shows the levels but takes no input.
className: string; default "h-52 w-full"; Sizes the rack; tubes are laid out in pixels from the measured width.

Prop	Type	Default	Description
values / defaultValues	number[]	defaultTubeValues	One level per tube, from 0 to max, controlled or initial.
onValuesChange	(values: number[]) => void	—	Fires from the drag or key that changed a level, with every level.
labels	string[]	defaultTubeLabels	A short name under each tube; also each slider's accessible name.
max	number	100	The value of a full tube.
step	number	1	How far an arrow key moves a level; drags snap to it too.
palette	"lab" \| "berry" \| "sea" \| "amber"	"lab"	The liquids' colours, cycled along the rack.
colors	string[]	—	Liquid colours of your own, any CSS colours; overrides palette.
slosh	number	0.5	How far the surfaces tilt when the wave passes and how long they rock, 0 (still) to 1.
gloss	number	0.6	The glass's highlight and the liquid's shine, 0 (matte) to 1.
wavePeriod	number	6500	How often a slow wave runs along the rack, in ms.
pourSpeed	number	0.5	How fast liquid pours to a new level, 0 (a slow trickle) to 1 (a quick pour).
graduations	boolean	true	Faint graduations at each quarter of the glass.
format	(value: number) => string	—	Formats a value for its chip, its label and assistive technology; defaults to a rounded number.
onActiveChange	(index: number \| null) => void	—	Fires when a tube is picked by a press or by focus, or with null when focus leaves the rack.
label	string	"Tube rack"	The rack's accessible name.
sound	boolean	false	Play the glug of the pour, rising as the tube fills, for the visitor's own changes; it stops when the pour does.
disabled	boolean	false	Shows the levels but takes no input.
className	string	"h-52 w-full"	Sizes the rack; tubes are laid out in pixels from the measured width.