Wensity

Count Up Animation

A count up animation for React: every digit rolls into place, in any number format.

count upnumber counternumber tickeranimated counterrolling numberstats
Count Up Animation component preview

Overview

Count Up Animation is a React and Tailwind CSS number counter that rolls each digit up to its value as it scrolls into view, in Next.js or any React app. Roll turns each digit straight to its new figure, and count spins the low digits a full lap first. Intl.NumberFormat handles currency, percent, compact notation and locale grouping. Columns take each glyph's measured width, so proportional fonts stay evenly spaced. The final figure stays in the HTML for crawlers and screen readers, and reduced motion skips to it. Until it runs it shows from, which is 0 by default.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add count-up-animation

Usage

Import CountUpAnimation from @/components/wensity/count-up-animation and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { NumberTicker } from "@/components/wensity/count-up-animation";


export default function Example() {
  return (
    <NumberTicker
      value={2481930}
      format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
      className="text-7xl font-extrabold tracking-tight"
    />
  );
}

Props

PropTypeDefaultDescription
valuenumber-The number to show. Changing it animates from whatever is on screen.
fromnumber0Where the first run starts.
variant"roll" | "count""roll"roll turns each digit straight to its new value; count spins the digits like a counter, low digits turning most.
durationnumber1 (roll), 2.2 (count)Run length in seconds.
delaynumber0Seconds to wait before the first run.
trigger"view" | "mount""view"Start when scrolled into view, or as soon as it mounts.
formatIntl.NumberFormatOptions{}Currency, percent, compact notation and decimal places.
localesstring | string[]browser localeLocale for digits, grouping and symbols.
prefixstring""Text before the number.
suffixstring""Text after the number.
onComplete() => void-Called when a run settles.

Related components

  • Text Shimmer component preview

    Text Shimmer

    A CSS shimmer sweep for headlines, one single element and entirely GPU-friendly.

  • Text Flip component preview

    Text Flip

    A 3D character flip on hover, staggered and springy across every single letter.

  • Text Morphing component preview

    Text Morphing

    Blur-morphing headlines that cycle phrases with a gooey, seamless crossfade.

  • Text Char Slide component preview

    Text Char Slide

    A per-character slide-left cascade with a cleanly staggered entrance timing.

Featured in React text animations.