Odometer

Component

About

A number display whose digits roll on individual wheels to a new value, like a car's mechanical odometer, with an optional 3D drum mode, locale-aware grouping, and fixed decimal places. Ported to React from the Starbase (zweiundeins) Datastar/Rocket web component, MIT licensed.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Odometer to your project and fits it to your theme.

Code

How Odometer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import Odometer from "@/components/ui/odometer";

// Ported from the component's own gallery preview: a drum odometer rolling a
// tenth of a kilometre every 3.6 seconds (100 km/h), with a linear roll of
// the same duration so the last wheel never stops turning.
export default function OdometerDemo() {
  const [km, setKm] = React.useState(221180.4);

  React.useEffect(() => {
    const id = setInterval(() => {
      setKm((v) => Math.round((v + 0.1) * 10) / 10);
    }, 3600);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="flex h-full w-full items-center justify-center bg-background text-foreground">
      <Odometer
        drum
        decimals={1}
        value={km}
        style={
          {
            fontSize: "2.5rem",
            "--sb-odometer-duration": "3.6s",
            "--sb-odometer-easing": "linear",
          } as React.CSSProperties
        }
      />
    </div>
  );
}