bug: cursor animation fixed (#1034)

Avdhesh-Varshney · Nov 11, 2024 · 180b88c · 180b88c
1 parent b27c5d0
commit 180b88c
Showing 1 changed file with 24 additions and 6 deletions.
diff --git a/webmasterlog/src/components/shared/Cursor.tsx b/webmasterlog/src/components/shared/Cursor.tsx
@@ -1,19 +1,32 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { motion, Variants } from 'framer-motion';
 
 const Cursor: React.FC = () => {
+  const [cursorVisible, setCursorVisible] = useState(true);
+  const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+
   useEffect(() => {
-    const cursor = document.querySelector('.cursor') as HTMLElement;
     const moveCursor = (e: MouseEvent) => {
-      cursor.style.left = `${e.pageX}px`;
-      cursor.style.top = `${e.pageY}px`;
+      setCursorPosition({ x: e.pageX, y: e.pageY });
+      setCursorVisible(true); 
+    };
+
+    const hideCursor = () => {
+      setCursorVisible(false);
     };
 
     document.addEventListener('mousemove', moveCursor);
+    document.addEventListener('mouseleave', hideCursor);
+    document.addEventListener('focus', () => setCursorVisible(true));  
+    window.addEventListener('blur', () => setCursorVisible(false)); 
+
     return () => {
       document.removeEventListener('mousemove', moveCursor);
+      document.removeEventListener('mouseleave', hideCursor);
+      document.removeEventListener('focus', () => setCursorVisible(true));
+      document.removeEventListener('blur', () => setCursorVisible(false));
     };
   }, []);
 
@@ -26,7 +39,7 @@ const Cursor: React.FC = () => {
       mixBlendMode: 'difference',
       position: 'absolute',
       pointerEvents: 'none',
-      zIndex: 9999,
+      zIndex: 99999,  
       translateX: '-50%',
       translateY: '-50%',
       transition: {
@@ -36,7 +49,7 @@ const Cursor: React.FC = () => {
     glow: {
       boxShadow: [
         '0 0 10px 5px rgba(0, 191, 255, 0.5)',
-        '0 0 20px 10px rgba(0, 191, 255, 0.9)'
+        '0 0 20px 10px rgba(0, 191, 255, 0.9)',
       ],
       transition: {
         duration: 1,
@@ -53,6 +66,11 @@ const Cursor: React.FC = () => {
         variants={cursorVariants}
         initial="default"
         animate="glow"
+        style={{
+          left: `${cursorPosition.x}px`,
+          top: `${cursorPosition.y}px`,
+          visibility: cursorVisible ? 'visible' : 'hidden', 
+        }}
       />
     </div>
   );