Animated Number Flip

1"use client";
2 
3import * as React from "react";
4import { motion, AnimatePresence } from "motion/react";
5import { cn } from "@/lib/utils";
6import { Card, CardContent } from "@/components/ui/card";
7 
8interface AnimatedNumberFlipProps {
9  value: number;
10  className?: string;
11}
12 
13export default function AnimatedNumberFlip({
14  value,
15  className,
16}: AnimatedNumberFlipProps) {
17  const [displayValue, setDisplayValue] = React.useState(value);
18 
19  React.useEffect(() => {
20    if (value !== displayValue) {
21      const timeout = setTimeout(() => setDisplayValue(value), 300);
22      return () => clearTimeout(timeout);
23    }
24  }, [value, displayValue]);
25 
26  return (
27    <Card
28      className={cn("w-24 h-24 flex items-center justify-center", className)}
29    >
30      <CardContent className="flex items-center justify-center p-0 text-4xl font-bold">
31        <div className="relative overflow-hidden h-12 w-10">
32          <AnimatePresence mode="popLayout" initial={false}>
33            <motion.span
34              key={value}
35              initial={{ y: -40, opacity: 0, rotateX: -90 }}
36              animate={{ y: 0, opacity: 1, rotateX: 0 }}
37              exit={{ y: 40, opacity: 0, rotateX: 90 }}
38              transition={{ duration: 0.3 }}
39              className="absolute inset-0 flex items-center justify-center"
40            >
41              {value}
42            </motion.span>
43          </AnimatePresence>
44        </div>
45      </CardContent>
46    </Card>
47  );
48}