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

nuexq · May 30, 2024 · b55f78b · b55f78b
1 parent 0217fa4
commit b55f78b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/src/components/Cursor.jsx b/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,

diff --git a/src/index.css b/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;