Dial Gauge

Conic: no track, a conic wedge that brightens toward the value inside a thin progress ring, with a raised centre disc holding the number. Speedometer: heavier notches and an outside scale, with a red zone past the redline whose notches glow in the accent once lit, and rings of dots lighting behind. Dots: seven rings of dots lighting to the score and fading toward the centre. Needles come as a line, a tapered gradient, a triangle or a diamond; the line and tapered ones turn on a raised cap with a short tapered counterweight. The needle rides a spring with no bounce and re-sweeps from wherever it is when a new sample lands; the value rolls. The accent appears only past the redline. Point at the dial, or Tab in and use the arrow keys, to probe the scale: a small mark rides the rim, the centre number rolls to the probed value and the caption gives its distance from the reading.

npx shadcn@latest add @obsyde/dial-gauge

import { DialGauge } from '@/components/obsyde/ember/dial-gauge/DialGauge';

export function Example() {
  return (
    <DialGauge variant="notched" needle="line" value={53} />
  );
}