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

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