Mechanical Odometer

Component 18

About

A mechanical drum counter. Numerals are printed on drums that turn behind a window; only the last drum is driven and the rest carry, so 1,099 to 1,100 rolls three drums over together. Its housing and drums are drawn from your shadcn theme and follow .dark. MIT. More like it: tactileui.dev

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

Code

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

Usage.tsx

"use client";

import { useState } from "react";
import { MechanicalOdometer } from "@/components/ui/mechanical-odometer";

export default function OdometerDemo() {
  const [value, setValue] = useState(1099);
  return (
    <div className="box-border flex min-h-screen w-full flex-col items-center justify-center gap-5 bg-background p-8 text-foreground">
      <MechanicalOdometer value={value} digits={4} label="Orders" />
      <button
        type="button"
        onClick={() => setValue((v) => (v === 1099 ? 1100 : 1099))}
        className="min-h-11 rounded-lg border border-border bg-background px-[18px] py-2.5 text-[15px] font-semibold text-foreground hover:bg-muted"
      >
        {value === 1099 ? "Roll to 1,100" : "Back to 1,099"}
      </button>
    </div>
  );
}