# barvian/number-flow

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/barvian-number-flow).**

7,128 stars · 140 forks · TypeScript · mit

## Links

- GitHub: https://github.com/barvian/number-flow
- Homepage: https://number-flow.barvian.me
- awesome-repositories: https://awesome-repositories.com/repository/barvian-number-flow.md

## Topics

`accessible` `animation` `odometer` `react` `svelte` `vue`

## Description

number-flow is an animated number UI component that creates fluid vertical transitions between numeric values using digit-by-digit animations. It serves as a locale-aware number formatter that represents values according to regional cultural rules and browser internationalization standards.

The component is designed for precise visual integration, exposing internal elements via CSS to allow for external styling. It incorporates accessibility features by detecting browser capabilities and respecting system-level reduced motion preferences.

The project covers capabilities for dynamic data visualization and custom counter components. This includes synchronizing layout transitions to maintain stability during value changes and applying position-specific constraints to digits.

## Tags

### User Interface & Experience

- [Localised Number Displays](https://awesome-repositories.com/f/user-interface-experience/localised-number-displays.md) — Provides a UI component that renders numbers according to regional cultural rules and system-level motion preferences.
- [Numerical Animations](https://awesome-repositories.com/f/user-interface-experience/numerical-animations.md) — Provides a UI component for creating fluid, animated transitions between numerical values.
- [Odometer-Style Animations](https://awesome-repositories.com/f/user-interface-experience/odometer-style-animations.md) — Implements a rolling odometer effect by moving individual numeric digits vertically during value transitions.
- [Stylized Numeric Counters](https://awesome-repositories.com/f/user-interface-experience/stylized-numeric-counters.md) — Provides stylized number counters with position-specific digit constraints and custom CSS integration.
- [Locale-Aware Value Formatting](https://awesome-repositories.com/f/user-interface-experience/value-formatting-tags/locale-aware-value-formatting.md) — Formats numeric values according to regional cultural rules and browser internationalization standards.
- [Motion Accessibility Utilities](https://awesome-repositories.com/f/user-interface-experience/accessibility-standards/motion-accessibility-utilities.md) — Implements motion design that adapts to system-level reduced motion settings for improved accessibility.
- [Dynamic Visualizations](https://awesome-repositories.com/f/user-interface-experience/credit-card-formatters/dynamic-visualizations.md) — Displays evolving numeric values with smooth transitions and layout stability for dynamic data visualization.
- [Stylable Component Parts](https://awesome-repositories.com/f/user-interface-experience/customizable-ui-components/stylable-component-parts.md) — Exposes internal elements via CSS to allow for precise external styling and visual integration.
- [Motion Preference Handlers](https://awesome-repositories.com/f/user-interface-experience/motion-preference-handlers.md) — Detects system-level reduced-motion preferences to disable animations for users with accessibility needs.
- [CSS Layout Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems.md) — Provides a system for the spatial arrangement and alignment of numeric digits using CSS rules.

### Graphics & Multimedia

- [State Transition Animators](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/animation-tools/programmatic-animation-apis/state-transition-animators.md) — Provides smooth transitions between numeric values using digit direction controls and value interpolation. ([source](https://cdn.jsdelivr.net/gh/barvian/number-flow@main/README.md))

### Web Development

- [Numeric Formatting](https://awesome-repositories.com/f/web-development/numeric-fields/numeric-formatting.md) — Formats numeric values according to regional cultural rules and browser internationalization standards. ([source](https://cdn.jsdelivr.net/gh/barvian/number-flow@main/README.md))
- [Layout Synchronization](https://awesome-repositories.com/f/web-development/layout-composition/layout-synchronization.md) — Coordinates layout measurements across numeric elements to maintain visual stability during value changes. ([source](https://number-flow.barvian.me))