{"id":28707178,"url":"https://github.com/binlabs/digit-spinner","last_synced_at":"2026-01-20T16:54:01.566Z","repository":{"id":298938102,"uuid":"991541850","full_name":"binlabs/digit-spinner","owner":"binlabs","description":"A lightweight web component for odometer-style digit spinners and simple numeric counters.","archived":false,"fork":false,"pushed_at":"2025-06-24T13:58:46.000Z","size":149,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-24T14:44:20.194Z","etag":null,"topics":["counter","lit","odometer","typescript","web-component"],"latest_commit_sha":null,"homepage":"https://binlabs.github.io/digit-spinner/","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/binlabs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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}},"created_at":"2025-05-27T19:32:09.000Z","updated_at":"2025-06-24T13:58:50.000Z","dependencies_parsed_at":"2025-06-13T18:33:01.139Z","dependency_job_id":"cff1c64b-ad40-44de-8c76-64d60b197152","html_url":"https://github.com/binlabs/digit-spinner","commit_stats":null,"previous_names":["binlabs/digit-spinner"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/binlabs/digit-spinner","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binlabs%2Fdigit-spinner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binlabs%2Fdigit-spinner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binlabs%2Fdigit-spinner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binlabs%2Fdigit-spinner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/binlabs","download_url":"https://codeload.github.com/binlabs/digit-spinner/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binlabs%2Fdigit-spinner/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261700010,"owners_count":23196480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["counter","lit","odometer","typescript","web-component"],"created_at":"2025-06-14T16:08:49.898Z","updated_at":"2026-01-20T16:54:01.561Z","avatar_url":"https://github.com/binlabs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Digit Spinner\n\nA smooth, animated odometer-like web component built with Lit. Display numbers with beautiful spinning digit animations that transition seamlessly between values. See the [documentation](https://binlabs.github.io/digit-spinner/) for more details and a [live demo](https://binlabs.github.io/digit-spinner/playground/).\n\n## Features\n\n- 🎯 **Smooth Animations**: Fluid digit transitions with customizable easing\n- 🔄 **Multi-Direction**: Can animate up, down, or the shortest path\n- 🎨 **Customizable Styling**: CSS custom properties for complete visual control\n- 📱 **Lightweight**: Built with Lit for optimal performance\n- 🔢 **Flexible Formatting**: Support for leading zeros and minimum digit counts\n- 🎪 **Rich Events**: Detailed animation lifecycle events\n\n## Installation\n\n```bash\nnpm install digit-spinner\n```\n\n## Basic Usage\n\n```html\n\u003cscript type=\"module\" src=\"node_modules/digit-spinner/dist/index.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Simple counter --\u003e\n\u003cdigit-spinner value=\"42\"\u003e\u003c/digit-spinner\u003e\n```\n\n## API Reference\n\n### `\u003cdigit-spinner\u003e`\n\nThe main component that displays animated numbers with spinning digit transitions.\n\n#### Properties\n\n| Property    | Attribute    | Type     | Default                            | Description                                               |\n| ----------- | ------------ | -------- | ---------------------------------- | --------------------------------------------------------- |\n| `value`     | `value`      | `number` | `0`                                | The numeric value to display                              |\n| `direction` | `direction`  | `string` | `'forward'`                        | Animation direction: 'forward', 'backward', or 'shortest' |\n| `duration`  | `duration`   | `number` | `200`                              | Animation duration in milliseconds                        |\n| `easing`    | `easing`     | `string` | `'cubic-bezier(0.83, 0, 0.17, 1)'` | Animation easing function                                 |\n| `minDigits` | `min-digits` | `number` | `0`                                | Minimum number of digits (pads with leading zeros)        |\n\n#### Methods\n\n| Method            | Parameters        | Description                                |\n| ----------------- | ----------------- | ------------------------------------------ |\n| `increment(num?)` | `num: number = 1` | Increase the value by the specified amount |\n| `decrement(num?)` | `num: number = 1` | Decrease the value by the specified amount |\n\n#### Events\n\nThe `\u003cdigit-spinner\u003e` element emits the following events:\n\n| Event              | Properties                                      | Description                                   |\n| ------------------ | ----------------------------------------------- | --------------------------------------------- |\n| `digit-flip-start` | `{from: number, to: number}`                    | Fired when digit animation begins             |\n| `digit-flip-end`   | `{from: number, to: number}`                    | Fired when digit animation completes          |\n| `digit-wrap`       | `{from: number, to: number, direction: string}` | Fired when digit wraps from 9 to 0, or 0 to 9 |\n\n#### Examples\n\n```html\n\u003c!-- Basic usage --\u003e\n\u003cdigit-spinner value=\"123\"\u003e\u003c/digit-spinner\u003e\n\n\u003c!-- With leading zeros --\u003e\n\u003cdigit-spinner value=\"42\" min-digits=\"4\"\u003e\u003c/digit-spinner\u003e\n\u003c!-- Shows: 0042 --\u003e\n\n\u003c!-- Programmatic control --\u003e\n\u003cdigit-spinner id=\"counter\" value=\"0\" min-digits=\"3\"\u003e\u003c/digit-spinner\u003e\n\u003cbutton onclick=\"document.getElementById('counter').increment()\"\u003e+\u003c/button\u003e\n\u003cbutton onclick=\"document.getElementById('counter').decrement()\"\u003e-\u003c/button\u003e\n```\n\n## Styling\n\nCustomize the appearance using [CSS custom properties](https://binlabs.github.io/digit-spinner/api/#digit-spinner-css-custom-properties):\n\n```css\ndigit-spinner {\n  --digit-font-size: 2rem;\n  --digit-font: 'Courier New', monospace;\n  --digit-color: #333;\n  --digit-background-color: #f0f0f0;\n}\n```\n\n### CSS Parts\n\nInternal elements can also be styled using [CSS parts](https://binlabs.github.io/digit-spinner/api/#digit-spinner-css-shadow-parts):\n\n```css\ndigit-spinner::part(container) {\n  /* Style the main container */\n}\n\ndigit-spinner::part(digit-wrapper) {\n  /* Style individual digit wrappers */\n}\n\ndigit-spinner::part(digit) {\n  /* Style digit elements */\n  border-radius: 4px;\n  padding: 8px;\n}\n```\n\n## Advanced Examples\n\n### Event Handling\n\nIn this example, we listen for the `digit-flip-start` event to log the digit that has begun flipping.\n\n```html\n\u003cdigit-spinner id=\"event-demo\" value=\"10\"\u003e\u003c/digit-spinner\u003e\n\n\u003cscript\u003e\n  document\n    .getElementById('event-demo')\n    .addEventListener('digit-flip-start', (e) =\u003e {\n      const origin = e.composedPath()[0]; // Reference to the digit\n      console.log(\n        `Digit ${origin} has started flipping from ${e.from} to ${e.to}`\n      );\n    });\n\u003c/script\u003e\n```\n\n### Custom Styled Odometer\n\n```html\n\u003cstyle\u003e\n  digit-spinner {\n    --digit-font-size: 2rem;\n    --digit-font: 'Courier New', monospace;\n    --digit-color: #333;\n    --digit-background-color: #f0f0f0;\n  }\n\u003c/style\u003e\n\n\u003cdigit-spinner value=\"88888\"\u003e\u003c/digit-spinner\u003e\n```\n\n## Browser Support\n\nThis component uses modern web standards and requires:\n\n- ES2020+ support\n- Custom Elements v1\n- CSS Custom Properties\n- Web Animations API\n\nSupports all modern browsers including Chrome 80+, Firefox 75+, Safari 13.1+, and Edge 80+.\n\n## Development\n\nThe component is built with:\n\n- [Lit](https://lit.dev/) - Efficient web component library\n- [@lit-labs/motion](https://www.npmjs.com/package/@lit-labs/motion) - Animation utilities\n- TypeScript - Type safety and better development experience\n\n## Credits\n\n- Animation mechanics inspired by the @lit-labs/motion [Carousel Transition example](https://lit.dev/playground/#sample=examples/motion-carousel)\n- Project was started using [lit-element-starter-ts](https://github.com/lit/lit-element-starter-ts)\n\n## License\n\nMIT License - see LICENSE file for details.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit issues and pull requests.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbinlabs%2Fdigit-spinner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbinlabs%2Fdigit-spinner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbinlabs%2Fdigit-spinner/lists"}