perf(landing): remove liquid shader and throttle magic bento hover to fix lag

Author: yash-pouranik

apps/landing/src/components/MagicBento/MagicBento.jsx

@@ -357,16 +357,21 @@ const GlobalSpotlight = ({
     document.body.appendChild(spotlight);
     spotlightRef.current = spotlight;
 
+    let rAF = null;
+
     const handleMouseMove = e => {
-      if (!spotlightRef.current || !gridRef.current) return;
+      if (rAF) cancelAnimationFrame(rAF);
+      
+      rAF = requestAnimationFrame(() => {
+        if (!spotlightRef.current || !gridRef.current) return;
 
-      const section = gridRef.current.closest('.bento-section');
-      const rect = section?.getBoundingClientRect();
-      const mouseInside =
-        rect && e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
+        const section = gridRef.current.closest('.bento-section');
+        const rect = section?.getBoundingClientRect();
+        const mouseInside =
+          rect && e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
 
-      isInsideSection.current = mouseInside || false;
-      const cards = gridRef.current.querySelectorAll('.magic-bento-card');
+        isInsideSection.current = mouseInside || false;
+        const cards = gridRef.current.querySelectorAll('.magic-bento-card');
 
       if (!mouseInside) {
         gsap.to(spotlightRef.current, {
@@ -423,6 +428,7 @@ const GlobalSpotlight = ({
         duration: targetOpacity > 0 ? 0.2 : 0.5,
         ease: 'power2.out'
       });
+      });
     };
 
     const handleMouseLeave = () => {

apps/landing/src/pages/index.astro

@@ -82,7 +82,6 @@ const FAQ_ITEMS = [
       <div class="hyperspeed-wrapper">
         <Hyperspeed client:load effectOptions={HYPERSPEED_OPTIONS} />
       </div>
-      <LiquidBackground client:load />
       <div class="hero-glow"></div>
 
       <div class="hero-split" style="position: relative; z-index: 1;">