Odometer Counter

A counter that just changes a number is boring. An odometer that spins each digit into place like a mechanical counter is satisfying. The trick is a clipped column of digits with a Y transform, driven by a spring that overshoots past the target before settling.

#Step 1: Digit column

A single column of digits 0-9 stacked vertically. Clicking a digit highlights it. This establishes the visual structure before adding animation.

Loading...

#Step 2: Y transform

Replace the click-to-select with a motion.div that animates y to scroll the correct digit into view. flex-col-reverse puts 0 at the bottom, so the Y offset calculation is -(9 - value) * 10.

Loading...

#Step 3: Multi-digit

Map a number to individual digits, each in its own column. The key uses ${digits.length}-${i} so the layout reflows correctly when digits are added or removed (e.g., going from 99 to 100).

Loading...

#Step 4: Spring physics

The spring transition (bounce: 0.12, duration: 0.8) overshoots past the target digit slightly, then settles. This creates the mechanical "click" feel of a real odometer. A tween would look like a smooth scroll rather than individual digits snapping into place.

Loading...

#Configuration

Tune the spring physics for the digit scroll.

Loading...