chore(stage-web|stage-tamagotchi): improve animations

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>

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>

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>
 

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>

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>
 

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>
 

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>

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>
 

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>

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>

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>