fix(perf): throttle CorporateBackground mousemove to fix forced reflow penalty
This commit is contained in:
@@ -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]);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user