From b1847faa3af5c5bc97fdb683bd61d914468a4f48 Mon Sep 17 00:00:00 2001
From: yyhuni <poem@admin.com>
Date: Wed, 14 Jan 2026 11:42:12 +0800
Subject: [PATCH] feat(frontend): add throttled ripple effect on mouse move to
 PixelBlast

- Add enableRipples prop to PixelBlast component for conditional ripple control
- Implement throttled ripple triggering on pointer move events (150ms interval)
- Remove separate pointerdown event listener and consolidate ripple logic
- Refactor onPointerMove to handle both ripple effects and liquid touch separately
- Improve performance by preventing excessive ripple calculations on rapid movements
---
 frontend/app/[locale]/login/page.tsx |  1 +
 frontend/components/PixelBlast.tsx   | 29 ++++++++++++++++------------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/frontend/app/[locale]/login/page.tsx b/frontend/app/[locale]/login/page.tsx
index f3c9f819..59c54dbc 100644
--- a/frontend/app/[locale]/login/page.tsx
+++ b/frontend/app/[locale]/login/page.tsx
@@ -75,6 +75,7 @@ export default function LoginPage() {
           patternScale={4.5}
           color="#06b6d4"
           speed={0.35}
+          enableRipples={false}
         />
       </div>
 
diff --git a/frontend/components/PixelBlast.tsx b/frontend/components/PixelBlast.tsx
index fd46c9e5..8e86c241 100644
--- a/frontend/components/PixelBlast.tsx
+++ b/frontend/components/PixelBlast.tsx
@@ -533,21 +533,26 @@ const PixelBlast = ({
           h: renderer.domElement.height
         };
       };
-      const onPointerDown = e => {
-        const { fx, fy } = mapToPixels(e);
-        const ix = threeRef.current?.clickIx ?? 0;
-        uniforms.uClickPos.value[ix].set(fx, fy);
-        uniforms.uClickTimes.value[ix] = uniforms.uTime.value;
-        if (threeRef.current) threeRef.current.clickIx = (ix + 1) % MAX_CLICKS;
-      };
+      let lastRippleTime = 0;
+      const rippleThrottle = 150; // ms between ripples
       const onPointerMove = e => {
-        if (!touch) return;
         const { fx, fy, w, h } = mapToPixels(e);
-        touch.addTouch({ x: fx / w, y: fy / h });
+        
+        // Trigger ripple on mouse move (throttled)
+        const now = performance.now();
+        if (now - lastRippleTime > rippleThrottle) {
+          const ix = threeRef.current?.clickIx ?? 0;
+          uniforms.uClickPos.value[ix].set(fx, fy);
+          uniforms.uClickTimes.value[ix] = uniforms.uTime.value;
+          if (threeRef.current) threeRef.current.clickIx = (ix + 1) % MAX_CLICKS;
+          lastRippleTime = now;
+        }
+        
+        // Liquid touch effect
+        if (touch) {
+          touch.addTouch({ x: fx / w, y: fy / h });
+        }
       };
-      renderer.domElement.addEventListener('pointerdown', onPointerDown, {
-        passive: true
-      });
       renderer.domElement.addEventListener('pointermove', onPointerMove, {
         passive: true
       });