feat: add cursor style

components/BackgroundWrapper.tsx

@@ -5,6 +5,7 @@ import { Canvas, useFrame } from '@react-three/fiber'
 import { motion } from 'framer-motion'
 import dynamic from 'next/dynamic'
 import React, { useRef } from 'react'
+import Cursor from './Cursor'
 import { pointsInner, pointsOuter } from './utils'
 
 const ScrollTopAndComment = dynamic(() => import('./ScrollTopAndComment'), { ssr: false })
@@ -60,6 +61,7 @@ function Point({ position, color }) {
 export default function BackgroundWrapper({ children }: { children: React.ReactNode }) {
   return (
     <div className="h-screen w-screen">
+      <Cursor />
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}

components/Cursor.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import React, { useEffect, useState } from 'react'
+
+export default function Cursor() {
+  const [position, setPosition] = useState({ x: 0, y: 0 })
+
+  useEffect(() => {
+    const mouseMove = (e) => {
+      setPosition({ x: e.clientX, y: e.clientY })
+    }
+
+    window.addEventListener('mousemove', mouseMove)
+
+    return () => {
+      window.removeEventListener('mousemove', mouseMove)
+    }
+  }, [])
+
+  return (
+    <motion.div
+      className="fixed z-[999] size-12 rounded-full border border-black dark:border-white"
+      animate={{ x: position.x + 10, y: position.y + 10 }}
+    >
+    </motion.div>
+  )
+}