KQ-1493 · TANK/LEVEL

Tank Level

A value gauge drawn as a sight-glass tank whose surface is a real damped wave: a change moves the level on springs.glide (or 1:1 under a drag), the level's acceleration leans the surface toward the inlet as it fills, and when it stops the lean is let go into a slosh that rocks across the tank and dies away at the set damping. A rise also releases seeded bubbles from the floor that wobble up and pop at the surface with a ring and a ripple in the wave. It is a vertical slider: arrows move a step, Page keys ten, Home and End go to the ends, and a drag puts the surface under the finger.

KQ-1493 · TANK/LEVEL

tank b · 64% · drag or use arrows

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/tank-level

Props

value / defaultValue: number; default — / 40; The value, controlled or uncontrolled.
onValueChange: (value: number) => void; default —; Fires from the drag or key that changed it, with the new value — once per step, not per frame.
min: number; default 0; The bottom of the range.
max: number; default 100; The top of the range.
step: number; default 1; The value's resolution and one arrow key's change.
label: string; default —; What the tank holds: the slider's accessible name, shown over the reading.
format: (value: number, min: number, max: number) => string; default a percentage of the range; The reading and the spoken value; when given, the range's top is shown under the reading too.
damping: number; default 0.4; 0 rocks long after a change; 1 calms almost at once.
waves: number; default 0.6; How high the slosh runs, 0 to 1. 0 keeps the surface flat.
color: "water" | "amber" | "algae" | "berry" | string; default "water"; The liquid: a named pigment (a token's hue and chroma at a fixed lightness) or any CSS colour.
bubbles: boolean; default true; Release bubbles from the floor as the level rises.
ticks: number; default 10; Graduations up the side.
size: "sm" | "md" | "lg"; default "md"; The tank: 72×148, 92×184 or 112×220 px.
sound: boolean; default false; A pour while a drag fills it, pitched by the level, and a plip as each bubble the visitor caused pops.
disabled: boolean; default false; No drag or keys; the tank leaves the tab order.
className: string; default —; Classes for the row holding the tank and its reading.

Prop	Type	Default	Description
value / defaultValue	number	— / 40	The value, controlled or uncontrolled.
onValueChange	(value: number) => void	—	Fires from the drag or key that changed it, with the new value — once per step, not per frame.
min	number	0	The bottom of the range.
max	number	100	The top of the range.
step	number	1	The value's resolution and one arrow key's change.
label	string	—	What the tank holds: the slider's accessible name, shown over the reading.
format	(value: number, min: number, max: number) => string	a percentage of the range	The reading and the spoken value; when given, the range's top is shown under the reading too.
damping	number	0.4	0 rocks long after a change; 1 calms almost at once.
waves	number	0.6	How high the slosh runs, 0 to 1. 0 keeps the surface flat.
color	"water" \| "amber" \| "algae" \| "berry" \| string	"water"	The liquid: a named pigment (a token's hue and chroma at a fixed lightness) or any CSS colour.
bubbles	boolean	true	Release bubbles from the floor as the level rises.
ticks	number	10	Graduations up the side.
size	"sm" \| "md" \| "lg"	"md"	The tank: 72×148, 92×184 or 112×220 px.
sound	boolean	false	A pour while a drag fills it, pitched by the level, and a plip as each bubble the visitor caused pops.
disabled	boolean	false	No drag or keys; the tank leaves the tab order.
className	string	—	Classes for the row holding the tank and its reading.