Odometer Pro

A mechanical counter. Every digit is a drum, and all of them turn the way the number moved: counting up, a 9 rolls forward to 0 instead of winding back. A change that lands mid-roll carries on from wherever the drum is.

Pro preview

Installation

Terminalbash

npx @neelshha/ui@latest login
npx @neelshha/ui@latest add odometer

Usage

page.tsxtsx

import { Odometer } from "@/components/ui/odometer";

<Odometer value={4213} digits={6} />

Fractions

Drums after the decimal point are inverted, like the tenths drum on a car odometer.

Pro preview

page.tsxtsx

<Odometer
  value={12849.6}
  digits={6}
  format={{
    minimumFractionDigits: 1,
    maximumFractionDigits: 1,
    useGrouping: false,
  }}
/>

Source

API

Other props go to the outer span. Screen readers get the formatted number as text. With reduced motion, the drums snap.

Prop	Type	Default	Description
`value`	`number`		The number on the drums.
`digits`	`number`		Whole digits, padded with zeros like a mechanical counter.
`format`	`Intl.NumberFormatOptions`		Grouping, fraction digits, currency, percent. Figures stay Latin so every digit has a drum.
`locale`	`string`		Passed to Intl.NumberFormat.
`duration`	`number`	`700`	Milliseconds a drum takes to roll home, on the key spring.