script> const bg = document.querySelector('.bg-elements'); let targetX = 50; let targetY = 50; let currentX = 50; let currentY = 50; // Throttle the mousemove event handler let lastMoveTime = 0; const moveInterval = 50; // 16ms (about 60fps) document.addEventListener('mousemove', (e) => { const now = Date.now(); if (now - lastMoveTime > moveInterval) { lastMoveTime = now; targetX = (e.clientX / window.innerWidth) * 100; targetY = (e.clientY / window.innerHeight) * 100; } }); // Variable to hold the animation frame ID (for scroll control) let rafId; // Pause animation during scroll let isScrolling; window.addEventListener('scroll', () => { cancelAnimationFrame(rafId); clearTimeout(isScrolling); isScrolling = setTimeout(() => { animate(); // Restart animation after a brief delay }, 150); // Adjust delay to your preference }); function animate() { currentX += (targetX - currentX) * 0.3; currentY += (targetY - currentY) * 0.3; const mask = `radial-gradient( circle at ${currentX}% ${currentY}%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 5%, rgba(255, 255, 255, 0.5) 10%, rgba(255, 255, 255, 0.2) 15%, rgba(255, 255, 255, 0) 20% )`; bg.style.maskImage = mask; bg.style.webkitMaskImage = mask; rafId = requestAnimationFrame(animate); // Save the frame ID } animate(); // Start animation