whatisgithub

What is number-flow?

barvian/number-flow — explained in plain English

Analysis updated 2026-06-24

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

In one sentence

A JavaScript component that animates number changes with an odometer-style rolling effect, working in React, Vue, Svelte, and plain JavaScript with built-in accessibility support for reduced motion and screen readers.

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
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

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

What is it built with?

TypeScriptJavaScriptReactVueSveltenpm

How does it compare?

barvian/number-flowtypestack/class-transformerjakearchibald/idb
Stars7,3347,3307,326
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasyeasy
Complexity2/52/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

So what is it?

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

Frequently asked questions

What is number-flow?

A JavaScript component that animates number changes with an odometer-style rolling effect, working in React, Vue, Svelte, and plain JavaScript with built-in accessibility support for reduced motion and screen readers.

What language is number-flow written in?

Mainly TypeScript. The stack also includes TypeScript, JavaScript, React.

How hard is number-flow to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is number-flow for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.