From 1581a18125711f5ecdacd3d40301f4b34200957d Mon Sep 17 00:00:00 2001
From: AswaniBolisetti <aswanibolisetti@gmail.com>
Date: Mon, 28 Oct 2024 13:43:52 +0530
Subject: [PATCH] added cursor animation

---
 client/src/App.jsx              |  2 ++
 client/src/component/Cursor.jsx | 38 +++++++++++++++++++++++++++++++++
 client/src/css/Cursor.css       | 21 ++++++++++++++++++
 client/src/main.jsx             |  1 +
 4 files changed, 62 insertions(+)
 create mode 100644 client/src/component/Cursor.jsx
 create mode 100644 client/src/css/Cursor.css

diff --git a/client/src/App.jsx b/client/src/App.jsx
index ce7a03d..39ddb88 100644
--- a/client/src/App.jsx
+++ b/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>
diff --git a/client/src/component/Cursor.jsx b/client/src/component/Cursor.jsx
new file mode 100644
index 0000000..2b54dee
--- /dev/null
+++ b/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;
diff --git a/client/src/css/Cursor.css b/client/src/css/Cursor.css
new file mode 100644
index 0000000..f3041bc
--- /dev/null
+++ b/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;
+}
diff --git a/client/src/main.jsx b/client/src/main.jsx
index f2b59f7..f4de051 100644
--- a/client/src/main.jsx
+++ b/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(
   <>