feat: add custom cursor component

src/app/layout.tsx

@@ -3,7 +3,7 @@ import "@/once-ui/tokens/index.scss";
 
 import classNames from "classnames";
 
-import { Footer, Header, RouteGuard } from "@/components";
+import { Footer, Header, RouteGuard, CustomCursor } from "@/components";
 import { baseURL, effects, style, font, home } from "@/app/resources";
 
 import { Background, Column, Flex, ThemeProvider, ToastProvider } from "@/once-ui/components";
@@ -71,6 +71,7 @@ export default async function RootLayout({ children }: RootLayoutProps) {
       <ThemeProvider>
         <ToastProvider>
           <Column style={{ minHeight: "100vh" }} as="body" fillWidth margin="0" padding="0">
+            <CustomCursor />
             <Background
               position="fixed"
               mask={{

src/components/CustomCursor.module.scss

@@ -0,0 +1,24 @@
+.cursor {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgb(172, 172, 172); /* iPadOS-like semi-transparent */
+  border: 2px solid rgba(255,255,255,0.5);
+  box-shadow: 0 2px 8px 2px rgba(0,0,0,0.10);
+  pointer-events: none;
+  z-index: 2147483647;
+  mix-blend-mode: normal;
+  transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s, box-shadow 0.2s;
+  will-change: transform, background;
+  display: block;
+  transform: translate3d(-50%, -50%, 0); /* Center the cursor on pointer */
+}
+
+@media (max-width: 768px) {
+  .cursor {
+    display: none;
+  }
+}

src/components/CustomCursor.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import styles from "./CustomCursor.module.scss";
+
+const CustomCursor: React.FC = () => {
+  const cursorRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Hide the default cursor
+    document.body.style.cursor = "none";
+    const moveCursor = (e: MouseEvent) => {
+      if (cursorRef.current) {
+        // Center the custom cursor on the pointer
+        cursorRef.current.style.transform = `translate3d(${e.clientX - 10}px, ${e.clientY - 10}px, 0)`;
+      }
+    };
+    document.addEventListener("mousemove", moveCursor);
+    return () => {
+      document.body.style.cursor = "";
+      document.removeEventListener("mousemove", moveCursor);
+    };
+  }, []);
+
+  return <div ref={cursorRef} className={styles.cursor} />;
+};
+
+export default CustomCursor;

src/components/index.ts

@@ -4,3 +4,4 @@ export { Mailchimp } from "@/components/Mailchimp";
 export { ProjectCard } from "@/components/ProjectCard";
 export { HeadingLink } from "@/components/HeadingLink";
 export { RouteGuard } from "@/components/RouteGuard";
+export { default as CustomCursor } from "@/components/CustomCursor";