Each digit rolls vertically to its new value like a mechanical counter, with separators and symbols left in place.
npx shadcn@latest add https://hyperblur.dev/r/text-odometer.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-odometer.tsx.
import { TextOdometer } from "@/components/hyperblur/text-odometer"
<TextOdometer value="$48,219.40" className="text-5xl font-semibold" />| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | number | required | Value to show. Digits roll, any other character is static. Columns are aligned from the right. |
| cycle | (string | number)[] | Optional list of values to step through automatically, ignoring value. | |
| interval | number | 2.6 | Seconds between steps when cycle has two or more entries. |
| duration | number | 1.1 | Roll duration in seconds. |
| stagger | number | 0.07 | Extra delay in seconds per column, starting at the rightmost digit. |
| animateOnMount | boolean | true | Roll up from zeros on first render. |
| fade | boolean | true | Fade the digits at the top and bottom edge of each column. |