Odometer

Numbers that roll like a mechanical counter, digit columns spinning with a stagger.

Zero dependencies
React + Tailwind
Accessible
Reduced-motion aware

Animated · Full motion: idle animation, physics and effects. animated (default)

Each digit is a real 0–9 strip. Leading zeros stay faintly visible like a real counter, so columns never remount. It starts rolling when scrolled into view.

Installation

$ npx shadcn@latest add https://guetix.com/r/odometer.json

Uses the shadcn CLI. It creates components/guetix/odometer.tsx and installs nothing else.

Usage

example.tsx

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

export default function Example() {
  return <Odometer />;
}

Props

Prop	Type	Default	Description
value	number	128450	Target value.
prefix / suffix	string	—	Text around the number.
label	string	—	Caption.
demo	boolean	true	Auto-increment for demos.
animated	boolean	true	false = the calm “Regular” version (no idle or ambient motion).

Accessibility

Exposed as one image with the full number as its label.

Odometer

Preview

Odometer

Preview