Merge pull request #200 from TheCoderAdi/feat/added-cursor-animation

Puskar-Roy · web-flow · commit d6ede8900a4c · 2025-03-22T19:18:33.000+05:30
Adding cursor following animation
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -3,6 +3,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { Navbar } from "../components/Navbar";
 import GlobalWrapper from "../components/common/GlobalWrapper";
+import CursorFollower from "../components/common/CursorFollower";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -19,6 +20,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
+        <CursorFollower />
         <GlobalWrapper>
           <Navbar />
           {children}
diff --git a/apps/web/components/common/CursorFollower.tsx b/apps/web/components/common/CursorFollower.tsx
@@ -0,0 +1,26 @@
+"use client";
+import { useEffect, useRef } from "react";
+
+const CursorFollower = () => {
+  const cursorRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const moveCursor = (e: MouseEvent) => {
+      if (cursorRef.current) {
+        cursorRef.current.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
+      }
+    };
+
+    document.addEventListener("mousemove", moveCursor);
+    return () => document.removeEventListener("mousemove", moveCursor);
+  }, []);
+
+  return (
+    <div
+      ref={cursorRef}
+      className="fixed z-[50] top-0 left-0 w-6 h-6 bg-white/70 opacity-75 rounded-full pointer-events-none shadow-[0_0_10px_#fff] transition-transform duration-75 ease-out"
+    />
+  );
+};
+
+export default CursorFollower;
