https://github.com/ayangabryl/ngx-digit-flow
Individual digit animations for Angular. Slot-machine style. Built on Web Animations API.
https://github.com/ayangabryl/ngx-digit-flow
Last synced: 10 days ago
JSON representation
Individual digit animations for Angular. Slot-machine style. Built on Web Animations API.
- Host: GitHub
- URL: https://github.com/ayangabryl/ngx-digit-flow
- Owner: ayangabryl
- License: mit
- Created: 2026-05-14T06:13:38.000Z (28 days ago)
- Default Branch: main
- Last Pushed: 2026-05-14T08:09:30.000Z (28 days ago)
- Last Synced: 2026-05-14T08:27:59.272Z (28 days ago)
- Language: TypeScript
- Homepage: https://ngx-digit-flow.ayangabryl.com
- Size: 146 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-digit-flow - 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. (Third Party Components / Animations)
- awesome-angular - ngx-digit-flow - 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. (Third Party Components / Animations)
README
# ngx-digit-flow
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](https://ngx-digit-flow.ayangabryl.com)
[](https://www.npmjs.com/package/ngx-digit-flow)
[](LICENSE)
## Install
```bash
npm install ngx-digit-flow
```
## Quick start
Import the standalone component and bind it to a number.
```typescript
import { Component, signal } from '@angular/core';
import { DigitFlowComponent } from 'ngx-digit-flow';
@Component({
selector: 'app-price',
imports: [DigitFlowComponent],
template: `
`,
})
export class PriceComponent {
price = signal(182.5);
}
```
## AI skill
Install the `ngx-digit-flow` skill so your AI assistant knows the full API and can wire it into your components:
```bash
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](https://anthropic.com/engineering/equipping-agents-for-the-real-world-with-agent-skills) format.
## Usage
```typescript
import { DigitFlowComponent } from 'ngx-digit-flow';
@Component({
imports: [DigitFlowComponent],
template: ``,
})
export class PriceComponent {
price = signal(182.5);
}
```
## API
### Inputs
| Input | Type | Default | Description |
| ------------------------- | --------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------ |
| `value` | `number` | required | The number to display and animate |
| `format` | `Intl.NumberFormatOptions` | `{}` | Options forwarded to `Intl.NumberFormat` |
| `locales` | `string \| string[]` | `undefined` | BCP 47 locale string(s), including localized digit glyphs |
| `prefix` | `string` | `''` | Text prepended before the number |
| `suffix` | `string` | `''` | Text appended after the number |
| `animated` | `boolean` | `true` | Set `false` to disable all animation |
| `duration` | `number` | `900` | Spin + FLIP animation duration in ms |
| `opacityDuration` | `number` | `450` | Fade duration for appearing/disappearing elements |
| `transformTiming` | `DigitFlowTiming` | `duration + flipEasing` | Full WAAPI timing for layout/FLIP animations |
| `spinTiming` | `DigitFlowTiming` | `transformTiming` | Full WAAPI timing for digit spin animations |
| `opacityTiming` | `DigitFlowTiming` | `opacityDuration` | Full WAAPI timing for fade animations |
| `spinEasing` | `DigitFlowEasing` | spring | Named preset (`spring`, `default`, `overshoot`) or CSS easing for digit spin |
| `flipEasing` | `DigitFlowEasing` | spring | Named preset (`spring`, `default`, `overshoot`) or CSS easing for layout motion |
| `trend` | `number \| (oldValue, value) => number` | auto | Controls digit path: `1` counts up, `-1` counts down, `0` per-digit local, or custom |
| `continuous` | `boolean` | `false` | Visually ticks through intermediate values by looping unchanged lower-place digits |
| `digits` | `Record` | `{}` | Configure digit reel ranges by decimal position |
| `respectMotionPreference` | `boolean` | `true` | Disable animations when the user prefers reduced motion |
| `stagger` | `number` | `0` | Delay in ms between entering/exiting presence animations |
| `colorOnIncrease` | `string` | `undefined` | CSS color flashed when value increases |
| `colorOnDecrease` | `string` | `undefined` | CSS color flashed when value decreases |
### Outputs
| Output | Payload | Description |
| ------------------ | ------- | ------------------------------------------ |
| `animationsStart` | `void` | Fires when a batch of animations begins |
| `animationsFinish` | `void` | Fires when all in-flight animations settle |
## Examples
**Currency**
```html
```
**Compact notation (K / M / B)**
```html
```
**Percentage**
```html
```
**Localized digits**
```html
```
**Forced digit path**
```html
```
**Score counter**
```typescript
score = signal(0);
```
```html
v - 1)">-
v + 1)">+
```
**Group directive** (coordinate related counters)
```typescript
import { DigitFlowGroupDirective } from 'ngx-digit-flow';
```
```html
:
:
```
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.
## Browser support
Requires CSS `mod()` and `@property`: Chrome 125+, Safari 15.4+, Firefox 118+.
`prefers-reduced-motion` is respected automatically - no extra code needed.
## Contributing
See [CONTRIBUTING.md](CONTRIBUTING.md).
## License
MIT - see [LICENSE](LICENSE).