[PERFORMANCE] MotionLayer.jsx adds global event listeners in useEffect without cleanup causing memory leaks

[anshul23102]

Description

src/shared/MotionLayer.jsx registers scroll, mousemove, and resize listeners on window inside useEffect hooks. None of these hooks return a cleanup function. During React hot-module reload (HMR) in development, or when the component unmounts and remounts, duplicate listeners accumulate on the window object, causing the same callback to fire multiple times per event and gradually degrading performance.

Steps to Reproduce

1. Open the app in development mode with React DevTools installed.
2. Navigate between pages several times to trigger component unmount/remount cycles.
3. In DevTools Performance tab, record a scroll event and observe the event handler count multiplies with each mount cycle.

Root Cause

useEffect(() => { window.addEventListener("scroll", handler); }, []) without a corresponding return () => window.removeEventListener("scroll", handler).

Impact

Memory leak and compounding CPU cost on every scroll/mouse event. On low-power devices this becomes noticeable as stuttering after a few page navigations.

Proposed Fix

useEffect(() => {
  const handleScroll = () => { /* ... */ };
  window.addEventListener("scroll", handleScroll, { passive: true });
  return () => window.removeEventListener("scroll", handleScroll);
}, []);

Apply this pattern to every addEventListener call in MotionLayer.jsx.

[anshul23102]

@singhtrivendra Hi! I came across this issue and I would love to work on it as part of GSSoC '26.

I have reviewed the problem description carefully and am confident I can deliver a well-tested, production-ready fix within the contribution timeline. Please let me know if you need any additional context or have specific implementation preferences before I get started.

Could you please assign this issue to me?

/assign
/claim