Merge pull request #22 from ragusa-it/bolt-optimize-fancycursor-3615259032599906398

⚡ Bolt: Optimize FancyCursor mousemove handler

.jules/bolt.md

@@ -0,0 +1,3 @@
+## 2024-05-22 - Missing Scripts and Environment
+**Learning:** The project lacks `lint` script in `package.json`. Running `pnpm lint` might invoke system tools (like Android Lint?) instead of failing or doing nothing useful. Always check `package.json` scripts first.
+**Action:** Use specific commands like `pnpm exec tsc --noEmit` or `npx vitest` as discovered/documented, rather than assuming standard scripts exist.

src/components/layout/FancyCursor.tsx

@@ -39,17 +39,29 @@ export const FancyCursor = memo(() => {
             updateCursorState(e.target as Element);
         };
 
-        // The mouse move handler is throttled with requestAnimationFrame to ensure
+        // Optimization: Use a ticking flag and closure variables to prevent
-        // the animation is smooth and doesn't cause performance issues.
+        // excessive object creation and RAF churn during high-frequency events.
+        let ticking = false;
+        let clientX = 0;
+        let clientY = 0;
+
+        const updateCursor = () => {
+            // The offset issue was caused by positioning the cursor's top-left corner
+            // at the mouse coordinates. To fix this, `translate(-50%, -50%)` is added.
+            // This shifts the cursor element by half its own width and height,
+            // which effectively centers it on the pointer without affecting the visuals.
+            cursor.style.transform = `translate3d(${clientX}px, ${clientY}px, 0) translate(-50%, -50%)`;
+            ticking = false;
+        };
+
         const handleMouseMove = (e: MouseEvent) => {
-            cancelAnimationFrame(animationFrameId);
+            clientX = e.clientX;
-            animationFrameId = requestAnimationFrame(() => {
+            clientY = e.clientY;
-                // The offset issue was caused by positioning the cursor's top-left corner
+
-                // at the mouse coordinates. To fix this, `translate(-50%, -50%)` is added.
+            if (!ticking) {
-                // This shifts the cursor element by half its own width and height,
+                animationFrameId = requestAnimationFrame(updateCursor);
-                // which effectively centers it on the pointer without affecting the visuals.
+                ticking = true;
-                cursor.style.transform = `translate3d(${e.clientX}px, ${e.clientY}px, 0) translate(-50%, -50%)`;
+            }
-            });
         };
 
         // Using a passive event listener can improve scrolling performance.