barvian/number-flow

★ 7,334TypeScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((NumberFlow))
    What it does
      Animates number changes
      Odometer rolling effect
      Digit transitions
    Frameworks
      React
      Vue
      Svelte
      Plain TypeScript
    Use cases
      Dashboards
      Scoreboards
      Pricing displays
    Accessibility
      Reduced motion support
      Screen reader aware

mindmap root((NumberFlow)) What it does Animates number changes Odometer rolling effect Digit transitions Frameworks React Vue Svelte Plain TypeScript Use cases Dashboards Scoreboards Pricing displays Accessibility Reduced motion support Screen reader aware

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add animated number transitions to a dashboard so statistics visually count up or down when values update

USE CASE 2

Build a pricing display where switching plans shows numbers rolling smoothly to new amounts

USE CASE 3

Create a live scoreboard where score changes trigger an odometer-style counting animation

Tech stack

TypeScriptJavaScriptReactVueSveltenpm

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

NumberFlow is a JavaScript component that animates number changes on a web page. Rather than updating a displayed figure instantly, the component transitions between values in a way that makes individual digits appear to count up or down, producing a visual effect similar to an odometer rolling forward or a physical flip-board counter. This kind of animation is often used on scoreboards, dashboards, pricing displays, and statistics counters where the change itself draws the reader's attention. The component is designed to work inside four different JavaScript environments: React, Vue, and Svelte, which are popular frontend frameworks, as well as plain TypeScript or JavaScript for projects that do not use a framework at all. It is published on npm under the name number-flow, and the package version is tracked via a badge in the README. The project's topic tags include "accessible," which indicates the component accounts for users who have set reduced motion preferences on their device or who rely on screen readers. Animations that play without considering those scenarios can cause problems for some users, and the tag suggests those cases were addressed during development. The GitHub README is intentionally brief and points to an external documentation site at number-flow.barvian.me for full usage instructions, API options, and examples. No installation steps or code samples appear in the README itself. The author also links to a companion project called TextMorph, which applies a similar animated transition effect to text content rather than numbers, developed by a separate contributor.

Copy-paste prompts

Prompt 1

Add NumberFlow to my React app to animate a price changing from 99 to 149 dollars with an odometer effect, show me the component and props

Prompt 2

Use NumberFlow in a Vue 3 component to animate a download counter that increments by 1 every 5 seconds

Prompt 3

Set up NumberFlow in a plain TypeScript project without any framework, show me the npm install command and minimal usage code

Prompt 4

How does NumberFlow handle reduced motion preferences and screen readers? Show me how to verify accessibility behavior

Open on GitHub → Explain another repo

← barvian on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.