Kit Langton released Rolling Number, a small library for interruptible counters, with a pinned benchmark against NumberFlow

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 ships a framework-neutral DOM core plus thin 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 own 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 floor, 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 calls out 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 ships with the source fingerprint, spread and raw runs.

Why the framing is worth reading

Animated counters are the sort of piece a team reaches for on a dashboard, a pricing table, or an activity feed and then discovers is harder than it looked. Interruption is the usual sharp edge, 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 sharp edge: currencies group differently, some scripts use different digits, and a hardcoded English format looks wrong the moment the site ships in a second language.

A drop-in that treats both as first-class, ships a real benchmark with a pinned competitor and stated caveats, and works from a plain DOM API means the choice on a new project is no longer "roll our own" or "pull in something that owns the framework layer". Kit Langton has a public track record 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.