Design Atlas
한국어
↝ Motion

Odometer

오도미터

A counter where each digit is a vertical reel that spins, the way a car's mechanical odometer changes — the next digit slides up (or down) into place instead of the text just swapping instantly.

Also known as: Rolling counterDigit reel
···
html
<div class="odo" id="odo"></div>
css
.odo{display:flex;gap:2px;background:var(--fg);padding:8px 10px;border-radius:10px}
.reel{width:clamp(16px,6vmin,28px);height:clamp(24px,8vmin,40px);overflow:hidden;position:relative;background:var(--surface);border-radius:4px}
.strip{display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.3,.85,.4,1);
  transform:translateY(calc(var(--d, 0) * -10%))}
.strip div{height:clamp(24px,8vmin,40px);display:grid;place-items:center;
  font:700 clamp(14px,5.4vmin,22px)/1 ui-monospace,monospace;color:var(--fg)}
js
const odo = document.getElementById('odo');
const DIGITS = [0, 0, 0];
const strips = DIGITS.map(() => {
  const reel = document.createElement('div');
  reel.className = 'reel';
  const strip = document.createElement('div');
  strip.className = 'strip';
  for (let n = 0; n < 10; n++) {
    const d = document.createElement('div');
    d.textContent = String(n);
    strip.appendChild(d);
  }
  reel.appendChild(strip);
  odo.appendChild(reel);
  return strip;
});

let value = 0;
function render() {
  const s = String(value).padStart(3, '0');
  [...s].forEach((ch, i) => strips[i].style.setProperty('--d', ch));
}
render();
setInterval(() => {
  value = (value + 1 + Math.floor(Math.random() * 6)) % 1000;
  render();
}, 650);

For each digit position, build a vertical "reel" strip listing 0 through 9, and show it through a window exactly one digit tall with overflow: hidden. When the value changes, translateY the whole reel so the target digit slides into that window — since every digit is spaced identically, the distance is simply (target digit − previous digit) × one digit's height.

Store the current digit in a CSS variable (--d) and drive the transform with a percentage — translateY(calc(var(--d) * -10%)) — so the reel lands on the correct digit regardless of the actual pixel height, even with a responsive clamp() size. A touch of ease-out on the transition lets the reel settle smoothly instead of clunking to a stop.

Rolling from 9 back to 0 (say 19 → 20) can look like it's spinning backward through nine digits. Duplicating 0–9 twice in the strip and always computing the target index as "forward only" keeps the roll moving in one direction.

When to use

Use it for stats and scoreboards where a counter visibly climbs or drops. With many digits (six or more) or very frequent updates, the reels end up in constant, dizzying motion — throttle the update rate, or fall back to a plain count-up.