# Number Flow — Animated Number Transitions for React, Vue and Svelte

> A multi-framework component that smoothly animates number changes with accessible, performant transitions.

## Install

Save in your project root:

# Number Flow — Animated Number Transitions for React, Vue and Svelte

## Quick Use
```bash
npm install @number-flow/react
# <NumberFlow value={123.45} />
# The component animates smoothly between value changes
```

## Introduction
Number Flow renders animated number transitions that feel native and performant. It supports React, Vue, and Svelte, making it a drop-in replacement for static number displays wherever you want smooth counting animations.

## What Number Flow Does
- Animates between numeric values with configurable easing and duration
- Supports currency formatting, percentages, and custom number formats
- Handles locale-aware number formatting via Intl.NumberFormat
- Provides accessible output with ARIA attributes for screen readers
- Works across React, Vue, Svelte, and vanilla TypeScript

## Architecture Overview
Number Flow uses the Web Animations API under the hood, avoiding JavaScript-driven animation loops. Each digit is positioned independently and animated via CSS transforms, keeping the animation off the main thread. The component observes value changes and calculates the minimal set of digit transitions needed.

## Self-Hosting & Configuration
- Install the framework-specific package: @number-flow/react, @number-flow/vue, or @number-flow/svelte
- Pass a numeric value prop and the component handles animation automatically
- Configure format options using standard Intl.NumberFormat parameters
- Adjust animation timing with the transformTiming and opacityTiming props
- Use the willChange prop for GPU-accelerated rendering on mobile

## Key Features
- Per-digit animation that scrolls, fades, or slides each character independently
- Built on Web Animations API for smooth 60fps transitions
- Full Intl.NumberFormat support for currencies, units, and locale formatting
- Accessible by default with live region updates for assistive technology
- Tiny bundle size with no external animation library dependency

## Comparison with Similar Tools
- **Framer Motion / Motion** — general animation library; Number Flow is purpose-built for number transitions
- **CountUp.js** — counts from zero to a target; Number Flow animates between any two values with digit-level control
- **react-spring** — physics-based animations; Number Flow provides native-feeling number formatting without spring configs
- **Odometer** — legacy number animation library; Number Flow is modern, framework-agnostic, and uses Web Animations API

## FAQ
**Q: Does Number Flow work with currencies?**
A: Yes. Pass Intl.NumberFormat options like style, currency, and locale.

**Q: Can I animate non-numeric characters?**
A: Number Flow animates digits and formatting characters (commas, decimals, currency symbols) automatically.

**Q: Is it accessible?**
A: Yes. It uses ARIA live regions so screen readers announce value changes.

**Q: What browsers are supported?**
A: All modern browsers that support the Web Animations API.

## Sources
- https://github.com/barvian/number-flow
- https://number-flow.barvian.me

---
Source: https://tokrepo.com/en/workflows/asset-3d2c84ed
Author: AI Open Source