Animated Counter

Number counter that animates up from zero

counternumberprogress

Useto navigate between components

Preview

Active users

Code

TypeScript + React

'use client'

import { motion, useMotionValue, useTransform, animate } from 'framer-motion'
import { useEffect } from 'react'

export function CounterUp() {
  const count = useMotionValue(0)
  const rounded = useTransform(count, Math.round)

  useEffect(() => {
    const animation = animate(count, 1000, {
      duration: 2,
      ease: 'easeOut',
    })

    return animation.stop
  }, [count])

  return (
    <div className="text-center">
      <motion.div className="mb-2 text-6xl font-bold text-accent">
        {rounded}
      </motion.div>
      <p className="text-sm text-[var(--foreground)]/70">
        Active users
      </p>
    </div>
  )
}

How to Use

1Install Framer Motion: npm install framer-motion
2Copy the code from above
3Paste it into your project and customize as needed
4Colors are customizable via Tailwind CSS classes. The default theme uses dark mode colors defined in your globals.css file