Kit Langton released Rolling Number, a library for interruptible counters

Kit Langton published a new TypeScript library, Rolling Number, and the GitHub repository has picked up 110 stars in the four days since the first commit on 4 September. It animates counters between values with locale-aware formatting, supports interruption partway through a run, and includes a framework-neutral DOM core plus small React and Solid adapters. The package is MIT licensed and lists no runtime dependencies in its DOM core.

What the library covers

The engine takes a value, a locale, and standard Intl.NumberFormat options, so the same options that format a static number also drive the animation. It handles bigints as well as numbers, has a bounded travel path so that a jump from 12 to 12000 does not enumerate every intervening digit, and pauses off-screen counters. The React and Solid adapters handle the accessible formatted text; the animating layer is a separate decorative mount, so there are no per-frame framework state updates. Server rendering produces readable text and the initial hydration does not animate.

Alongside the number component there is a RollingText for labels that transitions each glyph directly to its replacement, and a mode="flap" for split-flap board mechanics with per-card timing. The demo at rolling.kitlangton.dev shows currency, large integers, locale changes, direct word transitions and a split-flap board.

The benchmark

The repository pins a specific comparison target, NumberFlow 0.6.2, and includes the benchmark as a script. The methodology counts shadow-DOM elements, measures production code, includes a plain-text baseline, and reports repeated runs.

The result quoted from the latest local run is 59.8% less main-thread work and 56.7% fewer retained elements than NumberFlow 0.6.2 for 100 synchronised counters in Chromium 151 on an Apple M2 Max. Both libraries had long frame intervals in the stress workload. The README states the limits itself: "A smaller DOM or no per-frame JavaScript does not, on its own, prove smoother presented frames or universal speed." The report comes with the source fingerprint, spread and raw runs.

Why the framing is worth reading

Animated counters are the sort of piece a team uses on a dashboard, a pricing table, or an activity feed and then discovers is harder than it looked. Interruption is the usual difficulty, because a value can change again while the current run is halfway through, and the naive implementation either snaps to the new value or plays the old animation to the end and then plays a second one. Locale is the other difficulty: currencies group differently, some scripts use different digits, and a hardcoded English format looks wrong the moment the site is released in a second language.

A ready-made library that handles both properly, includes a real benchmark with a pinned competitor and stated caveats, and works from a plain DOM API means a new project no longer has to choose between building its own and adding something that controls the framework layer. Kit Langton has a public history of building small, careful libraries on the JVM and web sides, which is the other reason a library from him gets to 110 stars in four days.

Source

Primary source: kitlangton/rolling-number on GitHub.