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;
-  y: number;
-  scale: number;
-  delay: number;
+  direction: number; // angle in degrees
+  distance: 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
-    for (let i = 0; i < 9; i++) {
+    // 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)];
-      // 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
-        y: 10 + (Math.random() * 80), // Spread between 10% and 90% of height
-        scale: 0.8 + Math.random() * 0.4,
-        delay: i * 0.15 // Stagger the animations
+        direction: (i * 30) + Math.random() * 15, // Spread in different directions (0-360 degrees)
+        distance: 40 + Math.random() * 40, // Variable distance from center (40-80%)
       });
     }
     return memes;
@@ -52,43 +46,47 @@ 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) => {
+          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={{
-              x: `${meme.x}%`,
-              y: `${meme.y}%`,
                 scale: 0,
-              opacity: 0
+                x: '50%',
+                y: '50%',
+                opacity: 0,
               }}
               animate={{
-              scale: meme.scale,
+                scale: 1,
                 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
-              ]
+                x: `calc(50% + ${Math.cos(angle) * meme.distance}%)`,
+                y: `calc(50% + ${Math.sin(angle) * meme.distance}%)`,
               }}
               transition={{
-              delay: meme.delay,
-              duration: 2,
-              repeat: Infinity,
-              repeatType: "reverse",
-              ease: "easeInOut"
+                duration: 1.5,
+                delay,
+                ease: "easeOut"
               }}
             >
               {meme.symbol}
               
-            {/* Echo effect for viral spread visualization */}
+              {/* Echo effect */}
               <motion.div
                 className="absolute inset-0 text-yellow-500"
                 initial={{ scale: 1, opacity: 0 }}
@@ -99,13 +97,14 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
                 transition={{
                   duration: 1.5,
                   repeat: Infinity,
-                delay: meme.delay + 0.5
+                  delay: delay + 0.5
                 }}
               >
                 {meme.symbol}
               </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}%`,
-            y: '100%',
+            x: '50%',
+            y: '50%',
             opacity: 0
           }}
           animate={{
+            x: `${15 + Math.random() * 70}%`,
             y: '-20%',
             opacity: [0, 1, 0],
           }}