From faf548b82a51a28284422819fceaab67a785ea4f Mon Sep 17 00:00:00 2001
From: Cupid Valentine <westerngod@126.com>
Date: Sun, 20 Oct 2024 23:54:04 +0800
Subject: [PATCH] feat: add cursor style

---
 components/BackgroundWrapper.tsx |  2 ++
 components/Cursor.tsx            | 28 ++++++++++++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 components/Cursor.tsx

diff --git a/components/BackgroundWrapper.tsx b/components/BackgroundWrapper.tsx
index 91a729c..0a3bed9 100644
--- a/components/BackgroundWrapper.tsx
+++ b/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 }}
diff --git a/components/Cursor.tsx b/components/Cursor.tsx
new file mode 100644
index 0000000..8a924ac
--- /dev/null
+++ b/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>
+  )
+}