{"id":50372410,"url":"https://github.com/ayangabryl/ngx-digit-flow","last_synced_at":"2026-06-01T10:00:41.605Z","repository":{"id":357767427,"uuid":"1238451384","full_name":"ayangabryl/ngx-digit-flow","owner":"ayangabryl","description":"Individual digit animations for Angular. Slot-machine style. Built on Web Animations API.","archived":false,"fork":false,"pushed_at":"2026-05-14T08:09:30.000Z","size":150,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-14T08:27:59.272Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ngx-digit-flow.ayangabryl.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ayangabryl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-14T06:13:38.000Z","updated_at":"2026-05-14T08:09:35.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ayangabryl/ngx-digit-flow","commit_stats":null,"previous_names":["ayangabryl/ngx-digit-flow"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/ayangabryl/ngx-digit-flow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayangabryl%2Fngx-digit-flow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayangabryl%2Fngx-digit-flow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayangabryl%2Fngx-digit-flow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayangabryl%2Fngx-digit-flow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ayangabryl","download_url":"https://codeload.github.com/ayangabryl/ngx-digit-flow/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayangabryl%2Fngx-digit-flow/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33769492,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-01T02:00:06.963Z","response_time":115,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-05-30T08:00:26.068Z","updated_at":"2026-06-01T10:00:41.600Z","avatar_url":"https://github.com/ayangabryl.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Animations"],"readme":"# ngx-digit-flow\n\nIndividual 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.\n\nBuilt on Web Animations API + CSS `@property`. No animation libraries. SSR-safe. Signals-first.\n\n**Website:** [ngx-digit-flow.ayangabryl.com](https://ngx-digit-flow.ayangabryl.com)\n\n[![npm](https://img.shields.io/npm/v/ngx-digit-flow)](https://www.npmjs.com/package/ngx-digit-flow)\n[![license](https://img.shields.io/github/license/ayangabryl/ngx-digit-flow)](LICENSE)\n\n## Install\n\n```bash\nnpm install ngx-digit-flow\n```\n\n## Quick start\n\nImport the standalone component and bind it to a number.\n\n```typescript\nimport { Component, signal } from '@angular/core';\nimport { DigitFlowComponent } from 'ngx-digit-flow';\n\n@Component({\n  selector: 'app-price',\n  imports: [DigitFlowComponent],\n  template: `\n    \u003cngx-digit-flow [value]=\"price()\" [format]=\"{ style: 'currency', currency: 'USD' }\" /\u003e\n  `,\n})\nexport class PriceComponent {\n  price = signal(182.5);\n}\n```\n\n## AI skill\n\nInstall the `ngx-digit-flow` skill so your AI assistant knows the full API and can wire it into your components:\n\n```bash\nnpx skills add https://github.com/ayangabryl/ngx-digit-flow --skill ngx-digit-flow\n```\n\nWorks 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.\n\n## Usage\n\n```typescript\nimport { DigitFlowComponent } from 'ngx-digit-flow';\n\n@Component({\n  imports: [DigitFlowComponent],\n  template: `\u003cngx-digit-flow\n    [value]=\"price()\"\n    [format]=\"{ style: 'currency', currency: 'USD' }\"\n  /\u003e`,\n})\nexport class PriceComponent {\n  price = signal(182.5);\n}\n```\n\n## API\n\n### Inputs\n\n| Input                     | Type                                    | Default                 | Description                                                                          |\n| ------------------------- | --------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------ |\n| `value`                   | `number`                                | required                | The number to display and animate                                                    |\n| `format`                  | `Intl.NumberFormatOptions`              | `{}`                    | Options forwarded to `Intl.NumberFormat`                                             |\n| `locales`                 | `string \\| string[]`                    | `undefined`             | BCP 47 locale string(s), including localized digit glyphs                            |\n| `prefix`                  | `string`                                | `''`                    | Text prepended before the number                                                     |\n| `suffix`                  | `string`                                | `''`                    | Text appended after the number                                                       |\n| `animated`                | `boolean`                               | `true`                  | Set `false` to disable all animation                                                 |\n| `duration`                | `number`                                | `900`                   | Spin + FLIP animation duration in ms                                                 |\n| `opacityDuration`         | `number`                                | `450`                   | Fade duration for appearing/disappearing elements                                    |\n| `transformTiming`         | `DigitFlowTiming`                       | `duration + flipEasing` | Full WAAPI timing for layout/FLIP animations                                         |\n| `spinTiming`              | `DigitFlowTiming`                       | `transformTiming`       | Full WAAPI timing for digit spin animations                                          |\n| `opacityTiming`           | `DigitFlowTiming`                       | `opacityDuration`       | Full WAAPI timing for fade animations                                                |\n| `spinEasing`              | `DigitFlowEasing`                       | spring                  | Named preset (`spring`, `default`, `overshoot`) or CSS easing for digit spin         |\n| `flipEasing`              | `DigitFlowEasing`                       | spring                  | Named preset (`spring`, `default`, `overshoot`) or CSS easing for layout motion      |\n| `trend`                   | `number \\| (oldValue, value) =\u003e number` | auto                    | Controls digit path: `1` counts up, `-1` counts down, `0` per-digit local, or custom |\n| `continuous`              | `boolean`                               | `false`                 | Visually ticks through intermediate values by looping unchanged lower-place digits   |\n| `digits`                  | `Record\u003cnumber, { max?: number }\u003e`      | `{}`                    | Configure digit reel ranges by decimal position                                      |\n| `respectMotionPreference` | `boolean`                               | `true`                  | Disable animations when the user prefers reduced motion                              |\n| `stagger`                 | `number`                                | `0`                     | Delay in ms between entering/exiting presence animations                             |\n| `colorOnIncrease`         | `string`                                | `undefined`             | CSS color flashed when value increases                                               |\n| `colorOnDecrease`         | `string`                                | `undefined`             | CSS color flashed when value decreases                                               |\n\n### Outputs\n\n| Output             | Payload | Description                                |\n| ------------------ | ------- | ------------------------------------------ |\n| `animationsStart`  | `void`  | Fires when a batch of animations begins    |\n| `animationsFinish` | `void`  | Fires when all in-flight animations settle |\n\n## Examples\n\n**Currency**\n\n```html\n\u003cngx-digit-flow\n  [value]=\"revenue()\"\n  [format]=\"{ style: 'currency', currency: 'USD' }\"\n  [duration]=\"600\"\n/\u003e\n```\n\n**Compact notation (K / M / B)**\n\n```html\n\u003cngx-digit-flow [value]=\"views()\" [format]=\"{ notation: 'compact', maximumFractionDigits: 1 }\" /\u003e\n```\n\n**Percentage**\n\n```html\n\u003cngx-digit-flow [value]=\"progress()\" [format]=\"{ style: 'percent', maximumFractionDigits: 1 }\" /\u003e\n```\n\n**Localized digits**\n\n```html\n\u003cngx-digit-flow [value]=\"12345\" locales=\"ar-EG\" /\u003e\n```\n\n**Forced digit path**\n\n```html\n\u003cngx-digit-flow [value]=\"value()\" [trend]=\"-1\" /\u003e\n```\n\n**Score counter**\n\n```typescript\nscore = signal(0);\n```\n\n```html\n\u003cngx-digit-flow [value]=\"score()\" [duration]=\"500\" /\u003e\n\u003cbutton (click)=\"score.update(v =\u003e v - 1)\"\u003e-\u003c/button\u003e\n\u003cbutton (click)=\"score.update(v =\u003e v + 1)\"\u003e+\u003c/button\u003e\n```\n\n**Group directive** (coordinate related counters)\n\n```typescript\nimport { DigitFlowGroupDirective } from 'ngx-digit-flow';\n```\n\n```html\n\u003cdiv ngxDigitFlowGroup\u003e\n  \u003cngx-digit-flow [value]=\"hours\" /\u003e\n  \u003cspan\u003e:\u003c/span\u003e\n  \u003cngx-digit-flow [value]=\"minutes\" /\u003e\n  \u003cspan\u003e:\u003c/span\u003e\n  \u003cngx-digit-flow [value]=\"seconds\" /\u003e\n\u003c/div\u003e\n```\n\nUse `ngxDigitFlowGroup` when separate numbers form one visual unit. The directive batches\ntheir pre-update snapshots so unchanged siblings can still animate layout shifts caused by\nanother value changing.\n\n## Browser support\n\nRequires CSS `mod()` and `@property`: Chrome 125+, Safari 15.4+, Firefox 118+.\n\n`prefers-reduced-motion` is respected automatically - no extra code needed.\n\n## Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md).\n\n## License\n\nMIT - see [LICENSE](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayangabryl%2Fngx-digit-flow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayangabryl%2Fngx-digit-flow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayangabryl%2Fngx-digit-flow/lists"}