.fs-blur-field { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; isolation: isolate; } .fs-ball, .fs-vignette { position: absolute; pointer-events: none; will-change: transform; } .fs-ball { left: 0; top: 0; border-radius: 50%; mix-blend-mode: screen; opacity: 1; transform: translate3d(0,0,0); } .fs-ball::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; filter: blur(var(--blur)); opacity: var(--alpha); transform: translateZ(0); } /* far-back lighting glows */ .fs-ball-bg { width: 62vw; height: 62vw; min-width: 720px; min-height: 720px; max-width: 1200px; max-height: 1200px; --blur: 280px; --alpha: 0.12; z-index: 0; } .fs-ball-xl { width: 44vw; height: 44vw; min-width: 560px; min-height: 560px; max-width: 920px; max-height: 920px; --blur: 220px; --alpha: 0.14; z-index: 1; } .fs-ball-lg { width: 30vw; height: 30vw; min-width: 360px; min-height: 360px; max-width: 560px; max-height: 560px; --blur: 150px; --alpha: 0.12; z-index: 2; } .fs-ball-soft { width: 9vw; height: 9vw; min-width: 84px; min-height: 84px; max-width: 140px; max-height: 140px; --blur: 34px; --alpha: 0.11; z-index: 3; } .fs-ball-md { width: 4.6vw; height: 4.6vw; min-width: 34px; min-height: 34px; max-width: 68px; max-height: 68px; --blur: 20px; --alpha: 0.18; z-index: 4; } .fs-ball-sm { width: 2.4vw; height: 2.4vw; min-width: 18px; min-height: 18px; max-width: 30px; max-height: 30px; --blur: 13px; --alpha: 0.22; z-index: 5; } .fs-ball-particle { width: 1.2vw; height: 1.2vw; min-width: 11px; min-height: 11px; max-width: 18px; max-height: 18px; --blur: 12px; --alpha: 0.22; z-index: 6; } .fs-ball-speck { width: 0.7vw; height: 0.7vw; min-width: 7px; min-height: 7px; max-width: 12px; max-height: 12px; --blur: 8px; --alpha: 0.24; z-index: 7; } .green { color: #aefcff; } .blue { color: #183dff; } .purple { color: #8a35ff; } .orange { color: #ff8a1f; } .cyan { color: #00d5ff; } .pink { color: #ff55de; } .blue2 { color: #4f7dff; } .orange2 { color: #ff9b2f; } .green2 { color: #96ff42; } .violet2 { color: #6a54ff; } .cyan2 { color: #8ef7ff; } .pink2 { color: #d96bff; } .blue3 { color: #7aa2ff; } .lime { color: #d6ff6b; } .turquoise { color: #4fffe0; } .yellow { color: #ffd84d; } .orange3 { color: #ff9a3d; } .violet3 { color: #a86bff; } .cyan3 { color: #63f3ff; } .aurora-cyan { color: #43f4ff; } .aurora-gold { color: #ffcc52; } .aurora-violet { color: #8f63ff; } .fs-vignette { inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0.002) 24%, rgba(0,0,0,0) 52%), radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 58%, rgba(0,0,0,0.24) 100%); z-index: 20; } @media (max-width: 767px) { .fs-ball-bg { width: 88vw; height: 88vw; min-width: 340px; min-height: 340px; max-width: 620px; max-height: 620px; --blur: 140px; --alpha: 0.10; } .fs-ball-xl { width: 54vw; height: 54vw; min-width: 240px; min-height: 240px; max-width: 520px; max-height: 520px; --blur: 160px; --alpha: 0.12; } .fs-ball-lg { width: 38vw; height: 38vw; min-width: 180px; min-height: 180px; max-width: 340px; max-height: 340px; --blur: 110px; --alpha: 0.10; } .fs-ball-soft { width: 14vw; height: 14vw; min-width: 44px; min-height: 44px; max-width: 110px; max-height: 110px; --blur: 24px; --alpha: 0.10; } .fs-ball-md { width: 7vw; height: 7vw; min-width: 24px; min-height: 24px; max-width: 48px; max-height: 48px; --blur: 16px; --alpha: 0.16; } .fs-ball-sm, .fs-ball-particle { width: 4.2vw; height: 4.2vw; min-width: 14px; min-height: 14px; max-width: 26px; max-height: 26px; --blur: 11px; --alpha: 0.17; } .fs-ball-speck { width: 2.6vw; height: 2.6vw; min-width: 8px; min-height: 8px; max-width: 14px; max-height: 14px; --blur: 8px; --alpha: 0.16; } } @media (prefers-reduced-motion: reduce) { .fs-ball { transform: none !important; } } (function () { const wrap = document.currentScript.previousElementSibling.previousElementSibling; if (!wrap || !wrap.classList.contains('fs-blur-field')) return; const balls = Array.from(wrap.querySelectorAll('.fs-ball')); const isFinePointer = window.matchMedia('(pointer:fine)').matches; const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const vw = () => window.innerWidth; const vh = () => window.innerHeight; const isMobile = () => window.innerWidth { const rect = ball.getBoundingClientRect(); const cfg = configs[i] || { x: Math.random(), y: Math.random() }; ball._baseX = vw() * cfg.x; ball._baseY = vh() * cfg.y; ball._depth = parseFloat(ball.dataset.depth || "0.2"); ball._drift = parseFloat(ball.dataset.drift || "12"); ball._phaseX = Math.random() * Math.PI * 2; ball._phaseY = Math.random() * Math.PI * 2; ball._currentX = ball._baseX; ball._currentY = ball._baseY; ball._w = rect.width; ball._h = rect.height; ball._isBg = ball.classList.contains('fs-ball-bg'); }); } function resize() { placeBasePositions(); } function onMouseMove(e) { targetMouseX = (e.clientX / vw() - 0.5) * 2; targetMouseY = (e.clientY / vh() - 0.5) * 2; } function animate(now) { const dt = Math.min((now - last) / 1000, 0.033); last = now; time += dt; mouseX += (targetMouseX - mouseX) * 0.05; mouseY += (targetMouseY - mouseY) * 0.05; balls.forEach((ball, index) => { const speedFactor = ball._isBg ? 0.45 : 1; const driftFactor = ball._isBg ? 1.35 : 1; const parallaxFactor = ball._isBg ? 0.45 : 1; const speedX = (0.16 + index * 0.005) * speedFactor; const speedY = (0.13 + index * 0.004) * speedFactor; const driftX = Math.sin(time * speedX + ball._phaseX) * ball._drift * driftFactor; const driftY = Math.cos(time * speedY + ball._phaseY) * ball._drift * 0.82 * driftFactor; const parallaxX = mouseX * 180 * ball._depth * parallaxFactor; const parallaxY = mouseY * 140 * ball._depth * parallaxFactor; const targetX = ball._baseX + driftX + parallaxX; const targetY = ball._baseY + driftY + parallaxY; ball._currentX += (targetX - ball._currentX) * 0.06; ball._currentY += (targetY - ball._currentY) * 0.06; ball.style.transform = `translate3d(${ball._currentX.toFixed(2)}px, ${ball._currentY.toFixed(2)}px, 0)`; }); requestAnimationFrame(animate); } resize(); if (isFinePointer && !reduceMotion) { window.addEventListener('mousemove', onMouseMove, { passive: true }); } window.addEventListener('resize', resize); requestAnimationFrame(animate); })();