added cursor animation

client/src/App.jsx

@@ -35,6 +35,7 @@ import ForgotPassword from "./component/ForgotPassword";
 import VerifyEmail from "./component/Verify";
 import NotFound from "./component/NotFound";
 import ProgressBar from "./component/ProgressBar/ProgressBar";
+import Cursor from './component/Cursor';
 // import ProtectedRoute from '../../client/src/component/ProtectedRoute'
 import AOS from 'aos';
 import 'aos/dist/aos.css';
@@ -132,6 +133,7 @@ function App() {
 
   return (
     <div className="h-full w-screen">
+      <Cursor/>
       <ProjectState>
         <ProfileState>
           <Router>

client/src/component/Cursor.jsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useRef } from "react";
+// import "./CustomCursor.css";
+import '../css/Cursor.css';
+
+const CustomCursor = () => {
+  const mainCursor = useRef(null);
+  const trailingCircles = useRef([]);
+
+  useEffect(() => {
+    const onMouseMove = (e) => {
+      mainCursor.current.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
+
+      trailingCircles.current.forEach((circle, index) => {
+        setTimeout(() => {
+          circle.style.transform = `translate(${e.clientX}px, ${e.clientY}px) scale(${1 - index * 0.1})`;
+        }, index * 20);
+      });
+    };
+
+    window.addEventListener("mousemove", onMouseMove);
+    return () => window.removeEventListener("mousemove", onMouseMove);
+  }, []);
+
+  return (
+    <>
+      <div ref={mainCursor} className="main-cursor"></div>
+      {[...Array(8)].map((_, i) => (
+        <div
+          key={i}
+          ref={(el) => (trailingCircles.current[i] = el)}
+          className="trailing-circle"
+        ></div>
+      ))}
+    </>
+  );
+};
+
+export default CustomCursor;

client/src/css/Cursor.css

@@ -0,0 +1,21 @@
+.main-cursor,
+.trailing-circle {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.main-cursor {
+  background: radial-gradient(circle, rgba(53, 118, 239, 0.8), rgba(116, 218, 255, 0.8));
+  z-index: 800;
+}
+
+.trailing-circle {
+  background: radial-gradient(circle, rgba(53, 118, 239, 0.8), rgba(116, 218, 255, 0.8));
+  z-index: 999;
+  transition: transform 0.07s ease;
+}

client/src/main.jsx

@@ -5,6 +5,7 @@ import App from "./App.jsx";
 import "./index.css";
 import { Toaster } from "react-hot-toast";
 import { AuthProvider } from "./contexts/authContext/index.jsx";
+// import Alert from "./component/Alert";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <>