Vercel Animate Count

1"use client";
2 
3import { useEffect, useState } from "react";
4import { AnimatePresence, motion } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7 
8export const ANIMATE_COUNT_DURATION_MS = 450;
9 
10const EASING = [0.23, 0.88, 0.26, 0.92] as const;
11 
12interface AnimateCountProps {
13  children: number;
14  animate?: boolean;
15  className?: string;
16}
17 
18function AnimateCount({
19  children: count,
20  animate = true,
21  className,
22}: AnimateCountProps) {
23  const [prev, setPrev] = useState<number | null>(null);
24  const [displayCount, setDisplayCount] = useState(count);
25 
26  useEffect(() => {
27    if (animate) setPrev(displayCount);
28    setDisplayCount(count);
29    // eslint-disable-next-line react-hooks/exhaustive-deps
30  }, [count, animate]);
31 
32  return (
33    <div
34      className={cn(
35        "grid place-items-center tabular-nums tracking-tight",
36        "[&>*]:col-start-1 [&>*]:row-start-1",
37        className,
38      )}
39    >
40      <AnimatePresence initial={false}>
41        {animate && prev !== null && prev !== displayCount && (
42          <motion.div
43            key={`exit-${prev}-${displayCount}`}
44            aria-hidden
45            initial={{ opacity: 1, filter: "blur(0px)", y: 0 }}
46            animate={{ opacity: 0, filter: "blur(2px)", y: -12 }}
47            transition={{
48              duration: ANIMATE_COUNT_DURATION_MS / 1000,
49              ease: EASING,
50            }}
51            onAnimationComplete={() => setPrev(null)}
52          >
53            {prev}
54          </motion.div>
55        )}
56      </AnimatePresence>
57      <motion.div
58        key={`enter-${displayCount}`}
59        initial={animate ? { opacity: 0, filter: "blur(2px)", y: 8 } : false}
60        animate={{ opacity: 1, filter: "blur(0px)", y: 0 }}
61        transition={{
62          duration: ANIMATE_COUNT_DURATION_MS / 1000,
63          ease: EASING,
64        }}
65      >
66        {displayCount}
67      </motion.div>
68    </div>
69  );
70}
71 
72export { AnimateCount, type AnimateCountProps };