[BUG] the cursor animation is bugged #594 (#637)

src/App.css

@@ -74,15 +74,20 @@ html {
 
 /* Custom Cursor Styling */
 .custom-cursor {
-  position: fixed;
+  position: absolute;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: green; /* Main cursor color */
   pointer-events: none;
   transform-origin: center;
-  transition: transform 0.1s ease;
+  transition: transform 0.1s ease, opacity 0.2s ease; 
   z-index: 9999; /* Ensure cursor is on top */
+  opacity: 1;
+}
+
+.custom-cursor.hidden {
+  opacity: 0; 
 }
 
 /* Cursor Tail Styling */
@@ -94,5 +99,9 @@ html {
   background-color: green; /* Tail color */
   pointer-events: none;
   z-index: 9998;
-  transition: transform 0.1s ease;
+  transition: transform 0.1s ease, opacity 0.2s ease; 
 }
+.cursor-tail.hidden {
+  opacity: 0;
+}
+

src/App.jsx

@@ -3,7 +3,6 @@
 import React, { useEffect, useState } from 'react';
 import "./App.css";
 import { Route, Routes } from "react-router-dom";
-import './App.css';
 
 // Pages and Components
 import { Home, Login, Registration, Dashboard, ComingSoon } from "./pages";
@@ -27,6 +26,7 @@ const App = () => {
   const [isPreloaderVisible, setIsPreloaderVisible] = useState(true);
   const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
   const [trail, setTrail] = useState(Array(10).fill({ x: 0, y: 0 }));
+  const [isCursorVisible, setIsCursorVisible] = useState(true); // Controls visibility
 
   // Hide Preloader after 5 seconds
   useEffect(() => {
@@ -43,16 +43,31 @@ const App = () => {
     setCursorPos({ x: e.clientX, y: e.clientY });
   };
 
+  const handleMouseLeave = () => {
+    setIsCursorVisible(false); 
+  };
+
+  const handleMouseEnter = () => {
+    setIsCursorVisible(true); 
+  };
+
   useEffect(() => {
-    window.addEventListener("mousemove", updateCursor);
-    return () => window.removeEventListener("mousemove", updateCursor);
+    document.addEventListener("mousemove", updateCursor);
+    document.addEventListener("mouseleave", handleMouseLeave); 
+    document.addEventListener("mouseenter", handleMouseEnter); 
+
+    return () => {
+      document.removeEventListener("mousemove", updateCursor);
+      document.removeEventListener("mouseleave", handleMouseLeave);
+      document.removeEventListener("mouseenter", handleMouseEnter);
+    };
   }, [trail]);
 
   return (
     <>
       {/* Custom Main Cursor */}
       <div
-        className="custom-cursor"
+        className={`custom-cursor ${!isCursorVisible ? "hidden" : ""}`}
         style={{
           left: `${cursorPos.x}px`,
           top: `${cursorPos.y}px`,
@@ -63,7 +78,7 @@ const App = () => {
       {trail.map((pos, index) => (
         <div
           key={index}
-          className="cursor-tail"
+          className={`cursor-tail ${!isCursorVisible ? "hidden" : ""}`}
           style={{
             left: `${pos.x}px`,
             top: `${pos.y}px`,