Move Emojis Upward in Animation

Updated the MemeAnimation component to change the direction of emoji movement from the center outward to an upward trajectory, simulating reactions in a livestream.
[skip gpt_engineer]

src/components/game/animations/MemeAnimation.tsx

@@ -1,32 +1,34 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 
-interface MemeSymbol {
+interface Emoji {
   id: number;
   symbol: string;
-  direction: number; // angle in degrees
-  distance: number;
+  x: number;
 }
 
 export const MemeAnimation = ({ className = '' }: { className?: string }) => {
-  const createMemeWave = () => {
-    const memes: MemeSymbol[] = [];
-    const symbols = ['💡', '🎯', '📱', '🔄', '🌐', '💫'];
+  const [emojis, setEmojis] = useState<Emoji[]>([]);
+  const symbols = ['💡', '🎯', '📱', '🔄', '🌐', '💫', '❤️', '⭐', '🔁'];
 
-    // Create memes that will spread out in different directions
-    for (let i = 0; i < 12; i++) {
-      const baseSymbol = symbols[Math.floor(Math.random() * symbols.length)];
-      memes.push({
-        id: i,
-        symbol: baseSymbol,
-        direction: (i * 30) + Math.random() * 15, // Spread in different directions (0-360 degrees)
-        distance: 40 + Math.random() * 40, // Variable distance from center (40-80%)
+  useEffect(() => {
+    const interval = setInterval(() => {
+      // Add new emoji
+      setEmojis(current => {
+        const newEmoji = {
+          id: Date.now(),
+          symbol: symbols[Math.floor(Math.random() * symbols.length)],
+          x: Math.random() * 80 + 10, // Random x position between 10% and 90%
+        };
+        return [...current, newEmoji];
       });
-    }
-    return memes;
-  };
 
-  const memeSymbols = createMemeWave();
+      // Clean up old emojis
+      setEmojis(current => current.filter(emoji => Date.now() - emoji.id < 3000));
+    }, 300); // Add new emoji every 300ms
+
+    return () => clearInterval(interval);
+  }, []);
 
   return (
     <div className={`relative w-full h-40 overflow-hidden bg-black/20 rounded-lg ${className}`}>
@@ -46,9 +48,9 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
         ))}
       </div>
 
-      {/* Central source of memes */}
+      {/* Central source icon */}
       <motion.div
-        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-3xl"
+        className="absolute bottom-0 left-1/2 -translate-x-1/2 text-3xl"
         initial={{ scale: 0 }}
         animate={{ scale: [0, 1.2, 1] }}
         transition={{ duration: 0.5 }}
@@ -56,82 +58,41 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
         🌟
       </motion.div>
 
-      {/* Spreading meme symbols */}
+      {/* Floating emojis */}
       <AnimatePresence>
-        {memeSymbols.map((meme, index) => {
-          const angle = meme.direction * (Math.PI / 180);
-          const delay = index * 0.1;
-
-          return (
-            <motion.div
-              key={meme.id}
-              className="absolute text-2xl select-none"
-              initial={{
-                scale: 0,
-                x: '50%',
-                y: '50%',
-                opacity: 0,
-              }}
-              animate={{
-                scale: 1,
-                opacity: 1,
-                x: `calc(50% + ${Math.cos(angle) * meme.distance}%)`,
-                y: `calc(50% + ${Math.sin(angle) * meme.distance}%)`,
-              }}
-              transition={{
-                duration: 1.5,
-                delay,
-                ease: "easeOut"
-              }}
-            >
-              {meme.symbol}
-              
-              {/* Echo effect */}
-              <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: delay + 0.5
-                }}
-              >
-                {meme.symbol}
-              </motion.div>
-            </motion.div>
-          );
-        })}
+        {emojis.map((emoji) => (
+          <motion.div
+            key={emoji.id}
+            className="absolute text-2xl"
+            initial={{ 
+              y: '100%',
+              x: `${emoji.x}%`,
+              opacity: 0,
+              scale: 0.5
+            }}
+            animate={{ 
+              y: '-100%',
+              opacity: [0, 1, 1, 0],
+              scale: [0.5, 1, 1, 0.8]
+            }}
+            exit={{ opacity: 0 }}
+            transition={{ 
+              duration: 3,
+              ease: "easeOut",
+              opacity: {
+                duration: 3,
+                times: [0, 0.1, 0.8, 1]
+              },
+              scale: {
+                duration: 3,
+                times: [0, 0.1, 0.8, 1]
+              }
+            }}
+          >
+            {emoji.symbol}
+          </motion.div>
+        ))}
       </AnimatePresence>
-
-      {/* Floating engagement indicators */}
-      {[...Array(5)].map((_, i) => (
-        <motion.div
-          key={`indicator-${i}`}
-          className="absolute text-sm text-yellow-500/70"
-          initial={{
-            x: '50%',
-            y: '50%',
-            opacity: 0
-          }}
-          animate={{
-            x: `${15 + Math.random() * 70}%`,
-            y: '-20%',
-            opacity: [0, 1, 0],
-          }}
-          transition={{
-            duration: 2,
-            repeat: Infinity,
-            delay: i * 0.5,
-            ease: "linear"
-          }}
-        >
-          {['🔁', '❤️', '⭐'][Math.floor(Math.random() * 3)]}
-        </motion.div>
-      ))}
     </div>
   );
 };