Refactor clustering logic

Reassess and modify the clustering logic to improve distribution and organization within the codebase.
[skip gpt_engineer]

src/components/game/animations/MemeAnimation.tsx

@@ -4,29 +4,23 @@ import { motion, AnimatePresence } from 'framer-motion';
 interface MemeSymbol {
   id: number;
   symbol: string;
-  x: number;
+  direction: number; // angle in degrees
-  y: number;
+  distance: number;
-  scale: number;
-  delay: number;
 }
 
 export const MemeAnimation = ({ className = '' }: { className?: string }) => {
-  // Create a grid of starting positions
   const createMemeWave = () => {
     const memes: MemeSymbol[] = [];
     const symbols = ['💡', '🎯', '📱', '🔄', '🌐', '💫'];
     
-    // Create a wider spread of meme symbols
+    // Create memes that will spread out in different directions
-    for (let i = 0; i < 9; i++) {
+    for (let i = 0; i < 12; i++) {
       const baseSymbol = symbols[Math.floor(Math.random() * symbols.length)];
-      // Distribute across the full width (10-90%) and height (10-90%)
       memes.push({
         id: i,
         symbol: baseSymbol,
-        x: 10 + (Math.random() * 80), // Spread between 10% and 90% of width
+        direction: (i * 30) + Math.random() * 15, // Spread in different directions (0-360 degrees)
-        y: 10 + (Math.random() * 80), // Spread between 10% and 90% of height
+        distance: 40 + Math.random() * 40, // Variable distance from center (40-80%)
-        scale: 0.8 + Math.random() * 0.4,
-        delay: i * 0.15 // Stagger the animations
       });
     }
     return memes;
@@ -52,60 +46,65 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
         ))}
       </div>
 
-      {/* Meme symbols with viral spread effect */}
+      {/* Central source of memes */}
+      <motion.div
+        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-3xl"
+        initial={{ scale: 0 }}
+        animate={{ scale: [0, 1.2, 1] }}
+        transition={{ duration: 0.5 }}
+      >
+        🌟
+      </motion.div>
+
+      {/* Spreading meme symbols */}
       <AnimatePresence>
-        {memeSymbols.map((meme) => (
+        {memeSymbols.map((meme, index) => {
-          <motion.div
+          const angle = meme.direction * (Math.PI / 180);
-            key={meme.id}
+          const delay = index * 0.1;
-            className="absolute text-2xl select-none"
+
-            initial={{
+          return (
-              x: `${meme.x}%`,
-              y: `${meme.y}%`,
-              scale: 0,
-              opacity: 0
-            }}
-            animate={{
-              scale: meme.scale,
-              opacity: 1,
-              x: [
-                `${meme.x}%`,
-                `${meme.x + (Math.random() * 60 - 30)}%`, // Wider movement range
-                `${meme.x + (Math.random() * 80 - 40)}%`  // Even wider final position
-              ],
-              y: [
-                `${meme.y}%`,
-                `${meme.y + (Math.random() * 60 - 30)}%`, // Wider movement range
-                `${meme.y + (Math.random() * 80 - 40)}%`  // Even wider final position
-              ]
-            }}
-            transition={{
-              delay: meme.delay,
-              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"
+              key={meme.id}
-              initial={{ scale: 1, opacity: 0 }}
+              className="absolute text-2xl select-none"
+              initial={{
+                scale: 0,
+                x: '50%',
+                y: '50%',
+                opacity: 0,
+              }}
               animate={{
-                scale: [1, 1.5, 2],
+                scale: 1,
-                opacity: [0.5, 0.2, 0],
+                opacity: 1,
+                x: `calc(50% + ${Math.cos(angle) * meme.distance}%)`,
+                y: `calc(50% + ${Math.sin(angle) * meme.distance}%)`,
               }}
               transition={{
                 duration: 1.5,
-                repeat: Infinity,
+                delay,
-                delay: meme.delay + 0.5
+                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>
-          </motion.div>
+          );
-        ))}
+        })}
       </AnimatePresence>
 
       {/* Floating engagement indicators */}
@@ -114,11 +113,12 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
           key={`indicator-${i}`}
           className="absolute text-sm text-yellow-500/70"
           initial={{
-            x: `${Math.random() * 100}%`,
+            x: '50%',
-            y: '100%',
+            y: '50%',
             opacity: 0
           }}
           animate={{
+            x: `${15 + Math.random() * 70}%`,
             y: '-20%',
             opacity: [0, 1, 0],
           }}