KQ-1503 · COMET/KNOB

Comet Knob

A rotary knob whose head leaves a comet of light along its track: a follower angle chases the head with an exponential lag, and the arc between them is drawn as a tapered tail whose gradient, glow and halo brighten with the gap, so the comet is as long and as bright as the knob is fast and drains into the head when it stops. Drag on the rim to turn it by angle 1:1 or on the face by distance, flick to coast on motion's inertia generator (started at the hand's speed, decaying by friction, landing on a detent and bouncing once off an end stop), and every detent passed ticks. Arrow keys step a detent on springs.snap so keys draw a comet too, Page keys move a tenth, Home and End jump, and the host's own changes glide on springs.glide.

KQ-1503 · COMET/KNOB

2:00Steep

Coldbrook kettle · green tea · 80°

steep 2:00 · 12 detents

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/comet-knob

Props

value / defaultValue: number; default — / min; The value, controlled or uncontrolled, from min to max.
onValueChange: (value: number) => void; default —; Fires from the drag, coast or key that changed it, at every detent it passes.
onValueCommit: (value: number) => void; default —; Fires once the knob comes to rest after a gesture, a key or a rim tap: the value to act on.
min: number; default 0; The value at the start of the sweep.
max: number; default 100; The value at the end of the sweep.
step: number; default 1; The resolution when detents is 0.
detents: number; default 12; Notches across the whole range: the knob ticks at each, keys step by one and releases settle on the nearest. 0 turns smoothly by step.
tail: number; default 0.5; How long the comet is, 0 to 1: the follower's time constant, 50 to 320 ms behind the head.
friction: number; default 0.4; How quickly a flick coasts to a stop, 0 to 1: the inertia time constant, 700 to 120 ms.
sweep: number; default 270; Degrees of travel from min to max, centred on the top (60 to 340).
label: string; default —; The slider's accessible name, shown small under the reading.
format: (value: number) => string; default the value, rounded; The reading in the face and the spoken aria-valuetext; its longest output's width is reserved.
color: "cobalt" | "signal" | "ember" | "rose" | string; default "cobalt"; The comet, head, fill and lit detents: a preset tuned for both themes or any CSS colour.
size: "sm" | "md" | "lg"; default "md"; The knob's box: 120, 152 or 184 px square.
sound: boolean; default false; Tick at every detent passed by hand, coast, key or rim tap, pitch rising with the value; never for the host's changes.
disabled: boolean; default false; Dims the knob and ignores pointer and keys.
className: string; default —; Classes for the slider box.

Prop	Type	Default	Description
value / defaultValue	number	— / min	The value, controlled or uncontrolled, from min to max.
onValueChange	(value: number) => void	—	Fires from the drag, coast or key that changed it, at every detent it passes.
onValueCommit	(value: number) => void	—	Fires once the knob comes to rest after a gesture, a key or a rim tap: the value to act on.
min	number	0	The value at the start of the sweep.
max	number	100	The value at the end of the sweep.
step	number	1	The resolution when detents is 0.
detents	number	12	Notches across the whole range: the knob ticks at each, keys step by one and releases settle on the nearest. 0 turns smoothly by step.
tail	number	0.5	How long the comet is, 0 to 1: the follower's time constant, 50 to 320 ms behind the head.
friction	number	0.4	How quickly a flick coasts to a stop, 0 to 1: the inertia time constant, 700 to 120 ms.
sweep	number	270	Degrees of travel from min to max, centred on the top (60 to 340).
label	string	—	The slider's accessible name, shown small under the reading.
format	(value: number) => string	the value, rounded	The reading in the face and the spoken aria-valuetext; its longest output's width is reserved.
color	"cobalt" \| "signal" \| "ember" \| "rose" \| string	"cobalt"	The comet, head, fill and lit detents: a preset tuned for both themes or any CSS colour.
size	"sm" \| "md" \| "lg"	"md"	The knob's box: 120, 152 or 184 px square.
sound	boolean	false	Tick at every detent passed by hand, coast, key or rim tap, pitch rising with the value; never for the host's changes.
disabled	boolean	false	Dims the knob and ignores pointer and keys.
className	string	—	Classes for the slider box.