diff --git a/src/components/game/animations/NetworkAnimation.tsx b/src/components/game/animations/NetworkAnimation.tsx index e26f82d..7e9c75c 100644 --- a/src/components/game/animations/NetworkAnimation.tsx +++ b/src/components/game/animations/NetworkAnimation.tsx @@ -13,12 +13,12 @@ export const NetworkAnimation = ({ className = '' }: { className?: string }) => const containerRef = useRef(null); // Generate nodes with different sizes and positions - const nodes: Node[] = Array.from({ length: 12 }, (_, i) => ({ + const nodes: Node[] = Array.from({ length: 15 }, (_, i) => ({ id: i, - x: 20 + Math.random() * 60, // Random position between 20-80% + x: 20 + Math.random() * 60, y: 20 + Math.random() * 60, - size: 2 + Math.random() * 2, // Random size between 2-4 - delay: i * 0.1 // Staggered animation delay + size: 3 + Math.random() * 3, // Larger nodes (3-6px) + delay: i * 0.1 })); // Create pairs of nodes for connections @@ -27,7 +27,7 @@ export const NetworkAnimation = ({ className = '' }: { className?: string }) => id: `${node.id}-${otherNode.id}`, from: node, to: otherNode, - opacity: Math.random() * 0.3 + 0.1 // Random opacity between 0.1-0.4 + opacity: Math.random() * 0.5 + 0.2 // Higher opacity (0.2-0.7) })) ); @@ -45,15 +45,16 @@ export const NetworkAnimation = ({ className = '' }: { className?: string }) => y1={`${from.y}%`} x2={`${to.x}%`} y2={`${to.y}%`} - stroke="rgba(255, 215, 0, 0.2)" - strokeWidth="0.5" + stroke="rgba(255, 215, 0, 0.4)" // Brighter connections + strokeWidth="1" // Thicker lines initial={{ opacity: 0, pathLength: 0 }} animate={{ opacity: [0, opacity, opacity/2], - pathLength: [0, 1, 1] + pathLength: [0, 1, 1], + strokeWidth: [1, 2, 1] // Pulsing line thickness }} transition={{ - duration: 3, + duration: 2, repeat: Infinity, repeatType: "reverse", ease: "easeInOut", @@ -76,25 +77,25 @@ export const NetworkAnimation = ({ className = '' }: { className?: string }) => }} initial={{ scale: 0, opacity: 0 }} animate={{ - scale: [0, 1, 1.2, 1], - opacity: [0, 1, 0.8, 1], + scale: [0, 1.2, 1], + opacity: [0, 1, 0.8], x: [ + -15, + 15, -10, 10, - -5, - 5, 0 ], y: [ - -5, - 5, -10, 10, + -15, + 15, 0 ] }} transition={{ - duration: 8, + duration: 6, repeat: Infinity, repeatType: "reverse", ease: "easeInOut", @@ -103,13 +104,13 @@ export const NetworkAnimation = ({ className = '' }: { className?: string }) => > {/* Core node */} {/* Outer glow */} - {/* Particle effects */} - {Array.from({ length: 3 }).map((_, i) => ( + {/* Enhanced particle effects */} + {Array.from({ length: 4 }).map((_, i) => (