src/components/layout/FancyCursor.test.tsx

@@ -86,26 +86,22 @@ describe('FancyCursor', () => {
         document.body.removeChild(link);
     });
 
-    it('uses fallback elementFromPoint if hoveredElement is null', () => {
+    it('does not call elementFromPoint on mousemove', () => {
         // Reset elementFromPoint mock
         const mockElementFromPoint = vi.fn();
         // @ts-ignore
         document.elementFromPoint = mockElementFromPoint;
 
-        // We need to remount to reset internal state if any.
-        // However, 'hoveredElement' variable was defined INSIDE the component in my edit.
-        // Let's double check that.
-
         render(<FancyCursor />);
 
-        // Trigger mousemove WITHOUT prior mouseover.
+        // Trigger mousemove
-        // This should trigger the fallback.
         fireEvent.mouseMove(window, { clientX: 10, clientY: 10 });
 
         act(() => {
             vi.runAllTimers();
         });
 
-        expect(mockElementFromPoint).toHaveBeenCalledWith(10, 10);
+        // Should NOT be called in the optimized version
+        expect(mockElementFromPoint).not.toHaveBeenCalled();
     });
 });

src/components/layout/FancyCursor.tsx

@@ -19,29 +19,8 @@ export const FancyCursor = memo(() => {
         if (!cursor) return;
 
         let animationFrameId: number;
-        let hoveredElement: Element | null = null;
 
-        const handleMouseOver = (e: MouseEvent) => {
+        const updateCursorState = (el: Element | null) => {
-            hoveredElement = e.target as Element;
-        };
-
-        // The mouse move handler is throttled with requestAnimationFrame to ensure
-        // the animation is smooth and doesn't cause performance issues.
-        const handleMouseMove = (e: MouseEvent) => {
-            cancelAnimationFrame(animationFrameId);
-            animationFrameId = requestAnimationFrame(() => {
-                // 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(${e.clientX}px, ${e.clientY}px, 0) translate(-50%, -50%)`;
-
-                // Use the cached hovered element if available, otherwise fallback to elementFromPoint
-                // This fallback is mostly for the initial state before any mouseover events
-                if (!hoveredElement) {
-                    hoveredElement = document.elementFromPoint(e.clientX, e.clientY);
-                }
-                const el = hoveredElement;
             const classList = cursor.classList;
 
             // Coercing to boolean with `!!` is a micro-optimization.
@@ -54,6 +33,22 @@ export const FancyCursor = memo(() => {
             classList.toggle('resize-hover', isResize);
             classList.toggle('text-hover', isText && !isResize);
             classList.toggle('link-hover', isLink && !isText && !isResize);
+        };
+
+        const handleMouseOver = (e: MouseEvent) => {
+            updateCursorState(e.target as Element);
+        };
+
+        // The mouse move handler is throttled with requestAnimationFrame to ensure
+        // the animation is smooth and doesn't cause performance issues.
+        const handleMouseMove = (e: MouseEvent) => {
+            cancelAnimationFrame(animationFrameId);
+            animationFrameId = requestAnimationFrame(() => {
+                // 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(${e.clientX}px, ${e.clientY}px, 0) translate(-50%, -50%)`;
             });
         };
 

src/components/sections/Hero.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { render, fireEvent, act, cleanup } from "@testing-library/react";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { Hero } from "./Hero";