[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81432":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":13,"stars7d":13,"stars30d":13,"stars90d":14,"forks30d":14,"starsTrendScore":15,"compositeScore":16,"rankGlobal":10,"rankLanguage":10,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":22,"readmeContent":23,"aiSummary":24,"trendingCount":14,"starSnapshotCount":14,"syncStatus":25,"lastSyncTime":26,"discoverSource":27},81432,"ngx-digit-flow","ayangabryl\u002Fngx-digit-flow","ayangabryl","Individual digit animations for Angular. Slot-machine style. Built on Web Animations API.","https:\u002F\u002Fngx-digit-flow.ayangabryl.com",null,"TypeScript",34,1,0,3,43.5,"MIT License",false,"main",true,[],"2026-06-12 04:01:33","# 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 \u002F 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:\u002F\u002Fngx-digit-flow.ayangabryl.com)\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fngx-digit-flow)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fngx-digit-flow)\n[![license](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fayangabryl\u002Fngx-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\u002Fcore';\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' }\" \u002F>\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:\u002F\u002Fgithub.com\u002Fayangabryl\u002Fngx-digit-flow --skill ngx-digit-flow\n```\n\nWorks with Claude Code and any agent that supports the [Agent Skills](https:\u002F\u002Fanthropic.com\u002Fengineering\u002Fequipping-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  \u002F>`,\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\u002Fdisappearing elements                                    |\n| `transformTiming`         | `DigitFlowTiming`                       | `duration + flipEasing` | Full WAAPI timing for layout\u002FFLIP 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) => 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 }>`      | `{}`                    | 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\u002Fexiting 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\u002F>\n```\n\n**Compact notation (K \u002F M \u002F B)**\n\n```html\n\u003Cngx-digit-flow [value]=\"views()\" [format]=\"{ notation: 'compact', maximumFractionDigits: 1 }\" \u002F>\n```\n\n**Percentage**\n\n```html\n\u003Cngx-digit-flow [value]=\"progress()\" [format]=\"{ style: 'percent', maximumFractionDigits: 1 }\" \u002F>\n```\n\n**Localized digits**\n\n```html\n\u003Cngx-digit-flow [value]=\"12345\" locales=\"ar-EG\" \u002F>\n```\n\n**Forced digit path**\n\n```html\n\u003Cngx-digit-flow [value]=\"value()\" [trend]=\"-1\" \u002F>\n```\n\n**Score counter**\n\n```typescript\nscore = signal(0);\n```\n\n```html\n\u003Cngx-digit-flow [value]=\"score()\" [duration]=\"500\" \u002F>\n\u003Cbutton (click)=\"score.update(v => v - 1)\">-\u003C\u002Fbutton>\n\u003Cbutton (click)=\"score.update(v => v + 1)\">+\u003C\u002Fbutton>\n```\n\n**Group directive** (coordinate related counters)\n\n```typescript\nimport { DigitFlowGroupDirective } from 'ngx-digit-flow';\n```\n\n```html\n\u003Cdiv ngxDigitFlowGroup>\n  \u003Cngx-digit-flow [value]=\"hours\" \u002F>\n  \u003Cspan>:\u003C\u002Fspan>\n  \u003Cngx-digit-flow [value]=\"minutes\" \u002F>\n  \u003Cspan>:\u003C\u002Fspan>\n  \u003Cngx-digit-flow [value]=\"seconds\" \u002F>\n\u003C\u002Fdiv>\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","ngx-digit-flow 是一个用于 Angular 的数字动画库，能够为每个数字提供类似老虎机或里程表风格的垂直滚动效果。该项目基于 Web Animations API 和 CSS `@property` 构建，不依赖其他动画库，并且支持服务器端渲染（SSR）。它采用信号优先的方法，确保了在现代 Angular 应用中的高效性能。适用于需要动态展示数值变化的场景，如价格更新、计数器等，可以增强用户体验并使界面更加生动。",2,"2026-06-11 04:05:01","CREATED_QUERY"]