mask cursor on home page

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",

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;

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*/

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>
  );
 }