Add Framer Motion and prepare animated counter component

app/components/AnimatedCounter.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+
+interface Props {
+  value: number;
+}
+
+export const AnimatedCounter = ({ value }: Props) => {
+  const digits = String(value).split("");
+
+  return (
+    <AnimatePresence mode="popLayout">
+      {digits.map((digit, index) => (
+        <motion.span
+          key={index + digit}
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -20 }}
+          transition={{ duration: 0.3, ease: "easeOut" }}
+          className="relative inline-block text-center"
+        >
+          {digit}
+        </motion.span>
+      ))}
+    </AnimatePresence>
+  );
+};

package.json

@@ -41,6 +41,7 @@
     "d3": "^7.8.5",
     "date-fns": "^3.6.0",
     "drizzle-orm": "^0.33.0",
+    "framer-motion": "12.0.0-alpha.1",
     "lucide-react": "^0.381.0",
     "next": "^15.0.3",
     "react": "19.0.0-rc.1",