CursorAnimationDone

app/(dashboard)/layout.tsx

@@ -1,21 +1,30 @@
+// DashboardLayout.tsx
+
+"use client"; // Mark this component as a Client Component
+
 import { Footer } from "@/components/global/footer";
 import { Header } from "@/components/global/header";
 import { Toaster } from "@/components/ui/sonner";
+import TrailingCursor from "@/components/ui/TrailingCursor"; // Ensure the path is correct
 
 type Props = {
-	children: React.ReactNode;
+  children: React.ReactNode;
 };
+
 const DashboardLayout = ({ children }: Props) => {
-	return (
-		<div className=" flex justify-center">
-			<div className="flex flex-col w-full mx-auto min-h-screen max-w-screen-2xl">
-				<Header />
-				<Toaster />
-				<main className="flex-grow px-3 lg:px-14">{children}</main>
-				<Footer />
-			</div>
-		</div>
-	);
+  return (
+    <div className="flex justify-center">
+      <div className="flex flex-col w-full mx-auto min-h-screen max-w-screen-2xl">
+        <Header />
+        <Toaster />
+        <main className="flex-grow px-3 lg:px-14">
+          {children} {/* Render the child components */}
+        </main>
+        <Footer />
+      </div>
+      <TrailingCursor /> {/* Include the custom cursor */}
+    </div>
+  );
 };
 
 export default DashboardLayout;

app/styles/globals.css

@@ -71,3 +71,6 @@
 		@apply bg-background text-foreground;
 	}
 }
+body{
+	cursor:none;
+}

components/ui/TrailingCursor.module.css

@@ -0,0 +1,45 @@
+
+
+.mainCursor {
+  position: fixed;
+  width: 15px; /* Increased size for visibility */
+  height: 15px; /* Increased size for visibility */
+  background-color: rgb(253, 253, 253); /* Changed color to green as per your requirement */
+  border-radius: 50%;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  animation: clickEffect 0.2s ease-out;
+}
+
+.trailDot {
+  position: fixed;
+  width: 4px; /* Decreased size for a negative effect */
+  height: 4px; /* Decreased size for a negative effect */
+  background-color: green; /* Changed color to match the main cursor */
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 999;
+  opacity: 0.5; /* Decreased opacity for a less visible effect */
+  transition: all 0.15s ease-out; /* Added transform transition */
+}
+
+@keyframes clickEffect {
+  0% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes negativeTrail {
+  0% {
+    transform: scale(0.5); /* Start smaller */
+    opacity: 0.5; /* Start with lower opacity */
+  }
+  100% {
+    transform: scale(1); /* Scale to normal size */
+    opacity: 0; /* Fade out */
+  }
+}

components/ui/TrailingCursor.tsx

@@ -0,0 +1,58 @@
+"use client";
+import { useEffect, useRef } from "react";
+import styles from "./TrailingCursor.module.css"; // Import the CSS module
+
+const TrailingCursor = () => {
+  const cursorRef = useRef(null);
+  const dotRefs = useRef([]);
+
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      const cursor = cursorRef.current;
+      if (cursor) {
+        // Position the main cursor
+        cursor.style.left = `${e.clientX}px`;
+        cursor.style.top = `${e.clientY}px`;
+
+        // Animate trailing dots with a negative effect
+        dotRefs.current.forEach((dot, index) => {
+          const delay = index * 50; // Adjust delay for trailing effect
+          setTimeout(() => {
+            if (dot) {
+              dot.style.left = `${e.clientX}px`;
+              dot.style.top = `${e.clientY}px`;
+              dot.style.animation = `${styles.negativeTrail} 0.3s forwards`; // Apply negative trail animation
+            }
+          }, delay);
+        });
+      }
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
+
+  return (
+    <>
+      {/* Main cursor */}
+      <div
+        ref={cursorRef}
+        className={styles.mainCursor} // Use the CSS module class
+      />
+
+      {/* Trailing dots */}
+      {Array.from({ length: 5 }).map((_, index) => (
+        <div
+          key={index}
+          ref={(el) => (dotRefs.current[index] = el)}
+          className={styles.trailDot} // Use the CSS module class
+        />
+      ))}
+    </>
+  );
+};
+
+export default TrailingCursor;