Odometer Stats

Component

About

An animated stats band whose digits spin like a mechanical odometer counter into their final value when the section scrolls into view.

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

Code

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

Usage.tsx

"use client";

import OdometerStats from "@/components/ui/odometer-stats";

export default function Demo() {
  return (
    <div className="flex min-h-full w-full flex-col items-center justify-center bg-[#0b080d] p-8 [container-type:inline-size]">
      <div className="w-full max-w-4xl">
        <OdometerStats
          stats={[
            { value: "48K+", label: "Downloads" },
            { value: "1.2M", label: "Requests per day" },
            { value: "98.4%", label: "Uptime, 12 months" },
          ]}
        />
      </div>
    </div>
  );
}