Fix TypeScript errors in MemeAnimation

Resolved TypeScript errors in `MemeAnimation.tsx` related to type assignments for animation properties. Adjusted the types to ensure compatibility with the expected string types.
[skip gpt_engineer]

src/components/game/animations/MemeAnimation.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 
 interface MemeSymbol {
   id: number;
@@ -54,28 +54,20 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
       </div>
 
       {/* Meme symbols with viral spread effect */}
-      {memeSymbols.map((meme) => (
+      <AnimatePresence>
-        <motion.div
+        {memeSymbols.map((meme) => (
-          key={meme.id}
+          <motion.div
-          className="absolute text-2xl select-none"
+            key={meme.id}
-          initial={{
+            className="absolute text-2xl select-none"
-            x: `${meme.x}%`,
+            initial={{
-            y: `${meme.y}%`,
+              x: `${meme.x}%`,
-            scale: 0,
+              y: `${meme.y}%`,
-            opacity: 0
+              scale: 0,
-          }}
+              opacity: 0
-          animate={[
+            }}
-            // First appear and pulse
+            animate={{
-            {
               scale: meme.scale,
               opacity: 1,
-              transition: {
-                delay: meme.delay,
-                duration: 0.3
-              }
-            },
-            // Then spread out with copies
-            {
               x: [
                 `${meme.x}%`,
                 `${meme.x + (Math.random() * 40 - 20)}%`,
@@ -86,36 +78,36 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
                 `${meme.y + (Math.random() * 40 - 20)}%`,
                 `${meme.y + (Math.random() * 60 - 30)}%`
               ],
-              transition: {
-                delay: meme.delay + 0.3,
-                duration: 2,
-                repeat: Infinity,
-                repeatType: "reverse",
-                ease: "easeInOut"
-              }
-            }
-          ]}
-        >
-          {meme.symbol}
-          
-          {/* Echo effect for viral spread visualization */}
-          <motion.div
-            className="absolute inset-0 text-yellow-500"
-            initial={{ scale: 1, opacity: 0 }}
-            animate={{
-              scale: [1, 1.5, 2],
-              opacity: [0.5, 0.2, 0],
             }}
             transition={{
-              duration: 1.5,
+              delay: meme.delay,
+              duration: 2,
               repeat: Infinity,
-              delay: meme.delay + 0.5
+              repeatType: "reverse",
+              ease: "easeInOut"
             }}
           >
             {meme.symbol}
+            
+            {/* Echo effect for viral spread visualization */}
+            <motion.div
+              className="absolute inset-0 text-yellow-500"
+              initial={{ scale: 1, opacity: 0 }}
+              animate={{
+                scale: [1, 1.5, 2],
+                opacity: [0.5, 0.2, 0],
+              }}
+              transition={{
+                duration: 1.5,
+                repeat: Infinity,
+                delay: meme.delay + 0.5
+              }}
+            >
+              {meme.symbol}
+            </motion.div>
           </motion.div>
-        </motion.div>
+        ))}
-      ))}
+      </AnimatePresence>
 
       {/* Floating engagement indicators */}
       {[...Array(5)].map((_, i) => (