1 / 1
Odometer Price Roll
No digit is ever rewritten. Each column is a strip of 0 to 9 behind a window one line tall, and translate: 0 calc(var(--d) * -1lh) slides the strip until digit --d is the one showing. 1lh is the whole trick: the window and the step are both read off the same line box, so the strip stays in register at any font size without one pixel value anywhere. Changing the price is then changing two numbers, and :has lets the checkbox do it from inside the card, so .card:has(#yearly:checked) rewrites --tens and --ones and the wheels follow. A spring ease overshoots by a hair so each wheel settles instead of stopping dead, and the ones column starts a beat after the tens so the count cascades.
animationcssvariablestransition:hasodometer