Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BlobWave Background</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <style> | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| background: #0f0f1e; | |
| } | |
| .blob { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| opacity: 0.8; | |
| mix-blend-mode: screen; | |
| } | |
| .orbit-blob { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(60px); | |
| opacity: 0.6; | |
| mix-blend-mode: screen; | |
| } | |
| .container { | |
| position: relative; | |
| width: 100vw; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .content { | |
| position: relative; | |
| z-index: 10; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| color: white; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div id="blob1" class="blob bg-purple-600"></div> | |
| <div id="blob2" class="blob bg-purple-400"></div> | |
| <div id="blob3" class="blob bg-fuchsia-500"></div> | |
| <!-- Orbiting blobs --> | |
| <div id="orbitBlob1" class="orbit-blob bg-purple-300"></div> | |
| <div id="orbitBlob2" class="orbit-blob bg-purple-700"></div> | |
| <div id="orbitBlob3" class="orbit-blob bg-fuchsia-400"></div> | |
| <div id="orbitBlob4" class="orbit-blob bg-purple-500"></div> | |
| <div id="orbitBlob5" class="orbit-blob bg-fuchsia-600"></div> | |
| <div id="orbitBlob6" class="orbit-blob bg-purple-800"></div> | |
| <div class="content"> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize blobs | |
| const blob1 = document.getElementById('blob1'); | |
| const blob2 = document.getElementById('blob2'); | |
| const blob3 = document.getElementById('blob3'); | |
| // Set initial positions for main blobs | |
| blob1.style.width = '800px'; | |
| blob1.style.height = '800px'; | |
| blob1.style.top = '15%'; | |
| blob1.style.left = '10%'; | |
| blob2.style.width = '700px'; | |
| blob2.style.height = '700px'; | |
| blob2.style.top = '55%'; | |
| blob2.style.left = '65%'; | |
| 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: 200, color: 'bg-purple-300', angle: 0, speed: 0.005, distance: 350 }, | |
| { el: document.getElementById('orbitBlob2'), size: 170, color: 'bg-purple-700', angle: Math.PI/3, speed: 0.003, distance: 300 }, | |
| { el: document.getElementById('orbitBlob3'), size: 230, color: 'bg-fuchsia-400', angle: Math.PI/1.5, speed: 0.004, distance: 400 }, | |
| { el: document.getElementById('orbitBlob4'), size: 150, color: 'bg-purple-500', angle: Math.PI, speed: 0.006, distance: 250 }, | |
| { el: document.getElementById('orbitBlob5'), size: 190, color: 'bg-fuchsia-600', angle: Math.PI*1.5, speed: 0.0035, distance: 330 }, | |
| { el: document.getElementById('orbitBlob6'), size: 210, color: 'bg-purple-800', angle: Math.PI*1.8, speed: 0.0045, distance: 370 } | |
| ]; | |
| orbitBlobs.forEach(blob => { | |
| blob.el.style.width = `${blob.size}px`; | |
| blob.el.style.height = `${blob.size}px`; | |
| blob.el.className = `orbit-blob ${blob.color}`; | |
| }); | |
| // Mouse move interaction for main blobs | |
| document.addEventListener('mousemove', (e) => { | |
| const x = e.clientX; | |
| const y = e.clientY; | |
| // Move blobs toward cursor with different speeds (increased by 30%) | |
| 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() { | |
| const centerX = window.innerWidth / 2; | |
| const centerY = window.innerHeight / 2; | |
| orbitBlobs.forEach(blob => { | |
| blob.angle += blob.speed; | |
| const x = centerX + Math.cos(blob.angle) * blob.distance - blob.size / 2; | |
| const y = centerY + Math.sin(blob.angle) * blob.distance - blob.size / 2; | |
| blob.el.style.left = `${x}px`; | |
| blob.el.style.top = `${y}px`; | |
| }); | |
| requestAnimationFrame(animateOrbitBlobs); | |
| } | |
| // Start orbit animation | |
| animateOrbitBlobs(); | |
| // Continuous animation with Anime.js for main blobs | |
| anime({ | |
| targets: '#blob1', | |
| scale: [1, 1.3, 1], | |
| borderRadius: ['50%', '40%', '50%'], | |
| duration: 8000, | |
| easing: 'easeInOutQuad', | |
| loop: true | |
| }); | |
| anime({ | |
| targets: '#blob2', | |
| scale: [1, 1.4, 1], | |
| borderRadius: ['50%', '60%', '50%'], | |
| duration: 10000, | |
| easing: 'easeInOutCubic', | |
| loop: true | |
| }); | |
| anime({ | |
| targets: '#blob3', | |
| scale: [1, 1.2, 1], | |
| borderRadius: ['50%', '45%', '50%'], | |
| duration: 12000, | |
| easing: 'easeInOutQuart', | |
| loop: true | |
| }); | |
| // Add subtle pulsing animation to orbiting blobs | |
| orbitBlobs.forEach((blob, index) => { | |
| anime({ | |
| targets: blob.el, | |
| scale: [1, 1.2, 1], | |
| opacity: [0.6, 0.8, 0.6], | |
| duration: 3000 + index * 500, | |
| easing: 'easeInOutSine', | |
| loop: true, | |
| delay: index * 300 | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |