Metric Odometer
DataMechanical digit wheels spin and settle left to right with true directional motion blur, inside a dial that draws around them
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 6 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Value *value · number
The figure the odometer lands on. Integers only, decimals belong in the unit.
now: 41820
- Label *label · string
What the figure is. Set small and tracked, above the dial.
now: Frames rendered
- Unitunit · string
Unit under the figure, e.g. 'components' or 'ms'. Omit for a bare number.
now: frames
- Deltadelta · string
Change chip beside the unit, e.g. '+12.4%'. Omit when there is no comparison.
now: +12.4%
- Fractionfraction · number
How far the dial ring draws around, 0 to 1. Use it to show the figure as a proportion of a target.
now: 0.78
- Brandbrand · string
Brand token id, one of the keys of BRANDS.
now: slate
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A vertical hero number that lands like a mechanical odometer rather than a tweened counter. Each digit should be a real wheel of numerals translated past a window, with the left digits making fewer rotations so the figure settles left to right. Add directional motion blur sampled from the wheel's actual speed, so it smears during the spin and is perfectly sharp once landed. Draw a dial ring around it with a glowing head, and run one specular pass over the numerals at the end.
