feat: update cursor

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%);
 }
 

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) => {

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>