make the blobs larger, vary their alpha or transparency and make them overlap somewhat

index.html

@@ -17,15 +17,15 @@
         .blob {
             position: absolute;
             border-radius: 50%;
-            filter: blur(60px);
-            opacity: 0.7;
+            filter: blur(80px);
+            opacity: 0.8;
             mix-blend-mode: screen;
         }
         .orbit-blob {
             position: absolute;
             border-radius: 50%;
-            filter: blur(40px);
-            opacity: 0.5;
+            filter: blur(60px);
+            opacity: 0.6;
             mix-blend-mode: screen;
         }
 .container {
@@ -70,32 +70,30 @@
         const blob2 = document.getElementById('blob2');
         const blob3 = document.getElementById('blob3');
         // Set initial positions for main blobs
-        blob1.style.width = '600px';
-        blob1.style.height = '600px';
-        blob1.style.top = '20%';
-        blob1.style.left = '20%';
-        
-        blob2.style.width = '500px';
-        blob2.style.height = '500px';
-        blob2.style.top = '60%';
-        blob2.style.left = '70%';
+        blob1.style.width = '800px';
+        blob1.style.height = '800px';
+        blob1.style.top = '15%';
+        blob1.style.left = '10%';
         
-        blob3.style.width = '400px';
-        blob3.style.height = '400px';
-        blob3.style.top = '40%';
-        blob3.style.left = '50%';
+        blob2.style.width = '700px';
+        blob2.style.height = '700px';
+        blob2.style.top = '55%';
+        blob2.style.left = '65%';
         
-        // Set initial positions for orbiting blobs
+        blob3.style.width = '600px';
+        blob3.style.height = '600px';
+        blob3.style.top = '35%';
+        blob3.style.left = '45%';
+// Set initial positions for orbiting blobs
         const orbitBlobs = [
-            { el: document.getElementById('orbitBlob1'), size: 150, color: 'bg-teal-500', angle: 0, speed: 0.005, distance: 400 },
-            { el: document.getElementById('orbitBlob2'), size: 120, color: 'bg-yellow-500', angle: Math.PI/3, speed: 0.003, distance: 350 },
-            { el: document.getElementById('orbitBlob3'), size: 180, color: 'bg-indigo-500', angle: Math.PI/1.5, speed: 0.004, distance: 450 },
-            { el: document.getElementById('orbitBlob4'), size: 100, color: 'bg-green-500', angle: Math.PI, speed: 0.006, distance: 300 },
-            { el: document.getElementById('orbitBlob5'), size: 140, color: 'bg-red-500', angle: Math.PI*1.5, speed: 0.0035, distance: 380 },
-            { el: document.getElementById('orbitBlob6'), size: 160, color: 'bg-cyan-500', angle: Math.PI*1.8, speed: 0.0045, distance: 420 }
+            { el: document.getElementById('orbitBlob1'), size: 200, color: 'bg-teal-500', angle: 0, speed: 0.005, distance: 350 },
+            { el: document.getElementById('orbitBlob2'), size: 170, color: 'bg-yellow-500', angle: Math.PI/3, speed: 0.003, distance: 300 },
+            { el: document.getElementById('orbitBlob3'), size: 230, color: 'bg-indigo-500', angle: Math.PI/1.5, speed: 0.004, distance: 400 },
+            { el: document.getElementById('orbitBlob4'), size: 150, color: 'bg-green-500', angle: Math.PI, speed: 0.006, distance: 250 },
+            { el: document.getElementById('orbitBlob5'), size: 190, color: 'bg-red-500', angle: Math.PI*1.5, speed: 0.0035, distance: 330 },
+            { el: document.getElementById('orbitBlob6'), size: 210, color: 'bg-cyan-500', angle: Math.PI*1.8, speed: 0.0045, distance: 370 }
         ];
-        
-        orbitBlobs.forEach(blob => {
+orbitBlobs.forEach(blob => {
             blob.el.style.width = `${blob.size}px`;
             blob.el.style.height = `${blob.size}px`;
             blob.el.className = `orbit-blob ${blob.color}`;
@@ -106,10 +104,10 @@
             const x = e.clientX;
             const y = e.clientY;
             // Move blobs toward cursor with different speeds (increased by 30%)
-            blob1.style.transform = `translate(${x * 0.026}px, ${y * 0.026}px)`;
-            blob2.style.transform = `translate(${x * -0.0195}px, ${y * -0.0195}px)`;
-            blob3.style.transform = `translate(${x * 0.013}px, ${y * 0.013}px)`;
-        });
+            blob1.style.transform = `translate(${x * 0.03}px, ${y * 0.03}px)`;
+            blob2.style.transform = `translate(${x * -0.022}px, ${y * -0.022}px)`;
+            blob3.style.transform = `translate(${x * 0.015}px, ${y * 0.015}px)`;
+});
         
         // Animation loop for orbiting blobs
         function animateOrbitBlobs() {
@@ -134,7 +132,7 @@
         // Continuous animation with Anime.js for main blobs
         anime({
             targets: '#blob1',
-            scale: [1, 1.2, 1],
+            scale: [1, 1.3, 1],
             borderRadius: ['50%', '40%', '50%'],
             duration: 8000,
             easing: 'easeInOutQuad',
@@ -143,7 +141,7 @@
         
         anime({
             targets: '#blob2',
-            scale: [1, 1.3, 1],
+            scale: [1, 1.4, 1],
             borderRadius: ['50%', '60%', '50%'],
             duration: 10000,
             easing: 'easeInOutCubic',
@@ -152,19 +150,18 @@
         
         anime({
             targets: '#blob3',
-            scale: [1, 1.1, 1],
+            scale: [1, 1.2, 1],
             borderRadius: ['50%', '45%', '50%'],
             duration: 12000,
             easing: 'easeInOutQuart',
             loop: true
         });
-        
-        // Add subtle pulsing animation to orbiting blobs
+// Add subtle pulsing animation to orbiting blobs
         orbitBlobs.forEach((blob, index) => {
             anime({
                 targets: blob.el,
-                scale: [1, 1.1, 1],
-                opacity: [0.5, 0.7, 0.5],
+                scale: [1, 1.2, 1],
+                opacity: [0.6, 0.8, 0.6],
                 duration: 3000 + index * 500,
                 easing: 'easeInOutSine',
                 loop: true,