Odometer

Show a number that matters as a machine that counted it: a founder price, seats remaining, downloads, a live tally, a donation total. The number stays real text for screen readers and search; the drums are what the eye believes.

Copy the odometer folder from its package next to your page, link its stylesheet and construct it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="odometer/odometer.css">
<div id="odometer" style="width: min(92vw, 960px); height: min(56vh, 420px); display: grid; place-items: center"></div>

<script type="module">
  import Odometer from './odometer/odometer.mjs';

  const odometer = new Odometer(document.getElementById('odometer'), {
    value: 1099,
    decimals: 0,
    prefix: '',
  });

  // odometer.update({ … });   change any option in place
  // odometer.destroy();        and take it away again
</script>

new Odometer(element, options)

Builds it inside the element with these options.

value

The value the drums are going to (or showing, once landed).

state

setValue(v, { instant = false } = {})

Roll to a new value.

count(rate = 1)

A live tally: add rate (value per second, negative counts down) in whole steps of the last drum, until count(0).

update(opts = {})

Change options in place.

destroy()

Stops it and cleans up after it.

1. At restThe drums sit on the value, each a hair off true with wear; the loop is asleep and costs nothing.
2. Filling its frameWith size "fit" (the default) the counter takes the largest numeral size that fits its host, measured with the counter out of it, and follows the host as it resizes; a fixed size shrinks only to fit.
3. Face loadingThe bundled Big Shoulders face is block-displayed: the drums show no figures for the few milliseconds before it arrives, then the figures are optically re-centred on the loaded face, never a fallback that jumps.
4. RollingA new value is a spring target: the last drum turns, and each drum above moves only while the one to its right passes 9 → 0, so carries roll together at the end of the turn.
5. SpinningA jump past the spin cap draws the fast drums turning at the cap, smeared along the turn, while the slow drums visibly roll; every drum lands exactly.
6. Overshoot and settleWith damping below 1 the value passes its target and the drums wind back; at 1 and above they arrive without passing.
7. Countingcount(rate) adds a steady tally in steps of the last drum; a slow tally sleeps between its steps and wakes for the next; the live text stops announcing and is kept current once a second.
8. GrowingReserved drums show blanks for leading zeros, so a growing number fills in without moving; past the reserve a drum is added at the start of the roll.
9. NegativeA sign plate flips into the window and the drums show the magnitude.
10. LandedOnce the value has landed and every smear has faded, the visually hidden text changes and is announced politely, once, never per frame.
11. Off screen or hiddenThe loop pauses; a returning tab cannot launch the spring with a long frame.
12. Reduced motionThe value changes instantly with no spin and no frame requested; counting still counts, by jumps.

Made of: Carry chain, Value spring, Spin cap motion blur, View fixed cylinder light, Intl number parts, Landed only live region, Sleeping loop, Fit to host, Lamp lit chamfers, Sleeping tally.

Read more: How the Odometer carries · Odometer, odometer.js, NumberFlow.

Original. Taken from the mechanism of real drum counters (car odometers, tally counters, petrol-pump registers), not from a catalogue reference, so references is honestly empty. DOM text on CSS 3D drums. The numerals are Big Shoulders Bold (SIL OFL 1.1, a Latin subset converted to WOFF2), shipped beside the stylesheet with its licence text, so the drums print the same figures on every platform; the old platform fallbacks (Bahnschrift, DIN) remain in the stack only in case the face cannot load.

• 06.1Pricing DrumsA price printed on brass drums.
• 06.2Goal TallyA fundraiser’s total on big printed drums.
• 06.3Trip ComputerAn instrument cluster as a stats band.
• 06.4Specimen CaseA bento of glass-topped compartments in a machined case, each holding one real Tactile object running small (the Odometer, the Flip-Dot, the Detent Dial, the Vessel) with an engraved label card under the glass.