all of the blobs need to pick random directions to evolve their movement towards and the blobs could be a little larger and more blues and purples and pinks

script.js

@@ -1,7 +1,21 @@
+
 document.addEventListener('DOMContentLoaded', function() {
+    // Set random animation variables for each blob
+    const blobs = document.querySelectorAll('.blob');
+    blobs.forEach(blob => {
+        // Generate random values for translation and rotation
+        const tx = (Math.random() - 0.5) * 200;
+        const ty = (Math.random() - 0.5) * 200;
+        const r = (Math.random() - 0.5) * 360;
+        
+        // Set CSS variables for the float animation
+        blob.style.setProperty('--tx', `${tx}px`);
+        blob.style.setProperty('--ty', `${ty}px`);
+        blob.style.setProperty('--r', `${r}deg`);
+    });
+
     // Mouse move interaction
     document.addEventListener('mousemove', (e) => {
-        const blobs = document.querySelectorAll('.blob');
         const x = e.clientX / window.innerWidth;
         const y = e.clientY / window.innerHeight;
         
@@ -21,7 +35,6 @@ document.addEventListener('DOMContentLoaded', function() {
         const x = touch.clientX / window.innerWidth;
         const y = touch.clientY / window.innerHeight;
         
-        const blobs = document.querySelectorAll('.blob');
         blobs.forEach((blob, index) => {
             const moveX = (x - 0.5) * (index + 1) * 5;
             const moveY = (y - 0.5) * (index + 1) * 5;
@@ -31,9 +44,8 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // Reset transform when mouse leaves
     document.addEventListener('mouseleave', () => {
-        const blobs = document.querySelectorAll('.blob');
         blobs.forEach(blob => {
             blob.style.transform = '';
         });
     });
-});
+});

style.css

@@ -1,20 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
-
 @keyframes float {
-  0%, 100% {
+  0% {
     transform: translate(0, 0) rotate(0deg);
   }
-  25% {
-    transform: translate(20px, -20px) rotate(5deg);
-  }
-  50% {
-    transform: translate(-20px, 20px) rotate(-5deg);
-  }
-  75% {
-    transform: translate(10px, 10px) rotate(3deg);
+  100% {
+    transform: translate(var(--tx), var(--ty)) rotate(var(--r));
   }
 }
-
 @keyframes morph {
   0% {
     border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
@@ -70,79 +62,77 @@ body {
   animation: float 15s infinite ease-in-out;
   will-change: transform;
 }
-
 .blob-1 {
-  width: 500px;
-  height: 500px;
-  background: radial-gradient(circle, rgba(121,9,103,0.8) 0%, rgba(255,0,150,0.6) 100%);
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(121,9,103,0.8) 0%, rgba(150,0,255,0.6) 100%);
   top: 10%;
   left: 10%;
   animation: morph 18s infinite ease-in-out, float 20s infinite ease-in-out;
 }
 
 .blob-2 {
-  width: 400px;
-  height: 400px;
-  background: radial-gradient(circle, rgba(0,212,255,0.8) 0%, rgba(0,100,255,0.6) 100%);
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(circle, rgba(0,212,255,0.8) 0%, rgba(100,100,255,0.6) 100%);
   top: 20%;
   right: 15%;
   animation: morph 22s infinite ease-in-out reverse, float 25s infinite ease-in-out;
 }
 
 .blob-3 {
-  width: 350px;
-  height: 350px;
-  background: radial-gradient(circle, rgba(0,255,150,0.8) 0%, rgba(0,200,100,0.6) 100%);
+  width: 450px;
+  height: 450px;
+  background: radial-gradient(circle, rgba(150,0,255,0.8) 0%, rgba(100,0,200,0.6) 100%);
   bottom: 15%;
   left: 20%;
   animation: morph 20s infinite ease-in-out, float 18s infinite ease-in-out reverse;
 }
 
 .blob-4 {
-  width: 450px;
-  height: 450px;
-  background: radial-gradient(circle, rgba(255,200,0,0.8) 0%, rgba(255,150,0,0.6) 100%);
+  width: 550px;
+  height: 550px;
+  background: radial-gradient(circle, rgba(255,0,200,0.8) 0%, rgba(200,0,150,0.6) 100%);
   bottom: 10%;
   right: 10%;
   animation: morph 24s infinite ease-in-out reverse, float 22s infinite ease-in-out;
 }
 
 .blob-5 {
-  width: 300px;
-  height: 300px;
-  background: radial-gradient(circle, rgba(255,0,100,0.8) 0%, rgba(200,0,100,0.6) 100%);
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(circle, rgba(100,100,255,0.8) 0%, rgba(150,0,255,0.6) 100%);
   top: 40%;
   left: 40%;
   animation: morph 16s infinite ease-in-out, float 19s infinite ease-in-out;
 }
 
 .blob-6 {
-  width: 380px;
-  height: 380px;
-  background: radial-gradient(circle, rgba(100,100,255,0.8) 0%, rgba(50,50,200,0.6) 100%);
+  width: 480px;
+  height: 480px;
+  background: radial-gradient(circle, rgba(0,100,255,0.8) 0%, rgba(121,9,103,0.6) 100%);
   top: 5%;
   right: 30%;
   animation: morph 26s infinite ease-in-out reverse, float 21s infinite ease-in-out;
 }
 
 .blob-7 {
-  width: 320px;
-  height: 320px;
-  background: radial-gradient(circle, rgba(0,255,200,0.8) 0%, rgba(0,200,150,0.6) 100%);
+  width: 420px;
+  height: 420px;
+  background: radial-gradient(circle, rgba(200,0,255,0.8) 0%, rgba(150,0,200,0.6) 100%);
   bottom: 30%;
   left: 5%;
   animation: morph 19s infinite ease-in-out, float 17s infinite ease-in-out reverse;
 }
 
 .blob-8 {
-  width: 420px;
-  height: 420px;
-  background: radial-gradient(circle, rgba(255,100,200,0.8) 0%, rgba(200,50,150,0.6) 100%);
+  width: 520px;
+  height: 520px;
+  background: radial-gradient(circle, rgba(255,0,150,0.8) 0%, rgba(200,50,150,0.6) 100%);
   top: 30%;
   right: 5%;
   animation: morph 23s infinite ease-in-out reverse, float 24s infinite ease-in-out;
 }
-
 .animate-fade-in {
   animation: fadeIn 1.5s ease-out forwards;
 }