Animate points

components/RevealScreen.tsx

@@ -1,10 +1,31 @@
-import React, { useEffect } from 'react';
-import { motion } from 'framer-motion';
+import React, { useEffect, useState } from 'react';
+import { motion, useSpring, useTransform } from 'framer-motion';
 import { Check, X, Flame, Trophy } from 'lucide-react';
 import { AnswerOption, Player, GameRole } from '../types';
 import { SHAPES, COLORS } from '../constants';
 import confetti from 'canvas-confetti';
 
+const AnimatedCounter: React.FC<{ from: number; to: number }> = ({ from, to }) => {
+  const springValue = useSpring(from, { 
+    stiffness: 50, 
+    damping: 20,
+  });
+  const [displayValue, setDisplayValue] = useState(from);
+  
+  useEffect(() => {
+    springValue.set(to);
+  }, [to, springValue]);
+  
+  useEffect(() => {
+    const unsubscribe = springValue.on('change', (latest) => {
+      setDisplayValue(Math.round(Number(latest)));
+    });
+    return unsubscribe;
+  }, [springValue]);
+  
+  return <span>{displayValue}</span>;
+};
+
 interface RevealScreenProps {
   isCorrect: boolean;
   pointsEarned: number;
@@ -148,7 +169,7 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
             )}
             
             <div className="mt-8 bg-black/20 px-6 py-2 rounded-xl text-xl font-bold">
-                Total Score: {newScore}
+                Total Score: <AnimatedCounter from={newScore - (pointsEarned || 0)} to={newScore} />
             </div>
         </motion.div>