ngx-digit-flow

A mechanical odometer has specific physical behavior: each digit reel rotates in the direction of the count change, the rotation is smooth through intermediate values, and you can read the number mid-transition because the character boundaries are stable. Animated counters in browsers almost never replicate this correctly. They either spring between values with easing that reads as arbitrary, or they pull in heavy animation libraries for something that should not need one. That gap bothered me enough that I built ngx-digit-flow to fix it.

The package provides a standalone DigitFlowComponent with slot-machine reel rotations built entirely on the Web Animations API, zero animation library dependencies. Each digit gets its own vertical reel that rotates up or down depending on whether the value is increasing or decreasing, preserving the directional physics of the mechanical model. I tuned the rotation speed and timing so that intermediate states are legible rather than blurred.

Monospaced font boundaries prevent layout shifts during active rotations. Without enforced character widths, a reel transitioning between a narrow character like 1 and a wide one like 8 would cause surrounding content to reflow mid-animation. I used the FLIP trick for position calculation: measure before, animate to after, without the browser needing to know about the intermediate state.

The signals-first architecture matters for SSR. Angular Signals let the component track value changes reactively without lifecycle hooks that execute server-side and break hydration. The prefers-reduced-motion preference is respected: when the user has requested reduced motion, the counter updates immediately without animation. The DigitFlowGroupDirective coordinates transition timing across adjacent counters so a row of changing numbers stays synchronized rather than flickering independently.

Formatting comes through Intl.NumberFormat: locales, currencies, compact labels. The package ships as a single focused npm module. Installing it does not require adopting a design system or an animation framework.

The demos below show the core behaviors: social-style counts that tick up on tap, a balance counter with compact notation, and a slider where the thumb value follows with continuous reel motion. Drag or click to interact.