↩ Return

ngx-digit-flow

February 1, 2026

Angular · TypeScript · Web Animations API · NPM

ngx-digit-flow demo landing with animated currency counter

Context

ngx-digit-flow is an open-source Angular library I built for animating numbers digit by digit. Each character sits on a vertical reel that scrolls to the next value, odometer style, when the bound number changes.

What I built

  • Standalone DigitFlowComponent with Intl.NumberFormat support (currency, compact notation, percent, locales)
  • Reel motion powered by the Web Animations API and CSS @property, with no GSAP or Angular animations dependency
  • Signals-first API, SSR-safe rendering, and automatic prefers-reduced-motion handling
  • DigitFlowGroupDirective to batch related counters (timers, split stats)
  • Public demo at ngx-digit-flow.ayangabryl.com and publishable npm package
ngx-digit-flow interactive demos

Technical highlights

The hard part is making layout shifts feel intentional: digits enter and exit cleanly, spin direction can follow trend (up, down, or per-digit), and FLIP-style updates stay in sync when multiple counters sit side by side. I kept the surface area small so teams can drop one component into dashboards, pricing UI, or scoreboards without adopting a full motion system.

ngx-digit-flow documentation and API reference

Outcome

A focused Angular OSS package with a live docs site, npm distribution, and an installable agent skill so AI-assisted workflows can wire the API correctly.