About
A drum counter that carries like a real odometer: 1,099 to 1,100 rolls three drums together. MIT, built on tactile-odometer.
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 style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 20, padding: 32 }}>
<MechanicalOdometer value={value} options={{ digits: 4 }} />
<button
type="button"
onClick={() => setValue((v) => (v === 1099 ? 1100 : 1099))}
style={{ minHeight: 44, padding: "10px 18px", borderRadius: 10, border: "1px solid currentColor", background: "transparent", color: "inherit", font: "600 15px system-ui, sans-serif", cursor: "pointer" }}
>
{value === 1099 ? "Roll to 1,100" : "Back to 1,099"}
</button>
</div>
);
}