AnimatedCounter

A smooth animated counter component for displaying numerical values.

Usage

import { AnimatedCounter } from "@/components/ui/animated-counter"

export default function Example() {
  const [value, setValue] = useState(1234.56)

  return (
    <div className="text-3xl font-bold">
      <AnimatedCounter
        value={value}
        formatOptions={{
          style: "currency",
          currency: "USD"
        }}
      />
    </div>
  )
}

Props

value

The numerical value to display and animate.

Type: number

formatOptions

Options for number formatting using Intl.NumberFormat.

Type: Intl.NumberFormatOptions (optional)

Features

Smooth Animation

Uses Framer Motion spring animations for smooth, natural-feeling transitions between values.

Intersection Observer

Animation starts when the counter comes into view, improving performance and user experience.

Flexible Formatting

Supports all Intl.NumberFormat options for formatting currencies, percentages, and more.