AnimateNumber

AnimateNumber is a lightweight (2.5kb) React component for creating beautiful number animations with Motion. It's perfect for counters, dynamic pricing, countdowns, and more.

<AnimateNumber>{count}</AnimateNumber>

Built on top of Motion's powerful layout animations, AnimateNumber allows you to leverage all of Motion's existing transition settings, like spring and tween, to create fluid and engaging effects.

AnimateNumber is exclusive to Motion+ members. Motion+ is a one-time payment, lifetime membership that unlocks exclusive components, premium examples and access to a private Discord community.

Features

• Built on Motion: Leverages Motion's robust animation engine, allowing you to use familiar transition props like spring, duration, and ease.

• Lightweight: Adds only 2.5kb on top of Motion.

• Advanced formatting: Uses the built-in Intl.NumberFormat for powerful, locale-aware number formatting (e.g., currency, compact notation).

• Customisable: Provides distinct CSS classes for each part of the number (prefix, integer, fraction, suffix) for full styling control.

Install

First, add the Motion+ library to your project using your private token. You need to be a Motion+ member to generate a private token.

npm install https://api.motion.dev/registry\?package\=motion-plus\&version\=1.5.4\&token

Once installed, AnimateNumber can be imported via motion-plus/react:

import { AnimateNumber } from "motion-plus/react"

Usage

AnimateNumber accepts a single child, a number.

<AnimateNumber>300</AnimateNumber>

When this number changes, it'll animate to its latest value.

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <AnimateNumber>{count}</AnimateNumber>
    </>
  )
}

Customise animation

The transition prop accepts Motion for React's transition options.

<AnimateNumber transition={{ type: "spring" }}>

transition accepts value-specific transition settings, so it's possible to set specific transitions for layout, y and opacity:

<AnimateNumber transition={{
  layout: { duration: 0.3 },
  opacity: { ease: "linear" },
  y: { type: "spring", visualDuration: 0.4, bounce: 0.2 }
}}>

Formatting numbers

AnimateNumber uses the browser's built-in Intl.NumberFormat to format numbers and, as such, exposes some of its formatting options.

<AnimateNumber format={{ notation: "compact" }}>

Adding a prefix/suffix

It's also possible to prefix and suffix the number with custom text content:

<AnimateNumber
  format={{ style: "currency", currency: "USD" }}
  locales="en-US"
  suffix="/mo"
>

Styling

Each section of the number has a unique class that can be used to target it with CSS.

The available classes are:

• number-section-pre: prefix and other text before the number

• number-section-integer: Before the decimal

• number-section-fraction: After the decimal

• number-section-post: suffix and other text after the number

Options

transition

Accepts Motion for React's transition options.

prefix

Custom text content to render before the number.

suffix

Custom text content to render after the number.

format

Accepts Intl.NumberFormat options.

locales

Accepts Intl.NumberFormat locales argument.

// Will render as US$300 outside US
<AnimateNumber format={{ currency: "USD", style: "currency" }}>
  300
</AnimateNumber>

// Will always render as $300
<AnimateNumber locales="en-US" format={{ currency: "USD", style: "currency" }}>
  300
</AnimateNumber>