fix(perf): throttle CorporateBackground mousemove to fix forced reflow penalty

This commit is contained in:
2026-06-29 18:58:32 +02:00
parent bd25ec935d
commit 4dcc0061fc

View File

@@ -25,17 +25,24 @@ function MagneticRing({
// Only run on client with mouse // Only run on client with mouse
if (window.matchMedia("(pointer: coarse)").matches) return; if (window.matchMedia("(pointer: coarse)").matches) return;
let ticking = false;
const handleMouseMove = (e: MouseEvent) => { const handleMouseMove = (e: MouseEvent) => {
if (!ref.current) return; if (!ref.current) return;
if (!ticking) {
window.requestAnimationFrame(() => {
if (!ref.current) {
ticking = false;
return;
}
const rect = ref.current.getBoundingClientRect(); const rect = ref.current.getBoundingClientRect();
const centerX = rect.left + rect.width / 2; const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2; const centerY = rect.top + rect.height / 2;
const distX = e.clientX - centerX; const distX = e.clientX - centerX;
const distY = e.clientY - centerY; const distY = e.clientY - centerY;
const distance = Math.sqrt(distX * Math.pow(distX, 2) + Math.pow(distY, 2)); // Fix: correct pythagoras
// Calculate actual distance correctly
const actualDistance = Math.sqrt(distX * distX + distY * distY); const actualDistance = Math.sqrt(distX * distX + distY * distY);
if (actualDistance < pullRadius) { if (actualDistance < pullRadius) {
@@ -50,9 +57,13 @@ function MagneticRing({
x.set(0); x.set(0);
y.set(0); y.set(0);
} }
ticking = false;
});
ticking = true;
}
}; };
window.addEventListener('mousemove', handleMouseMove); window.addEventListener('mousemove', handleMouseMove, { passive: true });
return () => window.removeEventListener('mousemove', handleMouseMove); return () => window.removeEventListener('mousemove', handleMouseMove);
}, [x, y, pullRadius, pullStrength]); }, [x, y, pullRadius, pullStrength]);