fix: mobile touch differentiates drag and tap

src/lib/webgl-background.ts

@@ -989,6 +989,11 @@ export function initWebGLBackground() {
     pointer.active = true;
   };
 
+  const TOUCH_DRAG_THRESHOLD = 8;
+  let touchDragActive = false;
+  let touchStartX = 0;
+  let touchStartY = 0;
+
   const renderEmitters = () => {
     if (!emitterCtx || !emitterTarget) {
       return;
@@ -1449,31 +1454,50 @@ export function initWebGLBackground() {
     pointer.active = false;
   });
 
-  document.addEventListener(
-    "touchstart",
-    (event) => {
-      event.preventDefault();
+  document.addEventListener("touchstart", (event) => {
     const touch = event.touches.item(0);
     if (touch) {
+      touchDragActive = false;
+      touchStartX = touch.clientX;
+      touchStartY = touch.clientY;
       updatePointer(touch.clientX, touch.clientY);
     }
-    },
-    { passive: false },
-  );
+  });
 
   document.addEventListener(
     "touchmove",
     (event) => {
-      event.preventDefault();
       const touch = event.touches.item(0);
-      if (touch) {
-        updatePointer(touch.clientX, touch.clientY);
+      if (!touch) {
+        return;
       }
+
+      if (!touchDragActive) {
+        const distance = Math.hypot(
+          touch.clientX - touchStartX,
+          touch.clientY - touchStartY,
+        );
+
+        if (distance < TOUCH_DRAG_THRESHOLD) {
+          return;
+        }
+
+        touchDragActive = true;
+      }
+
+      event.preventDefault();
+      updatePointer(touch.clientX, touch.clientY);
     },
     { passive: false },
   );
 
   document.addEventListener("touchend", () => {
+    touchDragActive = false;
+    pointer.active = false;
+  });
+
+  document.addEventListener("touchcancel", () => {
+    touchDragActive = false;
     pointer.active = false;
   });