From d323c21a40dfd7837e1d1693ecb0118f4a24b2c8 Mon Sep 17 00:00:00 2001
From: Chris <hizyyv@gmail.com>
Date: Mon, 19 Feb 2024 18:31:09 +0800
Subject: [PATCH] feat: update cursor

---
 components/Cursor.vue | 11 ++++++-----
 composables/cursor.ts |  8 +++++++-
 pages/index.vue       |  2 +-
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/components/Cursor.vue b/components/Cursor.vue
index e4cdabc..6788276 100644
--- a/components/Cursor.vue
+++ b/components/Cursor.vue
@@ -26,12 +26,14 @@ watch(() => route.fullPath, () => {
     id="dot"
     ref="dotRef"
     :style="style.dot"
-    class="bg-gray4"
+    bg-white
+    fixed
     z-99999
     opacity-0
+    w5 h5
     pointer-events-none
     rounded-full
-    fixed
+    trans
   />
   <div
     id="cursor"
@@ -49,6 +51,7 @@ watch(() => route.fullPath, () => {
       rounded-full
       w-16
       h-16
+      trans duration-500
       :style="style.circle"
     />
   </div>
@@ -60,10 +63,8 @@ watch(() => route.fullPath, () => {
 }
 
 #dot {
-  mix-blend-mode: normal;
+  mix-blend-mode: difference;
   transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
-  width: 9px;
-  height: 9px;
   transform: translate(-50%, -50%);
 }
 
diff --git a/composables/cursor.ts b/composables/cursor.ts
index 1a0f4b9..e1002a9 100644
--- a/composables/cursor.ts
+++ b/composables/cursor.ts
@@ -64,13 +64,19 @@ export function useDot(style: ICursorStyle) {
   })
 
   const toggleDotSize = (newStatus: boolean) => {
-    const scale = newStatus ? '1.8' : '1'
+    const scale = newStatus ? '1.5' : '1'
     const opacity = newStatus ? '0.5' : '1'
 
     style.dot = {
       ...style.dot,
       '--un-bg-opacity': opacity,
       'transform': `translate(-50%, -50%) scale(${scale})`,
+      opacity: newStatus ? '0.5' : '1',
+    }
+
+    style.circle = {
+      ...style.circle,
+      opacity: newStatus ? '0' : '1',
     }
   }
   const toggleDotVisibility = (newStatus: boolean) => {
diff --git a/pages/index.vue b/pages/index.vue
index 9d8bef2..63ab15c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -12,7 +12,7 @@ const { data: user } = await useFetch('/api/user')
       <UserAvatar />
     </h1>
     <p>
-      I'm <strong c-primary>{{ user?.name }}</strong>, front-end engineer 🧑🏻‍💻 & open source enthusiast.
+      I'm <strong trans hover="text-3xl" c-primary>{{ user?.name }}</strong>, front-end engineer 🧑🏻‍💻 & open source enthusiast.
     </p>
     <p italic>「 {{ user?.bio }} 」</p>
     <p>