feat(cursor): opacity 0 for cursor if the cursor leave the body element

Author: nuexq

src/components/Cursor.jsx

@@ -44,7 +44,7 @@ const Cursor = ({ cursorVariant }) => {
 
   return (
     <motion.div
-      className="cursor max-lg:hidden size-8 bg-secondary dark:bg-primary fixed rounded-full z-50 pointer-events-none mix-blend-darken dark:mix-blend-difference top-0 left-0 flex justify-center items-center color-black"
+      className="cursor max-lg:hidden size-8 bg-secondary dark:bg-primary fixed rounded-full z-50 pointer-events-none mix-blend-darken dark:mix-blend-difference top-0 left-0 flex justify-center items-center color-black opacity-0 transition-opacity duration-500 ease"
       style={{
         x: mousePosition.x - 16,
         y: mousePosition.y - 16,

src/index.css

@@ -67,6 +67,9 @@
   body {
     @apply bg-background text-foreground font-poppins;
   }
+  #root:hover > .cursor {
+    opacity: 1
+  }
 
   #root {
     @apply h-screen w-screen flex flex-col overflow-x-hidden box-border;