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";

// An altimeter moves fast, and both ways. Updating every 150ms with a 150ms
// linear roll, the lower wheels blur, the hundreds tick past steadily, and on
// the way down every wheel turns back under.
export default function OdometerFlightDemo() {
  const [alt, setAlt] = React.useState(10000);
  const [vs, setVs] = React.useState(1);

  React.useEffect(() => {
    const id = setInterval(() => {
      setAlt((a) => {
        const next = a >= 35000 ? -1 : a <= 10000 ? 1 : vs;
        setVs(next);
        return a + next * 61;
      });
    }, 150);
    return () => clearInterval(id);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="flex h-full w-full items-center justify-center gap-4 bg-background text-foreground">
      <Odometer
        value={alt}
        style={
          {
            fontSize: "2.5rem",
            "--sb-odometer-duration": "150ms",
            "--sb-odometer-easing": "linear",
          } as React.CSSProperties
        }
      />
      <span>ft</span>
      <span>{vs > 0 ? "\u25B2 climbing" : "\u25BC descending"}</span>
    </div>
  );
}