Спустя некоторе время объекты становятся нефизичными, также они слишком сильно реагируют на мышку

index.html

@@ -55,31 +55,15 @@
             border-radius: 50%;
             filter: blur(40px);
             opacity: 0.3;
-            animation: float 20s infinite ease-in-out;
             will-change: transform;
+            transition: transform 0.1s ease-out;
         }
-        
-        @keyframes float {
-            0%, 100% {
-                transform: translate(0, 0) scale(1);
-            }
-            25% {
-                transform: translate(100px, -100px) scale(1.1);
-            }
-            50% {
-                transform: translate(-100px, 100px) scale(0.9);
-            }
-            75% {
-                transform: translate(50px, 50px) scale(1.05);
-            }
-        }
-.blob1 {
+        .blob1 {
             width: 300px;
             height: 300px;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             top: 10%;
             left: 10%;
-            animation-delay: 0s;
         }
         
         .blob2 {
@@ -88,7 +72,6 @@
             background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
             top: 60%;
             right: 10%;
-            animation-delay: 3s;
         }
         
         .blob3 {
@@ -97,7 +80,6 @@
             background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
             bottom: 10%;
             left: 30%;
-            animation-delay: 5s;
         }
         
         .blob4 {
@@ -106,7 +88,6 @@
             background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
             top: 30%;
             right: 30%;
-            animation-delay: 7s;
         }
         
         .blob5 {
@@ -115,7 +96,6 @@
             background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
             bottom: 20%;
             right: 20%;
-            animation-delay: 10s;
         }
 .header-gradient {
             background: linear-gradient(135deg, #00d4ff 0%, #ff00ff 50%, #00ff88 100%);
@@ -683,52 +663,42 @@
         </div>
     </footer>
     <script>
-        // Physics-based mouse interaction with floating blobs - Enhanced version with inertia
+        // Physics-based mouse interaction with floating blobs - Balanced version
         const demoSection = document.getElementById('demo');
         const blobs = demoSection.querySelectorAll('.floating-blob');
-        // Store blob physics data with enhanced properties
+        // Store blob physics data with balanced properties
         const blobPhysics = [];
         blobs.forEach((blob, index) => {
             const rect = blob.getBoundingClientRect();
             const demoRect = demoSection.getBoundingClientRect();
-            const angle = (Math.PI * 2 * index) / blobs.length + Math.random() * 0.5;
-            const speed = 1 + Math.random() * 2;
+            const angle = (Math.PI * 2 * index) / blobs.length;
+            const speed = 0.5 + Math.random() * 0.5;
             blobPhysics.push({
                 element: blob,
                 x: rect.left - demoRect.left + rect.width / 2,
                 y: rect.top - demoRect.top + rect.height / 2,
-                vx: Math.cos(angle) * speed, // Initial velocity based on angle
+                vx: Math.cos(angle) * speed,
                 vy: Math.sin(angle) * speed,
                 baseX: rect.left - demoRect.left + rect.width / 2,
                 baseY: rect.top - demoRect.top + rect.height / 2,
-                mass: 1 + index * 0.3, // Slightly different masses
-                damping: 0.995, // Very low damping for continuous movement
-                springForce: 0, // No spring force - free floating
-                maxVelocity: 8,
-                repulsionRadius: 250,
-                inertia: 0.999, // Very high inertia
-                continuousMotion: true // Enable continuous motion
+                mass: 1 + index * 0.2,
+                damping: 0.98, // Moderate damping
+                springForce: 0.002, // Gentle spring force to return to base
+                maxVelocity: 3,
+                repulsionRadius: 150, // Reduced radius
+                inertia: 0.98, // Balanced inertia
+                continuousMotion: false // Disable continuous motion for more stability
             });
         });
-let mouseX = 0;
+
+        let mouseX = 0;
         let mouseY = 0;
         let isMouseInSection = false;
-        let lastMouseX = 0;
-        let lastMouseY = 0;
-        let mouseVx = 0;
-        let mouseVy = 0;
         
         demoSection.addEventListener('mousemove', (e) => {
             const rect = demoSection.getBoundingClientRect();
-            lastMouseX = mouseX;
-            lastMouseY = mouseY;
             mouseX = e.clientX - rect.left;
             mouseY = e.clientY - rect.top;
-            
-            // Calculate mouse velocity for dynamic interaction
-            mouseVx = mouseX - lastMouseX;
-            mouseVy = mouseY - lastMouseY;
-            
             isMouseInSection = true;
         });
         
@@ -736,70 +706,61 @@ let mouseX = 0;
             isMouseInSection = false;
         });
         
-        // Animation loop for enhanced physics
+        // Animation loop for balanced physics
         function animateBlobs() {
             blobPhysics.forEach((blob, index) => {
                 // Reset forces
                 let fx = 0;
                 let fy = 0;
-                // Mouse repulsion force with velocity consideration - continuous interaction
+                
+                // Gentle mouse repulsion force
                 if (isMouseInSection) {
                     const dx = blob.x - mouseX;
                     const dy = blob.y - mouseY;
                     const distance = Math.sqrt(dx * dx + dy * dy);
                     
                     if (distance < blob.repulsionRadius && distance > 0) {
-                        // Stronger and continuous repulsion
-                        const mouseInfluence = Math.sqrt(mouseVx * mouseVx + mouseVy * mouseVy) * 0.3;
-                        const forceMultiplier = 1 + mouseInfluence;
-                        const baseForce = 8;
-                        const force = ((blob.repulsionRadius - distance) / blob.repulsionRadius) * baseForce * forceMultiplier;
-                        const repulsionX = (dx / distance) * force;
-                        const repulsionY = (dy / distance) * force;
-                        
-                        fx += repulsionX;
-                        fy += repulsionY;
+                        const force = ((blob.repulsionRadius - distance) / blob.repulsionRadius) * 2; // Reduced force
+                        fx += (dx / distance) * force;
+                        fy += (dy / distance) * force;
                     }
                 }
-// Blob-to-blob collision/repulsion
+
+                // Blob-to-blob gentle collision/repulsion
                 blobPhysics.forEach((otherBlob, otherIndex) => {
                     if (index !== otherIndex) {
                         const dx = blob.x - otherBlob.x;
                         const dy = blob.y - otherBlob.y;
                         const distance = Math.sqrt(dx * dx + dy * dy);
-                        const minDistance = 100; // Minimum distance between blobs
+                        const minDistance = 120; // Slightly larger minimum distance
                         
                         if (distance < minDistance && distance > 0) {
-                            const force = (minDistance - distance) / minDistance * 3;
+                            const force = (minDistance - distance) / minDistance * 1.5; // Reduced force
                             fx += (dx / distance) * force;
                             fy += (dy / distance) * force;
                         }
                     }
                 });
-                // No spring force - let blobs float freely
-                if (!blob.continuousMotion) {
-                    const springX = (blob.baseX - blob.x) * blob.springForce;
-                    const springY = (blob.baseY - blob.y) * blob.springForce;
-                    fx += springX;
-                    fy += springY;
-                }
-// Apply forces to velocity (F = ma, so a = F/m)
+
+                // Spring force to return to base position
+                const springX = (blob.baseX - blob.x) * blob.springForce;
+                const springY = (blob.baseY - blob.y) * blob.springForce;
+                fx += springX;
+                fy += springY;
+
+                // Apply forces to velocity
                 blob.vx += fx / blob.mass;
                 blob.vy += fy / blob.mass;
-                // Apply inertia
-                blob.vx *= blob.inertia;
-                blob.vy *= blob.inertia;
                 
-                // Apply minimal damping for continuous motion
+                // Apply damping and inertia
                 blob.vx *= blob.damping;
                 blob.vy *= blob.damping;
                 
-                // Add small random force for continuous organic movement
-                if (blob.continuousMotion) {
-                    fx += (Math.random() - 0.5) * 0.1;
-                    fy += (Math.random() - 0.5) * 0.1;
-                }
-// Limit maximum velocity
+                // Add very small random force for organic movement
+                fx += (Math.random() - 0.5) * 0.02;
+                fy += (Math.random() - 0.5) * 0.02;
+
+                // Limit maximum velocity
                 const speed = Math.sqrt(blob.vx * blob.vx + blob.vy * blob.vy);
                 if (speed > blob.maxVelocity) {
                     blob.vx = (blob.vx / speed) * blob.maxVelocity;
@@ -809,31 +770,29 @@ let mouseX = 0;
                 // Update position
                 blob.x += blob.vx;
                 blob.y += blob.vy;
-                // Boundary collision with elastic bounce
-                const blobWidth = parseFloat(blob.element.style.width) || 200;
-                const blobHeight = parseFloat(blob.element.style.height) || 200;
+
+                // Boundary collision with energy loss
+                const blobWidth = 200;
+                const blobHeight = 200;
                 const demoRect = demoSection.getBoundingClientRect();
                 
                 if (blob.x - blobWidth/2 < 0 || blob.x + blobWidth/2 > demoRect.width) {
-                    blob.vx *= -0.95; // Minimal energy loss for continuous motion
+                    blob.vx *= -0.7; // More energy loss
                     blob.x = Math.max(blobWidth/2, Math.min(demoRect.width - blobWidth/2, blob.x));
-                    // Add small random velocity change on bounce
-                    blob.vy += (Math.random() - 0.5) * 0.5;
                 }
                 
                 if (blob.y - blobHeight/2 < 0 || blob.y + blobHeight/2 > demoRect.height) {
-                    blob.vy *= -0.95; // Minimal energy loss for continuous motion
+                    blob.vy *= -0.7; // More energy loss
                     blob.y = Math.max(blobHeight/2, Math.min(demoRect.height - blobHeight/2, blob.y));
-                    // Add small random velocity change on bounce
-                    blob.vx += (Math.random() - 0.5) * 0.5;
                 }
-                // Apply transform with subtle scaling based on velocity
-                const velocityScale = Math.min(0.2, speed * 0.01);
+
+                // Apply transform with minimal scaling
+                const velocityScale = Math.min(0.05, speed * 0.005);
                 const scale = 1 + velocityScale;
-                const rotation = speed * 0.5; // Gentler rotation
+                const rotation = speed * 0.1; // Very gentle rotation
                 
                 blob.element.style.transform = `translate(${blob.x - blob.baseX}px, ${blob.y - blob.baseY}px) scale(${scale}) rotate(${rotation}deg)`;
-});
+            });
             
             requestAnimationFrame(animateBlobs);
         }