A light instrument panel of mechanical counters. When the section scrolls into view each digit drum spins into place, the ones place turning longest, inside shaded wheels like a real odometer.
Network counter
Measured live from our dispatch ledger, not estimated. The counters reset each January and roll forward with every scan.
npx shadcn@latest add https://hyperblur.dev/r/stats-odometer.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/stats-odometer.tsx.
import { StatsOdometer } from "@/components/hyperblur/stats-odometer"
<StatsOdometer stats={[{ value: "1,204,880", label: "Orders shipped" }, { value: "99.9", unit: "%", label: "On time" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Network counter" | Small mono label above the heading. |
| title | string | "The numbers behind every delivery window" | Section heading. |
| subtitle | string | sample text | Paragraph beside the heading. Hidden when empty. |
| stats | { value: string; label: string; note?: string; unit?: string }[] | 4 sample stats | Counters in order. Digits in value become drums, other characters such as commas or dots stay fixed. |
| duration | number | 2400 | Milliseconds for the longest drum to settle. |
| accent | string | "#d9480f" | Color of units and small markers. |