From a5cb5e4ce106aee5e1685c0550f1ac39739b3e01 Mon Sep 17 00:00:00 2001
From: No0ne003 <hi.yassir.op@gmail.com>
Date: Tue, 2 Apr 2024 13:24:11 +0000
Subject: [PATCH] mask cursor on home page

---
 package-lock.json         | 25 ++++++++++++++++++
 package.json              |  1 +
 src/components/Cursor.jsx | 54 +++++++++++++++++++++++++++++++++++++++
 src/index.css             |  3 +++
 src/pages/Home.jsx        | 22 +++++++++++++++-
 5 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Cursor.jsx

diff --git a/package-lock.json b/package-lock.json
index d37bb38..d6127f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@radix-ui/react-slot": "^1.0.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
+        "framer-motion": "^11.0.24",
         "lucide-react": "^0.344.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -3409,6 +3410,30 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.0.24",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.24.tgz",
+      "integrity": "sha512-l2iM8NR53qtcujgAqYvGPJJGModPNWEVUaATRDLfnaLvUoFpImovBm0AHalSSsY8tW6knP8mfJTW4WYGbnAe4w==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
diff --git a/package.json b/package.json
index 19577e0..99f05dc 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "framer-motion": "^11.0.24",
     "lucide-react": "^0.344.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/src/components/Cursor.jsx b/src/components/Cursor.jsx
new file mode 100644
index 0000000..4906b4f
--- /dev/null
+++ b/src/components/Cursor.jsx
@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import { FaArrowAltCircleRight } from "react-icons/fa";
+
+const Cursor = ({ cursorVariant }) => {
+  const [mousePosition, setMousePosition] = useState({
+    x: 0,
+    y: 0,
+  });
+
+  useEffect(() => {
+    const mouseMove = (e) => {
+      setMousePosition({
+        x: e.clientX,
+        y: e.clientY,
+      });
+    };
+
+    window.addEventListener("mousemove", mouseMove);
+
+    return () => {
+      window.removeEventListener("mousemove", mouseMove);
+    };
+  }, []);
+
+  const variants = {
+    default: {
+      x: mousePosition.x - 16,
+      y: mousePosition.y - 16,
+    },
+    text: {
+      x: mousePosition.x - 75,
+      y: mousePosition.y - 75,
+      height: 150,
+      width: 150,
+    },
+  };
+
+  return (
+    <motion.div
+      className="cursor size-8 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"
+      variants={variants}
+      animate={cursorVariant}
+    >
+      {cursorVariant === "text" ? (
+        <p className="mix-blend-darken dark:mix-blend-difference -rotate-45">
+          <FaArrowAltCircleRight size={50} />
+        </p>
+      ) : null}
+    </motion.div>
+  );
+};
+
+export default Cursor;
diff --git a/src/index.css b/src/index.css
index 8ae3f15..2738d9c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -78,6 +78,7 @@
     -webkit-appearance: none;
     margin: 0;
   }
+
   input[type="number"] {
     -moz-appearance: textfield;
   }
@@ -92,3 +93,5 @@
     @apply bg-gradient-to-br from-primary-foreground to-secondary;
   }
 }
+
+/*Cursor*/
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index e9eb925..8d95a54 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,7 +1,19 @@
+import { useState } from "react";
+import Cursor from "@/components/Cursor";
 import { projects } from "@/data/projects";
 import { Link } from "react-router-dom";
 
 function Home() {
+  const [cursorVariant, setCursorVariant] = useState("default");
+
+  const handleMouseEnter = () => {
+    setCursorVariant("text");
+  };
+
+  const handleMouseLeave = () => {
+    setCursorVariant("default");
+  };
+
   return (
     <div className="flex flex-col gap-3 justify-start items-center">
       <p className="text-xl">
@@ -12,10 +24,18 @@ function Home() {
         I&apos;ll start on it when add the first componenet (project)
       </p>
       {projects.map((item) => (
-        <Link key={item.id} to={item.path}>
+        <Link
+          className="py-4 px-6 border-border border-b-[1px] w-full flex"
+          key={item.id}
+          to={item.path}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
           {item.name}
         </Link>
       ))}
+
+      <Cursor cursorVariant={cursorVariant} />
     </div>
   );
 }