piruicy
The collection

Rolling number

after Motion

A number whose digits roll like an odometer, up, down or the direct way.

npx shadcn@latest add https://piruicy.com/r/rolling-number.json

Details

  • One critically damped spring (ω ≈ 9.3 rad/s: stiffness 86, damping 18.6) rolls the digits and the widths.
  • Opacity is a separate one-second ease-out; entering columns widen from 0, leaving ones narrow away.
  • Trend: auto rolls each digit the short way; up and down always spin one way and wrap.
  • Fitted against Motion's live example: 72 of 72 trials matched.

© 2026 Dhaval Khandhadia. Use it in anything you build; don’t resell it. MIT with the Commons Clause.