From db29b73c8da29be4b826caf6605379f68f193d37 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Tue, 8 Apr 2025 13:18:33 +0800
Subject: [PATCH] chore(stage-web|stage-tamagotchi): improve animations

---
 .../src/pages/settings/airi-card/index.vue    |  7 +++---
 .../src/pages/settings/appearance/index.vue   |  5 +++--
 apps/stage-web/src/pages/settings/index.vue   | 22 ++++++++++---------
 .../src/pages/settings/memory/index.vue       |  5 +++--
 .../src/pages/settings/models/index.vue       | 15 +++++++++----
 .../pages/settings/modules/consciousness.vue  | 12 ++++++++--
 .../src/pages/settings/modules/index.vue      | 10 +++++----
 .../src/pages/settings/modules/speech.vue     | 11 +++++++---
 .../src/pages/settings/providers/index.vue    | 10 +++++----
 .../Providers/ProviderSettingsLayout.vue      |  7 +++---
 .../Providers/ProviderSettingsLayout2.vue     | 12 ++++++++--
 11 files changed, 77 insertions(+), 39 deletions(-)

diff --git a/apps/stage-web/src/pages/settings/airi-card/index.vue b/apps/stage-web/src/pages/settings/airi-card/index.vue
index 564f60f9a..8a550c232 100644
--- a/apps/stage-web/src/pages/settings/airi-card/index.vue
+++ b/apps/stage-web/src/pages/settings/airi-card/index.vue
@@ -251,7 +251,7 @@ function getModuleShortName(id: string, module: 'consciousness' | 'voice') {
           class="bg-primary-100/80 border-primary-400 dark:bg-primary-900/80 dark:border-primary-600 absolute inset-0 flex items-center justify-center border-2 rounded-xl"
         >
           <div class="text-center">
-            <div i-solar:upload-minimalistic-bold class="dark:text-primary-400 text-primary-500 mb-2 text-5xl" />
+            <div i-solar:upload-minimalistic-bold class="text-primary-500 dark:text-primary-400 mb-2 text-5xl" />
             <p font-medium text="primary-600 dark:primary-300">
               {{ t('settings.pages.card.drop_here') }}
             </p>
@@ -323,10 +323,11 @@ function getModuleShortName(id: string, module: 'consciousness' | 'voice') {
   <div
     v-motion
     text="neutral-200/50 dark:neutral-600/20" pointer-events-none
-    fixed top="[72dvh]" right--15 z--1
+    fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
     :initial="{ scale: 0.9, opacity: 0, x: 20 }"
     :enter="{ scale: 1, opacity: 1, x: 0 }"
-    :duration="250"
+    :duration="500"
+    size-60
   >
     <div text="60" i-lucide:id-card />
   </div>
diff --git a/apps/stage-web/src/pages/settings/appearance/index.vue b/apps/stage-web/src/pages/settings/appearance/index.vue
index 4ea27020f..023ba7b35 100644
--- a/apps/stage-web/src/pages/settings/appearance/index.vue
+++ b/apps/stage-web/src/pages/settings/appearance/index.vue
@@ -279,10 +279,11 @@ watch(() => [settings.usePageSpecificTransitions, settings.disableTransitions],
   <div
     v-motion
     text="neutral-200/50 dark:neutral-600/20" pointer-events-none
-    fixed top="[65dvh]" right--15 z--1
+    fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
     :initial="{ scale: 0.9, opacity: 0, rotate: 30 }"
     :enter="{ scale: 1, opacity: 1, rotate: 0 }"
-    :duration="250"
+    :duration="500"
+    size-60
   >
     <div text="60" i-lucide:paintbrush />
   </div>
diff --git a/apps/stage-web/src/pages/settings/index.vue b/apps/stage-web/src/pages/settings/index.vue
index 6bb1e83fc..0fafe7fb2 100644
--- a/apps/stage-web/src/pages/settings/index.vue
+++ b/apps/stage-web/src/pages/settings/index.vue
@@ -133,16 +133,6 @@ const settings = computed(() => [
         @click="(e: MouseEvent) => handleIconItemClick(e, setting)"
       />
     </div>
-    <div
-      v-motion
-      text="neutral-200/50 dark:neutral-600/20" pointer-events-none
-      fixed top="[75dvh]" right--15 z--1
-      :initial="{ scale: 0.9, opacity: 0, rotate: 45 }"
-      :enter="{ scale: 1, opacity: 1, rotate: 0 }"
-      :duration="500"
-    >
-      <div v-motion text="60" i-lucide:cog />
-    </div>
     <IconAnimation
       v-if="showAnimationComponent && !settingsStore.disableTransitions && settingsStore.usePageSpecificTransitions"
       ref="iconAnimation"
@@ -154,6 +144,18 @@ const settings = computed(() => [
       :started="iconAnimationStarted"
       @animation-ended.once="handleAnimationEnded"
     />
+    <div
+      v-else
+      v-motion
+      text="neutral-200/50 dark:neutral-600/20" pointer-events-none
+      fixed top="[calc(100dvh-12rem)]" bottom-0 right--10 z--1
+      :initial="{ scale: 0.9, opacity: 0, rotate: 45 }"
+      :enter="{ scale: 1, opacity: 1, rotate: 0 }"
+      :duration="500"
+      size-60
+    >
+      <div v-motion text="60" i-lucide:cog />
+    </div>
   </div>
 </template>
 
diff --git a/apps/stage-web/src/pages/settings/memory/index.vue b/apps/stage-web/src/pages/settings/memory/index.vue
index bab94751e..2bfcb1696 100644
--- a/apps/stage-web/src/pages/settings/memory/index.vue
+++ b/apps/stage-web/src/pages/settings/memory/index.vue
@@ -38,10 +38,11 @@ const { t } = useI18n()
     <div
       v-motion
       text="neutral-200/50 dark:neutral-600/20" pointer-events-none
-      fixed top="[65dvh]" right--15 z--1
+      fixed top="[calc(100dvh-20rem)]" bottom-0 right--15 z--1
       :initial="{ scale: 0.9, opacity: 0, y: 40 }"
       :enter="{ scale: 1, opacity: 1, y: 0 }"
-      :duration="250"
+      :duration="500"
+      size-60
     >
       <div text="60" i-lucide:sprout />
     </div>
diff --git a/apps/stage-web/src/pages/settings/models/index.vue b/apps/stage-web/src/pages/settings/models/index.vue
index f43798b71..d456cf751 100644
--- a/apps/stage-web/src/pages/settings/models/index.vue
+++ b/apps/stage-web/src/pages/settings/models/index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import Live2DCanvas from '@proj-airi/stage-ui/components/Live2D/Canvas.vue'
 import Live2DModel from '@proj-airi/stage-ui/components/Live2D/Model.vue'
-import { useSettings } from '@proj-airi/stage-ui/stores'
 import { useElementBounding } from '@vueuse/core'
 import { Vibrant } from 'node-vibrant/browser'
 import { ref } from 'vue'
@@ -16,7 +15,6 @@ const router = useRouter()
 const live2dContainerRef = ref<HTMLDivElement>()
 const live2dCanvasRef = ref<InstanceType<typeof Live2DCanvas>>()
 const { width, height } = useElementBounding(live2dContainerRef)
-const settingsStore = useSettings()
 
 const palette = ref<string[]>([])
 
@@ -88,8 +86,17 @@ const {
     position="calc(100dvw - 9.5rem), calc(100dvh - 9.5rem)"
     text-color="text-neutral-200/50 dark:text-neutral-600/20"
   />
-  <div v-if="!settingsStore.usePageSpecificTransitions" text="neutral-200/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 z--1 translate-x-10 translate-y-10>
-    <div text="40" i-lucide:person-standing />
+  <div
+    v-else
+    v-motion
+    text="neutral-200/50 dark:neutral-600/20" pointer-events-none
+    fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
+    :initial="{ scale: 0.9, opacity: 0, y: 15 }"
+    :enter="{ scale: 1, opacity: 1, y: 0 }"
+    :duration="500"
+    size-60
+  >
+    <div text="60" i-lucide:person-standing />
   </div>
 </template>
 
diff --git a/apps/stage-web/src/pages/settings/modules/consciousness.vue b/apps/stage-web/src/pages/settings/modules/consciousness.vue
index e9c4df044..593221cc3 100644
--- a/apps/stage-web/src/pages/settings/modules/consciousness.vue
+++ b/apps/stage-web/src/pages/settings/modules/consciousness.vue
@@ -214,8 +214,16 @@ function updateCustomModelName(value: string) {
     </div>
   </div>
 
-  <div text="neutral-200/50 dark:neutral-600/20" pointer-events-none fixed bottom-0 right-0 z--1 translate-x-10 translate-y-10>
-    <div text="40" i-lucide:ghost />
+  <div
+    v-motion
+    text="neutral-200/50 dark:neutral-600/20" pointer-events-none
+    fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
+    :initial="{ scale: 0.9, opacity: 0, x: 20 }"
+    :enter="{ scale: 1, opacity: 1, x: 0 }"
+    :duration="500"
+    size-60
+  >
+    <div text="60" i-lucide:ghost />
   </div>
 </template>
 
diff --git a/apps/stage-web/src/pages/settings/modules/index.vue b/apps/stage-web/src/pages/settings/modules/index.vue
index e4985a249..515b79da7 100644
--- a/apps/stage-web/src/pages/settings/modules/index.vue
+++ b/apps/stage-web/src/pages/settings/modules/index.vue
@@ -163,12 +163,14 @@ const {
     position="calc(100dvw - 9.5rem), calc(100dvh - 9.5rem)"
   />
   <div
+    v-else
     v-motion
     text="neutral-200/50 dark:neutral-600/20" pointer-events-none
-    fixed top="[72dvh]" right--15 z--1
-    :initial="{ scale: 0.9, opacity: 0, y: 0 }"
-    :enter="{ scale: 1, opacity: 1, y: 10 }"
-    :duration="250"
+    fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
+    :initial="{ scale: 0.9, opacity: 0, y: 20 }"
+    :enter="{ scale: 1, opacity: 1, y: 0 }"
+    :duration="500"
+    size-60
   >
     <div text="60" i-lucide:blocks />
   </div>
diff --git a/apps/stage-web/src/pages/settings/modules/speech.vue b/apps/stage-web/src/pages/settings/modules/speech.vue
index a8316d787..54d2b37cc 100644
--- a/apps/stage-web/src/pages/settings/modules/speech.vue
+++ b/apps/stage-web/src/pages/settings/modules/speech.vue
@@ -518,10 +518,15 @@ function updateCustomModelName(value: string) {
   </div>
 
   <div
-    text="neutral-200/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 z--1 translate-x-10
-    translate-y-10
+    v-motion
+    text="neutral-200/50 dark:neutral-600/20" pointer-events-none
+    fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
+    :initial="{ scale: 0.9, opacity: 0, x: 20 }"
+    :enter="{ scale: 1, opacity: 1, x: 0 }"
+    :duration="500"
+    size-60
   >
-    <div text="40" i-lucide:volume-2 />
+    <div text="60" i-lucide:mic />
   </div>
 </template>
 
diff --git a/apps/stage-web/src/pages/settings/providers/index.vue b/apps/stage-web/src/pages/settings/providers/index.vue
index 18aa02a2b..9fca830c3 100644
--- a/apps/stage-web/src/pages/settings/providers/index.vue
+++ b/apps/stage-web/src/pages/settings/providers/index.vue
@@ -70,12 +70,14 @@ const {
     text-color="text-neutral-200/50 dark:text-neutral-600/20"
   />
   <div
+    v-else
     v-motion
     text="neutral-200/50 dark:neutral-600/20" pointer-events-none
-    fixed top="[70dvh]" right--15 z--1
-    :initial="{ scale: 0.9, opacity: 0 }"
-    :enter="{ scale: 1, opacity: 1 }"
-    :duration="250"
+    fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
+    :initial="{ scale: 0.9, opacity: 0, y: 20 }"
+    :enter="{ scale: 1, opacity: 1, y: 0 }"
+    :duration="500"
+    size-60
   >
     <div text="60" i-lucide:brain />
   </div>
diff --git a/packages/stage-ui/src/components/Providers/ProviderSettingsLayout.vue b/packages/stage-ui/src/components/Providers/ProviderSettingsLayout.vue
index fa4bed035..605c6233e 100644
--- a/packages/stage-ui/src/components/Providers/ProviderSettingsLayout.vue
+++ b/packages/stage-ui/src/components/Providers/ProviderSettingsLayout.vue
@@ -32,10 +32,11 @@ defineProps<{
   <div
     v-motion
     text="neutral-200/50 dark:neutral-600/20" pointer-events-none
-    fixed top="[70dvh]" right-0 z--1
-    :initial="{ scale: 0.95, opacity: 0, x: 20 }"
+    fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
+    :initial="{ scale: 0.9, opacity: 0, x: 20 }"
     :enter="{ scale: 1, opacity: 1, x: 0 }"
-    :duration="250"
+    :duration="500"
+    size-60
   >
     <div text="60" :class="providerIcon || providerIconColor" />
   </div>
diff --git a/packages/stage-ui/src/components/Providers/ProviderSettingsLayout2.vue b/packages/stage-ui/src/components/Providers/ProviderSettingsLayout2.vue
index 422ee608f..b6ae6939f 100644
--- a/packages/stage-ui/src/components/Providers/ProviderSettingsLayout2.vue
+++ b/packages/stage-ui/src/components/Providers/ProviderSettingsLayout2.vue
@@ -120,8 +120,16 @@ function handleBackClick() {
     <slot />
 
     <!-- Background icon -->
-    <div text="neutral-200/50 dark:neutral-600/20" pointer-events-none fixed bottom-0 right-0 z--1 translate-x-10 translate-y-10>
-      <div text="40" :class="providerIcon || providerIconColor" />
+    <div
+      v-motion
+      text="neutral-200/50 dark:neutral-600/20" pointer-events-none
+      fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
+      :initial="{ scale: 0.9, opacity: 0, x: 20 }"
+      :enter="{ scale: 1, opacity: 1, x: 0 }"
+      :duration="500"
+      size-60
+    >
+      <div text="60" :class="providerIcon || providerIconColor" />
     </div>
   </div>
 </template>