1
npm i framer-motion react-confetti

1
import { useState, useEffect } from 'react';
2
import { motion, useMotionValue, useTransform, animate, useAnimationControls } from 'framer-motion';
3
import Confetti from 'react-confetti';
4

5
const CountUp = ({
6
  target, // ? The final number to reach
7
  start = 0, // ? The number to start from
8
  duration = 1, // ? The duration of the animation
9
  confettiDuration = 10, // ? The duration of the confetti animation
10
  className = '' // ? Additional class names
11
}: {
12
  target: number;
13
  start?: number;
14
  duration?: number;
15
  confettiDuration?: number;
16
  className?: string;
17
}) => {
18
  const [showConfetti, setShowConfetti] = useState(false);
19
  const count = useMotionValue(start);
20
  const roundedCount = useTransform(count, (latest) => Math.floor(latest));
21
  const numberControls = useAnimationControls();
22

23
  useEffect(() => {
24
    const controls = animate(count, target, {
25
      duration,
26
      ease: 'easeOut'
27
    });
28

29
    controls.then(() => {
30
      setShowConfetti(true);
31
      numberControls.start('end');
32
      setTimeout(() => setShowConfetti(false), confettiDuration * 1000);
33
    });
34

35
    return () => controls.stop();
36
  }, [target, count]);
37

38
  return (
39
    <div className="relative flex items-center justify-center p-4">
40
      {showConfetti && (
41
        <div className="absolute h-full w-full">
42
          <Confetti width={350} height={350} className="rounded-full h-full w-full" />
43
        </div>
44
      )}
45

46
      <motion.span
47
        variants={{
48
          end: {
49
            scale: [1, 1.1, 1],
50
            transition: {
51
              duration: 0.4,
52
              ease: 'easeOut'
53
            }
54
          }
55
        }}
56
        animate={numberControls}
57
        className={`text-white text-center z-10 ${className}`}
58
      >
59
        {roundedCount}
60
      </motion.span>
61
    </div>
62
  );
63
};
64

65
export default CountUp;