mmintel/e-tib.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 150 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Marc Mintel
2026-06-29 18:58:32 +02:00
parent bd25ec935d
commit 4dcc0061fc
1 changed files with 32 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/decorations/CorporateBackground.tsx
View File

@@ -25,34 +25,45 @@ 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;
const rect = ref.current.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const distX = e.clientX - centerX; if (!ticking) {
const distY = e.clientY - centerY; window.requestAnimationFrame(() => {
const distance = Math.sqrt(distX * Math.pow(distX, 2) + Math.pow(distY, 2)); // Fix: correct pythagoras if (!ref.current) {
ticking = false;
return;
}
// Calculate actual distance correctly const rect = ref.current.getBoundingClientRect();
const actualDistance = Math.sqrt(distX * distX + distY * distY); const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
if (actualDistance < pullRadius) { const distX = e.clientX - centerX;
// Exponential falloff for natural magnetic feel const distY = e.clientY - centerY;
const pullFactor = Math.pow(1 - (actualDistance / pullRadius), 2); const actualDistance = Math.sqrt(distX * distX + distY * distY);
// Target offset (fraction of the distance based on strength) if (actualDistance < pullRadius) {
x.set(distX * pullFactor * (pullStrength / 100)); // Exponential falloff for natural magnetic feel
y.set(distY * pullFactor * (pullStrength / 100)); const pullFactor = Math.pow(1 - (actualDistance / pullRadius), 2);
} else {
// Return to origin smoothly // Target offset (fraction of the distance based on strength)
x.set(0); x.set(distX * pullFactor * (pullStrength / 100));
y.set(0); y.set(distY * pullFactor * (pullStrength / 100));
} else {
// Return to origin smoothly
x.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]);