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

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