Individual digit animations for Angular. Each digit has a vertical reel (0-9) that scrolls to the new value when the number changes - slot-machine / odometer style.

Built on Web Animations API + CSS @property. No animation libraries. SSR-safe. Signals-first.

Website: ngx-digit-flow.ayangabryl.com

npm install ngx-digit-flow

Import the standalone component and bind it to a number.

import { Component, signal } from '@angular/core';
import { DigitFlowComponent } from 'ngx-digit-flow';

@Component({
  selector: 'app-price',
  imports: [DigitFlowComponent],
  template: `
    <ngx-digit-flow [value]="price()" [format]="{ style: 'currency', currency: 'USD' }" />
  `,
})
export class PriceComponent {
  price = signal(182.5);
}

Install the ngx-digit-flow skill so your AI assistant knows the full API and can wire it into your components:

npx skills add https://github.com/ayangabryl/ngx-digit-flow --skill ngx-digit-flow

Works with Claude Code and any agent that supports the Agent Skills format.

import { DigitFlowComponent } from 'ngx-digit-flow';

@Component({
  imports: [DigitFlowComponent],
  template: `<ngx-digit-flow
    [value]="price()"
    [format]="{ style: 'currency', currency: 'USD' }"
  />`,
})
export class PriceComponent {
  price = signal(182.5);
}

Currency

<ngx-digit-flow
  [value]="revenue()"
  [format]="{ style: 'currency', currency: 'USD' }"
  [duration]="600"
/>

Compact notation (K / M / B)

<ngx-digit-flow [value]="views()" [format]="{ notation: 'compact', maximumFractionDigits: 1 }" />

Percentage

<ngx-digit-flow [value]="progress()" [format]="{ style: 'percent', maximumFractionDigits: 1 }" />

Localized digits

<ngx-digit-flow [value]="12345" locales="ar-EG" />

Forced digit path

<ngx-digit-flow [value]="value()" [trend]="-1" />

Score counter

score = signal(0);

<ngx-digit-flow [value]="score()" [duration]="500" />
<button (click)="score.update(v => v - 1)">-</button>
<button (click)="score.update(v => v + 1)">+</button>

Group directive (coordinate related counters)

import { DigitFlowGroupDirective } from 'ngx-digit-flow';

<div ngxDigitFlowGroup>
  <ngx-digit-flow [value]="hours" />
  <span>:</span>
  <ngx-digit-flow [value]="minutes" />
  <span>:</span>
  <ngx-digit-flow [value]="seconds" />
</div>

Use ngxDigitFlowGroup when separate numbers form one visual unit. The directive batches their pre-update snapshots so unchanged siblings can still animate layout shifts caused by another value changing.

Requires CSS mod() and @property: Chrome 125+, Safari 15.4+, Firefox 118+.

prefers-reduced-motion is respected automatically - no extra code needed.

See CONTRIBUTING.md.

MIT - see LICENSE.