From bd97f54233153d56a4f93e3d92d50ed4cdaccb25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=80=E7=BA=B8=E5=BF=98=E5=BF=A7?= <i@ikxin.com>
Date: Sun, 22 Mar 2026 20:57:02 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E9=9B=86=E6=88=90=20motion-v=20?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E7=BB=84=E4=BB=B6=E9=97=B4=E7=9A=84=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/assets/css/main.css               |  50 +++++++
 app/components/AppFooter.vue          |  32 ++++-
 app/components/AppHeader.vue          | 114 +++++++++++-----
 app/components/CommonActivate.vue     | 129 +++++++++++-------
 app/components/CommonTips.vue         |  44 +++++--
 app/composables/useMotionPresets.ts   | 111 ++++++++++++++++
 app/layouts/default.vue               |  46 ++++++-
 app/pages/activate.vue                | 126 +++++++++++-------
 app/pages/activate/office.vue         |  22 +++-
 app/pages/activate/windows-server.vue |  22 +++-
 app/pages/activate/windows.vue        |  22 +++-
 app/pages/check/index.vue             | 133 ++++++++++++-------
 app/pages/index.vue                   | 180 +++++++++++++++++++-------
 app/pages/monitor.vue                 |  26 +++-
 nuxt.config.ts                        |   8 +-
 package.json                          |   1 +
 pnpm-lock.yaml                        |  62 ++++++++-
 server/tasks/monitor.ts               |   2 +-
 zbpack.json                           |   5 +-
 19 files changed, 855 insertions(+), 280 deletions(-)
 create mode 100644 app/composables/useMotionPresets.ts

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 7ad8d294..930153ef 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -1,5 +1,23 @@
 body {
+  background:
+    radial-gradient(
+      circle at top left,
+      rgba(232, 83, 73, 0.08),
+      transparent 28%
+    ),
+    radial-gradient(
+      circle at top right,
+      rgba(48, 111, 255, 0.08),
+      transparent 32%
+    ),
+    linear-gradient(
+      180deg,
+      var(--color-bg-1) 0%,
+      var(--color-neutral-2) 46%,
+      var(--color-bg-1) 100%
+    );
   background-color: var(--color-neutral-2);
+  background-attachment: fixed;
   color: var(--color-text-2);
   --border-radius-small: 4px;
   --border-radius-medium: 6px;
@@ -10,6 +28,38 @@ body {
   @apply flex min-h-screen flex-col gap-4;
 }
 
+a,
+button,
+.arco-btn,
+.arco-card,
+.arco-menu-item,
+.arco-link {
+  transition:
+    transform 0.25s ease,
+    box-shadow 0.25s ease,
+    border-color 0.25s ease,
+    background-color 0.25s ease,
+    color 0.25s ease;
+}
+
+/* .arco-card,
+.arco-collapse,
+.arco-collapse-item,
+.arco-collapse-item-header,
+.arco-collapse-item-content,
+.arco-menu,
+.arco-menu-inner,
+.arco-menu-light,
+.arco-layout-sider,
+.arco-layout-sider-light,
+.arco-layout-sider-children,
+.arco-menu-inline-header,
+.arco-menu-inline-content,
+.arco-menu-item,
+.arco-menu-item-inner {
+  background-color: transparent !important;
+} */
+
 .arco-drawer-body {
   padding: 0;
 }
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 58fe4e41..130e3c9f 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -1,5 +1,9 @@
 <script lang="ts" setup>
+import { motion } from 'motion-v'
+
 const { t } = useI18n()
+
+const { hidden, hoverLift, press, viewport, visible } = useMotionPresets()
 </script>
 
 <template>
@@ -8,24 +12,40 @@ const { t } = useI18n()
       class="mx-auto flex min-h-14 max-w-full flex-col items-center justify-center gap-1 py-3 text-center text-sm md:flex-row md:gap-0 md:py-0"
     >
       <ASpace wrap class="justify-center">
-        <div>
+        <motion.div
+          :initial="hidden(14)"
+          :whileInView="visible()"
+          :inViewOptions="viewport"
+          :whileHover="hoverLift(3, 1.01)"
+        >
           Copyright &copy; {{ new Date().getFullYear() }}
           <ALink target="_blank" href="https://github.com/ikxin/kms-tools">
             KMS Tools
           </ALink>
-        </div>
-        <div>
+        </motion.div>
+        <motion.div
+          :initial="hidden(14)"
+          :whileInView="visible(0.05)"
+          :inViewOptions="viewport"
+          :whileHover="hoverLift(3, 1.01)"
+        >
           Running on
           <ALink target="_blank" href="https://www.asiayun.com/aff/TVXVRALM">
             AsiaYun
           </ALink>
-        </div>
-        <div>
+        </motion.div>
+        <motion.div
+          :initial="hidden(14)"
+          :whileInView="visible(0.1)"
+          :inViewOptions="viewport"
+          :whileHover="hoverLift(3, 1.01)"
+          :whilePress="press"
+        >
           Code with by
           <ALink target="_blank" href="https://blog.ikxin.com">
             {{ t('label.author') }}
           </ALink>
-        </div>
+        </motion.div>
       </ASpace>
     </div>
   </ALayoutFooter>
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 77ceb5e3..9c3b3c13 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { motion } from 'motion-v'
+import logoUrl from '~/assets/icons/kms-tools.svg'
+
 const route = useRoute()
 
 const { locales, t, setLocale } = useI18n()
 
+const { hidden, hoverLift, press, visible } = useMotionPresets()
+
 const localePath = useLocalePath()
 
 const path = computed(() => route.path.slice(1).split('/'))
 
+const activeSection = computed(() => path.value[0] || '')
+
 const drawerVisible = ref(false)
 
 const navItems = computed(() => [
@@ -50,45 +57,63 @@ function handleNavClick(name: string) {
 
 <template>
   <ALayoutHeader
-    class="sticky top-0 z-[100] flex h-20 select-none items-center bg-[--color-bg-2] px-4 shadow-md"
+    class="sticky top-0 z-[100] flex h-20 select-none items-center border-b border-white/10 bg-[--color-bg-2]/80 px-4 shadow-md backdrop-blur-xl"
   >
     <div class="mx-auto flex w-[72rem] max-w-full items-center justify-between">
-      <img
-        src="/assets/icons/kms-tools.svg"
+      <motion.img
+        :src="logoUrl"
         alt="KMS Tools"
         class="h-14 w-auto cursor-pointer"
+        :initial="hidden(10)"
+        :animate="visible(0.02)"
+        :whileHover="{ scale: 1.04, rotate: -2 }"
+        :whilePress="press"
         @click="navigateTo(localePath('/'))"
       />
 
-      <!-- Desktop Menu -->
-      <AMenu
-        :selected-keys="path"
-        mode="horizontal"
-        class="hidden grow md:flex [&_.arco-menu-overflow-wrap]:text-end [&_.arco-menu-selected-label]:left-4"
-      >
-        <AMenuItem
+      <nav class="hidden grow items-center justify-center gap-2 md:flex">
+        <motion.button
           v-for="item in navItems"
           :key="item.name"
-          class="!inline-flex items-center gap-1"
+          type="button"
+          class="relative flex items-center gap-2 overflow-hidden rounded-full px-4 py-2 text-sm font-medium text-[var(--color-text-2)] transition-colors hover:text-[var(--color-text-1)]"
+          :initial="hidden(10)"
+          :animate="visible(navItems.findIndex(nav => nav.name === item.name) * 0.05 + 0.08)"
+          :whileHover="hoverLift(4, 1.02)"
+          :whilePress="press"
           @click="handleNavClick(item.name)"
         >
-          <Icon :name="item.icon" />
-          <span>{{ item.label }}</span>
-        </AMenuItem>
-      </AMenu>
+          <motion.span
+            v-if="activeSection === item.name"
+            layoutId="header-nav-pill"
+            class="absolute inset-0 rounded-full bg-[rgb(var(--primary-6))]/14 ring-1 ring-[rgb(var(--primary-6))]/20"
+          />
+          <span class="relative z-[1] inline-flex items-center gap-2">
+            <Icon :name="item.icon" />
+            <span>{{ item.label }}</span>
+          </span>
+        </motion.button>
+      </nav>
 
       <ASpace>
         <ADropdown>
-          <AButton size="small" type="secondary">
-            <template #icon>
-              <ClientOnly>
-                <Icon :name="`icons:${$colorMode.preference}-mode`" />
-                <template #fallback>
-                  <Icon :name="`icons:system-mode`" />
-                </template>
-              </ClientOnly>
-            </template>
-          </AButton>
+          <motion.div
+            :initial="hidden(10)"
+            :animate="visible(0.14)"
+            :whileHover="hoverLift(3, 1.04)"
+            :whilePress="press"
+          >
+            <AButton size="small" type="secondary">
+              <template #icon>
+                <ClientOnly>
+                  <Icon :name="`icons:${$colorMode.preference}-mode`" />
+                  <template #fallback>
+                    <Icon :name="`icons:system-mode`" />
+                  </template>
+                </ClientOnly>
+              </template>
+            </AButton>
+          </motion.div>
           <template #content>
             <ADoption
               v-for="item in themeItems"
@@ -103,9 +128,16 @@ function handleNavClick(name: string) {
           </template>
         </ADropdown>
         <ADropdown>
-          <AButton size="small" type="secondary">
-            <template #icon><Icon name="icons:languages" /></template>
-          </AButton>
+          <motion.div
+            :initial="hidden(10)"
+            :animate="visible(0.18)"
+            :whileHover="hoverLift(3, 1.04)"
+            :whilePress="press"
+          >
+            <AButton size="small" type="secondary">
+              <template #icon><Icon name="icons:languages" /></template>
+            </AButton>
+          </motion.div>
           <template #content>
             <ADoption
               v-for="locale in locales"
@@ -120,16 +152,30 @@ function handleNavClick(name: string) {
           </template>
         </ADropdown>
         <a target="_blank" href="https://github.com/ikxin/kms-tools">
-          <AButton size="small" type="secondary">
-            <template #icon><Icon name="icons:github" /></template>
-          </AButton>
+          <motion.div
+            :initial="hidden(10)"
+            :animate="visible(0.22)"
+            :whileHover="hoverLift(3, 1.04)"
+            :whilePress="press"
+          >
+            <AButton size="small" type="secondary">
+              <template #icon><Icon name="icons:github" /></template>
+            </AButton>
+          </motion.div>
         </a>
 
         <!-- Mobile Hamburger -->
         <div class="md:hidden">
-          <AButton size="small" type="secondary" @click="drawerVisible = true">
-            <template #icon><Icon name="material-symbols:menu" /></template>
-          </AButton>
+          <motion.div
+            :initial="hidden(10)"
+            :animate="visible(0.24)"
+            :whileHover="hoverLift(3, 1.04)"
+            :whilePress="press"
+          >
+            <AButton size="small" type="secondary" @click="drawerVisible = true">
+              <template #icon><Icon name="material-symbols:menu" /></template>
+            </AButton>
+          </motion.div>
         </div>
       </ASpace>
     </div>
diff --git a/app/components/CommonActivate.vue b/app/components/CommonActivate.vue
index 83cf21d8..a45e4833 100644
--- a/app/components/CommonActivate.vue
+++ b/app/components/CommonActivate.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { motion } from 'motion-v'
+
 const { gvlksData, title, generateScript } = defineProps<{
   gvlksData: GvlksData[]
   title: string
@@ -7,6 +9,8 @@ const { gvlksData, title, generateScript } = defineProps<{
 
 const { t, locale } = useI18n()
 
+const { hidden, hoverLift, press, viewport, visible } = useMotionPresets()
+
 const monitorData = useState<MonitorInfo[]>('monitorData')
 
 const rankVal = ref(1)
@@ -68,16 +72,31 @@ const { copy, copied } = useClipboard({
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
-    <ACard>
+  <motion.div class="flex flex-col gap-4" :initial="hidden(22, 0.98)" :animate="visible(0.04)">
+    <motion.div
+      :initial="hidden(24, 0.98)"
+      :whileInView="visible()"
+      :inViewOptions="viewport"
+      :whileHover="hoverLift(6, 1.005)"
+    >
+      <ACard class="!bg-transparent relative overflow-hidden">
+        <div
+          class="pointer-events-none absolute -right-12 top-0 h-32 w-32 rounded-full bg-[rgb(var(--primary-6))]/12 blur-3xl"
+        />
       <template #title>
-        <div class="flex items-center gap-2">
+        <motion.div
+          class="flex items-center gap-2"
+          :initial="hidden(12)"
+          :whileInView="visible()"
+          :inViewOptions="viewport"
+        >
           <i :class="`i-icons:${title.toLowerCase().replace(/ /g, '-')}`" />
           <span>{{ title }}</span>
-        </div>
+        </motion.div>
       </template>
       <AForm :model="formData" layout="vertical">
-        <AFormItem :label="t('label.edition')" field="edition" required>
+        <motion.div :initial="hidden(16)" :whileInView="visible(0.04)" :inViewOptions="viewport">
+          <AFormItem :label="t('label.edition')" field="edition" required>
           <ASelect v-model="formData.edition">
             <template v-for="item in gvlksData" :key="item.version">
               <AOptgroup :label="item.version">
@@ -90,19 +109,23 @@ const { copy, copied } = useClipboard({
               </AOptgroup>
             </template>
           </ASelect>
-        </AFormItem>
-        <AFormItem
+          </AFormItem>
+        </motion.div>
+        <motion.div
           v-if="title.toLowerCase() === 'office'"
-          field="arch"
-          :label="t('label.arch')"
-          required
+          :initial="hidden(16)"
+          :whileInView="visible(0.08)"
+          :inViewOptions="viewport"
         >
-          <ARadioGroup v-model="formData.arch" type="button">
-            <ARadio value="x64">{{ t('label.x64') }}</ARadio>
-            <ARadio value="x86">{{ t('label.x86') }}</ARadio>
-          </ARadioGroup>
-        </AFormItem>
-        <AFormItem :label="t('label.host')" field="host" required>
+          <AFormItem field="arch" :label="t('label.arch')" required>
+            <ARadioGroup v-model="formData.arch" type="button">
+              <ARadio value="x64">{{ t('label.x64') }}</ARadio>
+              <ARadio value="x86">{{ t('label.x86') }}</ARadio>
+            </ARadioGroup>
+          </AFormItem>
+        </motion.div>
+        <motion.div :initial="hidden(16)" :whileInView="visible(0.12)" :inViewOptions="viewport">
+          <AFormItem :label="t('label.host')" field="host" required>
           <ASelect v-model="formData.host">
             <template v-for="item in monitorData" :key="item.host">
               <AOption
@@ -125,37 +148,49 @@ const { copy, copied } = useClipboard({
               </AOption>
             </template>
           </ASelect>
-        </AFormItem>
-        <AFormItem :label="t('label.license')" field="license" required>
-          <AInput v-model="formData.license" disabled />
-        </AFormItem>
-        <AFormItem :label="t('label.script')" required>
-          <ClientOnly fallback-tag="textarea">
-            <ATextarea v-model="content" auto-size />
-            <template #fallback>
-              <ATextarea auto-size />
-            </template>
-          </ClientOnly>
-        </AFormItem>
-        <AFormItem>
-          <ASpace size="small">
-            <ClientOnly fallback-tag="a">
-              <a :href="fileUrl" :download="file.name">
-                <AButton type="primary">
-                  {{ t('label.download') }}
-                </AButton>
-              </a>
+          </AFormItem>
+        </motion.div>
+        <motion.div :initial="hidden(16)" :whileInView="visible(0.16)" :inViewOptions="viewport">
+          <AFormItem :label="t('label.license')" field="license" required>
+            <AInput v-model="formData.license" disabled />
+          </AFormItem>
+        </motion.div>
+        <motion.div :initial="hidden(16)" :whileInView="visible(0.2)" :inViewOptions="viewport" layout>
+          <AFormItem :label="t('label.script')" required>
+            <ClientOnly fallback-tag="textarea">
+              <ATextarea v-model="content" auto-size />
+              <template #fallback>
+                <ATextarea auto-size />
+              </template>
             </ClientOnly>
-            <AButton
-              type="secondary"
-              :status="copied ? 'success' : 'normal'"
-              @click="copy()"
-            >
-              {{ copied ? t('label.copy-success') : t('label.copy') }}
-            </AButton>
-          </ASpace>
-        </AFormItem>
+          </AFormItem>
+        </motion.div>
+        <motion.div :initial="hidden(16)" :whileInView="visible(0.24)" :inViewOptions="viewport" layout>
+          <AFormItem>
+            <ASpace size="small">
+              <ClientOnly fallback-tag="a">
+                <a :href="fileUrl" :download="file.name">
+                  <motion.div :whileHover="hoverLift(4, 1.03)" :whilePress="press">
+                    <AButton type="primary">
+                      {{ t('label.download') }}
+                    </AButton>
+                  </motion.div>
+                </a>
+              </ClientOnly>
+              <motion.div :whileHover="hoverLift(4, 1.03)" :whilePress="press" layout>
+                <AButton
+                  type="secondary"
+                  :status="copied ? 'success' : 'normal'"
+                  @click="copy()"
+                >
+                  {{ copied ? t('label.copy-success') : t('label.copy') }}
+                </AButton>
+              </motion.div>
+            </ASpace>
+          </AFormItem>
+        </motion.div>
       </AForm>
-    </ACard>
-  </div>
+      </ACard>
+    </motion.div>
+  </motion.div>
 </template>
diff --git a/app/components/CommonTips.vue b/app/components/CommonTips.vue
index 548dbab9..4e6acc25 100644
--- a/app/components/CommonTips.vue
+++ b/app/components/CommonTips.vue
@@ -1,6 +1,10 @@
 <script lang="ts" setup>
+import { motion } from 'motion-v'
+
 const { t, locale } = useI18n()
 
+const { hidden, hoverLift, viewport, visible } = useMotionPresets()
+
 const zhTips = [
   {
     key: 1,
@@ -58,7 +62,7 @@ const enTips = [
 ]
 
 const tips = computed(() => {
-  if (locale.value === 'zh-cn' || locale.value === 'zh-tw') {
+  if (locale.value === 'zh-cn') {
     return zhTips
   } else {
     return enTips
@@ -67,17 +71,29 @@ const tips = computed(() => {
 </script>
 
 <template>
-  <ACard>
-    <template #title>
-      <div class="flex items-center gap-2">
-        <i :class="`i-icons:tips`" />
-        <span>{{ t('title.tips') }}</span>
-      </div>
-    </template>
-    <ACollapse>
-      <ACollapseItem v-for="{ key, header, content } in tips" :key :header>
-        <span class="leading-relaxed select-text" v-html="content"></span>
-      </ACollapseItem>
-    </ACollapse>
-  </ACard>
+  <motion.div
+    :initial="hidden(22, 0.98)"
+    :whileInView="visible(0.04)"
+    :inViewOptions="viewport"
+    :whileHover="hoverLift(6, 1.004)"
+  >
+    <ACard class="!bg-transparent">
+      <template #title>
+        <motion.div
+          class="flex items-center gap-2"
+          :initial="hidden(12)"
+          :whileInView="visible()"
+          :inViewOptions="viewport"
+        >
+          <i :class="`i-icons:tips`" />
+          <span>{{ t('title.tips') }}</span>
+        </motion.div>
+      </template>
+      <ACollapse>
+        <ACollapseItem v-for="{ key, header, content } in tips" :key :header>
+          <span class="select-text leading-relaxed" v-html="content"></span>
+        </ACollapseItem>
+      </ACollapse>
+    </ACard>
+  </motion.div>
 </template>
diff --git a/app/composables/useMotionPresets.ts b/app/composables/useMotionPresets.ts
new file mode 100644
index 00000000..a1ea7e39
--- /dev/null
+++ b/app/composables/useMotionPresets.ts
@@ -0,0 +1,111 @@
+import { useReducedMotion } from 'motion-v'
+
+const easeOut = [0.22, 1, 0.36, 1] as const
+
+const springTransition = {
+  type: 'spring',
+  stiffness: 120,
+  damping: 20,
+  mass: 1,
+} as const
+
+export function useMotionPresets() {
+  const reduceMotion = useReducedMotion()
+
+  const viewport = {
+    once: true,
+    amount: 0.2,
+  } as const
+
+  const hidden = (y = 16, scale = 1) => {
+    if (reduceMotion.value) {
+      return { opacity: 1, y: 0, scale: 1, filter: 'blur(0px)' }
+    }
+
+    return {
+      opacity: 0,
+      y,
+      scale,
+      filter: 'blur(6px)',
+    }
+  }
+
+  const visible = (delay = 0) => {
+    if (reduceMotion.value) {
+      return { opacity: 1, y: 0, scale: 1, filter: 'blur(0px)' }
+    }
+
+    return {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      filter: 'blur(0px)',
+      transition: {
+        ...springTransition,
+        delay,
+      },
+    }
+  }
+
+  const softExit = (y = -10) => {
+    if (reduceMotion.value) {
+      return { opacity: 1 }
+    }
+
+    return {
+      opacity: 0,
+      y,
+      filter: 'blur(4px)',
+      transition: {
+        duration: 0.2,
+        ease: 'easeInOut',
+      },
+    }
+  }
+
+  const hoverLift = (distance = 5, scale = 1.01) => {
+    if (reduceMotion.value) {
+      return {}
+    }
+
+    return {
+      y: -distance,
+      scale,
+      transition: {
+        duration: 0.22,
+        ease: easeOut,
+      },
+    }
+  }
+
+  const press = reduceMotion.value ? { scale: 1 } : { scale: 0.985 }
+
+  const float = (distance = 8, duration = 9) => {
+    if (reduceMotion.value) {
+      return {}
+    }
+
+    return {
+      y: [0, -distance, 0],
+      rotate: [0, 0.6, 0],
+      transition: {
+        duration,
+        ease: 'easeInOut' as const,
+        repeat: Infinity,
+      },
+    }
+  }
+
+  return {
+    easeOut,
+    float,
+    hidden,
+    hoverLift,
+    press,
+    reduceMotion,
+    softExit,
+    springTransition,
+    viewport,
+    visible,
+  }
+}
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 64ab5107..abd11c9e 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,8 +1,12 @@
 <script setup>
+import { AnimatePresence, motion } from 'motion-v'
+
 const route = useRoute()
 
 const { t } = useI18n()
 
+const { hidden, reduceMotion, softExit, visible } = useMotionPresets()
+
 const head = useLocaleHead()
 
 const title = computed(() => {
@@ -32,14 +36,42 @@ const title = computed(() => {
         />
       </template>
     </Head>
-    <Body>
-      <AppHeader />
-      <section
-        class="mx-auto flex w-[72rem] max-w-full flex-1 gap-4 px-3 md:px-0"
+    <Body class="relative overflow-x-clip">
+      <div class="pointer-events-none fixed inset-0 overflow-hidden">
+        <div
+          class="bg-[rgb(var(--primary-6))]/12 absolute left-[-8rem] top-28 h-72 w-72 rounded-full blur-3xl"
+        />
+        <div
+          class="bg-[#f3bb4b]/16 absolute right-[-7rem] top-36 h-64 w-64 rounded-full blur-3xl"
+        />
+        <div
+          class="absolute bottom-[-8rem] left-1/3 h-80 w-80 rounded-full bg-[#e85349]/10 blur-3xl"
+        />
+      </div>
+
+      <motion.div :initial="hidden(14)" :animate="visible()">
+        <AppHeader />
+      </motion.div>
+
+      <AnimatePresence mode="wait">
+        <motion.section
+          :key="route.fullPath"
+          class="mx-auto flex w-[72rem] max-w-full flex-1 gap-4 px-3 md:px-0"
+          :initial="hidden(18, 0.99)"
+          :animate="visible(0.04)"
+          :exit="softExit()"
+        >
+          <slot></slot>
+        </motion.section>
+      </AnimatePresence>
+
+      <motion.div
+        :initial="hidden(18)"
+        :whileInView="visible(0.05)"
+        :inViewOptions="{ once: true, amount: 0.15 }"
       >
-        <slot></slot>
-      </section>
-      <AppFooter />
+        <AppFooter />
+      </motion.div>
     </Body>
   </Html>
 </template>
diff --git a/app/pages/activate.vue b/app/pages/activate.vue
index 1cc31c20..40c08b31 100644
--- a/app/pages/activate.vue
+++ b/app/pages/activate.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
+import { motion } from 'motion-v'
+
 const route = useRoute()
 
 const localePath = useLocalePath()
 
 const { t } = useI18n()
 
+const { hidden, hoverLift, press, visible } = useMotionPresets()
+
 const path = computed(() => route.path.slice(1).split('/'))
 
 const drawerVisible = ref(false)
@@ -28,13 +32,18 @@ function handleMenuClick(key: string) {
 
 <template>
   <!-- Mobile: floating left-edge tab -->
-  <div
+  <motion.button
     v-show="!drawerVisible"
+    type="button"
     class="fixed left-0 top-1/3 z-[100] -translate-y-1/2 cursor-pointer rounded-r-lg bg-[rgb(var(--primary-6))] px-1 py-4 text-white shadow-lg md:hidden"
+    :initial="hidden(0, 0.95)"
+    :animate="visible(0.08)"
+    :whileHover="{ x: 6, scale: 1.04 }"
+    :whilePress="press"
     @click="drawerVisible = true"
   >
     <Icon name="material-symbols:chevron-right" class="text-base" />
-  </div>
+  </motion.button>
 
   <!-- Mobile: left-side drawer -->
   <ADrawer
@@ -76,56 +85,75 @@ function handleMenuClick(key: string) {
   </ADrawer>
 
   <!-- Mobile: page content -->
-  <div class="flex w-full flex-col gap-4 md:hidden">
+  <motion.div
+    class="flex w-full flex-col gap-4 md:hidden"
+    :initial="hidden(20, 0.98)"
+    :animate="visible(0.04)"
+  >
     <NuxtPage />
-  </div>
+  </motion.div>
 
   <!-- Desktop: Sidebar layout -->
-  <ALayoutSider
-    :width="240"
-    class="hidden rounded md:block [&>.arco-layout-sider-children]:rounded"
+  <motion.div
+    class="hidden md:block"
+    :initial="hidden(20, 0.98)"
+    :animate="visible(0.05)"
   >
-    <AMenu
-      :selected-keys="path"
-      :default-open-keys="['system', 'software']"
-      class="h-full select-none [&>.arco-menu-inner]:p-2 [&_.arco-menu-icon>i]:inline-block"
-    >
-      <ASubMenu key="system">
-        <template #icon>
-          <Icon name="icons:system" />
-        </template>
-        <template #title>{{ t('label.system') }}</template>
-        <AMenuItem key="windows" @click="handleMenuClick('windows')">
-          <template #icon>
-            <Icon name="icons:windows" />
-          </template>
-          <span>Windows</span>
-        </AMenuItem>
-        <AMenuItem
-          key="windows-server"
-          @click="handleMenuClick('windows-server')"
+    <motion.div :whileHover="hoverLift(6, 1.01)">
+      <ALayoutSider
+        :width="240"
+        class="hidden rounded md:block [&>.arco-layout-sider-children]:rounded [&>.arco-layout-sider-children]:!bg-transparent"
+      >
+        <AMenu
+          :selected-keys="path"
+          :default-open-keys="['system', 'software']"
+          class="h-full select-none [&>.arco-menu-inner]:p-2 [&_.arco-menu-icon>i]:inline-block"
         >
-          <template #icon>
-            <Icon name="icons:windows-server" />
-          </template>
-          <span>Windows Server</span>
-        </AMenuItem>
-      </ASubMenu>
-      <ASubMenu key="software">
-        <template #icon>
-          <Icon name="icons:software" />
-        </template>
-        <template #title>{{ t('label.software') }}</template>
-        <AMenuItem key="office" @click="handleMenuClick('office')">
-          <template #icon>
-            <Icon name="icons:office" />
-          </template>
-          <span>Office</span>
-        </AMenuItem>
-      </ASubMenu>
-    </AMenu>
-  </ALayoutSider>
-  <ALayoutContent class="hidden flex-col gap-4 md:flex">
-    <NuxtPage />
-  </ALayoutContent>
+          <ASubMenu key="system">
+            <template #icon>
+              <Icon name="icons:system" />
+            </template>
+            <template #title>{{ t('label.system') }}</template>
+            <AMenuItem key="windows" @click="handleMenuClick('windows')">
+              <template #icon>
+                <Icon name="icons:windows" />
+              </template>
+              <span>Windows</span>
+            </AMenuItem>
+            <AMenuItem
+              key="windows-server"
+              @click="handleMenuClick('windows-server')"
+            >
+              <template #icon>
+                <Icon name="icons:windows-server" />
+              </template>
+              <span>Windows Server</span>
+            </AMenuItem>
+          </ASubMenu>
+          <ASubMenu key="software">
+            <template #icon>
+              <Icon name="icons:software" />
+            </template>
+            <template #title>{{ t('label.software') }}</template>
+            <AMenuItem key="office" @click="handleMenuClick('office')">
+              <template #icon>
+                <Icon name="icons:office" />
+              </template>
+              <span>Office</span>
+            </AMenuItem>
+          </ASubMenu>
+        </AMenu>
+      </ALayoutSider>
+    </motion.div>
+  </motion.div>
+
+  <motion.div
+    class="hidden min-w-0 flex-1 md:flex"
+    :initial="hidden(24, 0.98)"
+    :animate="visible(0.1)"
+  >
+    <ALayoutContent class="hidden min-w-0 flex-1 flex-col gap-4 md:flex">
+      <NuxtPage />
+    </ALayoutContent>
+  </motion.div>
 </template>
diff --git a/app/pages/activate/office.vue b/app/pages/activate/office.vue
index 6427b10d..e63085c2 100644
--- a/app/pages/activate/office.vue
+++ b/app/pages/activate/office.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
+import { motion } from 'motion-v'
+
 definePageMeta({
   title: 'pages.activate.title.office',
 })
 
+const { hidden, visible } = useMotionPresets()
+
 function generateScript(formData: ActivateFormData) {
   const { edition, arch, host, license } = formData
 
@@ -23,10 +27,16 @@ function generateScript(formData: ActivateFormData) {
 </script>
 
 <template>
-  <CommonActivate
-    title="Office"
-    :gvlksData="OFFICE_GVLKS"
-    :generateScript
-  ></CommonActivate>
-  <CommonTips></CommonTips>
+  <div class="flex w-full flex-col gap-4">
+    <motion.div :initial="hidden(18, 0.98)" :animate="visible(0.04)">
+      <CommonActivate
+        title="Office"
+        :gvlksData="OFFICE_GVLKS"
+        :generateScript
+      ></CommonActivate>
+    </motion.div>
+    <motion.div :initial="hidden(18, 0.98)" :animate="visible(0.12)">
+      <CommonTips></CommonTips>
+    </motion.div>
+  </div>
 </template>
diff --git a/app/pages/activate/windows-server.vue b/app/pages/activate/windows-server.vue
index a30b5256..5c3cb247 100644
--- a/app/pages/activate/windows-server.vue
+++ b/app/pages/activate/windows-server.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
+import { motion } from 'motion-v'
+
 definePageMeta({
   title: 'pages.activate.title.windows-server',
 })
 
+const { hidden, visible } = useMotionPresets()
+
 function generateScript(formData: ActivateFormData) {
   const { host, license } = formData
   return (
@@ -16,10 +20,16 @@ function generateScript(formData: ActivateFormData) {
 </script>
 
 <template>
-  <CommonActivate
-    title="Windows Server"
-    :gvlksData="WINDOWS_SERVER_GVLKS"
-    :generateScript
-  ></CommonActivate>
-  <CommonTips></CommonTips>
+  <div class="flex w-full flex-col gap-4">
+    <motion.div :initial="hidden(18, 0.98)" :animate="visible(0.04)">
+      <CommonActivate
+        title="Windows Server"
+        :gvlksData="WINDOWS_SERVER_GVLKS"
+        :generateScript
+      ></CommonActivate>
+    </motion.div>
+    <motion.div :initial="hidden(18, 0.98)" :animate="visible(0.12)">
+      <CommonTips></CommonTips>
+    </motion.div>
+  </div>
 </template>
diff --git a/app/pages/activate/windows.vue b/app/pages/activate/windows.vue
index 8be71327..20921f25 100644
--- a/app/pages/activate/windows.vue
+++ b/app/pages/activate/windows.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
+import { motion } from 'motion-v'
+
 definePageMeta({
   title: 'pages.activate.title.windows',
 })
 
+const { hidden, visible } = useMotionPresets()
+
 function generateScript(formData: ActivateFormData) {
   const { host, license } = formData
   return (
@@ -16,10 +20,16 @@ function generateScript(formData: ActivateFormData) {
 </script>
 
 <template>
-  <CommonActivate
-    title="Windows"
-    :gvlksData="WINDOWS_GVLKS"
-    :generateScript
-  ></CommonActivate>
-  <CommonTips></CommonTips>
+  <div class="flex w-full flex-col gap-4">
+    <motion.div :initial="hidden(18, 0.98)" :animate="visible(0.04)">
+      <CommonActivate
+        title="Windows"
+        :gvlksData="WINDOWS_GVLKS"
+        :generateScript
+      ></CommonActivate>
+    </motion.div>
+    <motion.div :initial="hidden(18, 0.98)" :animate="visible(0.12)">
+      <CommonTips></CommonTips>
+    </motion.div>
+  </div>
 </template>
diff --git a/app/pages/check/index.vue b/app/pages/check/index.vue
index 209b9855..d6a106d5 100644
--- a/app/pages/check/index.vue
+++ b/app/pages/check/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ValidatedError } from '@arco-design/web-vue'
+import { AnimatePresence, motion } from 'motion-v'
 
 definePageMeta({
   title: 'pages.check.title',
@@ -7,6 +8,8 @@ definePageMeta({
 
 const { t } = useI18n()
 
+const { hidden, hoverLift, press, viewport, visible } = useMotionPresets()
+
 const formData = ref({
   host: 'kms.8b5.cn',
   port: '1688',
@@ -48,52 +51,86 @@ const handleSubmit = async (data: {
 </script>
 
 <template>
-  <ACard class="h-full w-full">
-    <template #title>
-      <div class="flex items-center gap-2">
-        <Icon name="icons:check" />
-        <span>{{ t('title.kms-check') }}</span>
-      </div>
-    </template>
-    <ASpin :loading="resultInfo.loading" dot class="w-full">
-      <AForm :model="formData" @submit="handleSubmit" layout="vertical">
-        <AFormItem :label="t('label.host')" field="host" required>
-          <AInput v-model="formData.host"></AInput>
-        </AFormItem>
-        <AFormItem :label="t('label.port')" field="port" required>
-          <AInput v-model="formData.port"></AInput>
-        </AFormItem>
-        <AFormItem :label="t('label.edition')" field="edition" required>
-          <ASelect v-model="formData.edition">
-            <AOption
-              v-for="(value, key) in appItems"
-              :key="key"
-              :value="key"
-              :label="value"
-            />
-          </ASelect>
-        </AFormItem>
-        <AFormItem :label="t('label.protocol')" field="protocol" required>
-          <ASelect v-model="formData.protocol">
-            <AOption value="6">V6 Protocol</AOption>
-            <AOption value="5">V5 Protocol</AOption>
-            <AOption value="4">V4 Protocol</AOption>
-          </ASelect>
-        </AFormItem>
-        <AFormItem>
-          <AButton html-type="submit" type="primary">
-            {{ t('label.submit') }}
-          </AButton>
-        </AFormItem>
-      </AForm>
-      <AAlert
-        v-show="resultInfo.visible"
-        :type="resultInfo.type"
-        :title="resultInfo.type"
-        class="whitespace-pre"
-      >
-        {{ resultInfo.message }}
-      </AAlert>
-    </ASpin>
-  </ACard>
+  <motion.div
+    class="w-full"
+    :initial="hidden(22, 0.98)"
+    :animate="visible(0.04)"
+    :whileHover="hoverLift(6, 1.004)"
+  >
+    <ACard class="!bg-transparent h-full w-full overflow-hidden">
+      <template #title>
+        <motion.div
+          class="flex items-center gap-2"
+          :initial="hidden(12)"
+          :whileInView="visible()"
+          :inViewOptions="viewport"
+        >
+          <Icon name="icons:check" />
+          <span>{{ t('title.kms-check') }}</span>
+        </motion.div>
+      </template>
+      <ASpin :loading="resultInfo.loading" dot class="w-full">
+        <AForm :model="formData" @submit="handleSubmit" layout="vertical">
+          <motion.div :initial="hidden(16)" :whileInView="visible(0.04)" :inViewOptions="viewport">
+            <AFormItem :label="t('label.host')" field="host" required>
+              <AInput v-model="formData.host"></AInput>
+            </AFormItem>
+          </motion.div>
+          <motion.div :initial="hidden(16)" :whileInView="visible(0.08)" :inViewOptions="viewport">
+            <AFormItem :label="t('label.port')" field="port" required>
+              <AInput v-model="formData.port"></AInput>
+            </AFormItem>
+          </motion.div>
+          <motion.div :initial="hidden(16)" :whileInView="visible(0.12)" :inViewOptions="viewport">
+            <AFormItem :label="t('label.edition')" field="edition" required>
+              <ASelect v-model="formData.edition">
+                <AOption
+                  v-for="(value, key) in appItems"
+                  :key="key"
+                  :value="key"
+                  :label="value"
+                />
+              </ASelect>
+            </AFormItem>
+          </motion.div>
+          <motion.div :initial="hidden(16)" :whileInView="visible(0.16)" :inViewOptions="viewport">
+            <AFormItem :label="t('label.protocol')" field="protocol" required>
+              <ASelect v-model="formData.protocol">
+                <AOption value="6">V6 Protocol</AOption>
+                <AOption value="5">V5 Protocol</AOption>
+                <AOption value="4">V4 Protocol</AOption>
+              </ASelect>
+            </AFormItem>
+          </motion.div>
+          <motion.div :initial="hidden(16)" :whileInView="visible(0.2)" :inViewOptions="viewport">
+            <AFormItem>
+              <motion.div :whileHover="hoverLift(4, 1.03)" :whilePress="press">
+                <AButton html-type="submit" type="primary">
+                  {{ t('label.submit') }}
+                </AButton>
+              </motion.div>
+            </AFormItem>
+          </motion.div>
+        </AForm>
+
+        <AnimatePresence>
+          <motion.div
+            v-if="resultInfo.visible"
+            key="check-result"
+            :initial="hidden(14, 0.98)"
+            :animate="visible(0.04)"
+            :exit="{ opacity: 0, y: -10, transition: { duration: 0.18 } }"
+          >
+            <AAlert
+              :type="resultInfo.type"
+              :title="resultInfo.type"
+              class="whitespace-pre"
+            >
+              {{ resultInfo.message }}
+            </AAlert>
+          </motion.div>
+        </AnimatePresence>
+      </ASpin>
+    </ACard>
+  </motion.div>
 </template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index a6e4ced0..d1c116d1 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,7 +1,19 @@
 <script setup lang="ts">
+import { motion, useScroll, useTransform } from 'motion-v'
+
+const heroIllustrationUrl = '/images/homepage-right.svg'
+
 const { t } = useI18n()
 const localePath = useLocalePath()
 
+const { hidden, hoverLift, press, reduceMotion, viewport, visible } =
+  useMotionPresets()
+
+const { scrollYProgress } = useScroll()
+
+const heroImageY = useTransform(scrollYProgress, [0, 0.45], [0, -20])
+const heroImageRotate = useTransform(scrollYProgress, [0, 0.45], [0, -1])
+
 const features = computed(() => [
   {
     key: 'activate',
@@ -23,87 +35,165 @@ const features = computed(() => [
 
 <template>
   <div class="flex w-full flex-col gap-6">
-    <!-- Hero Section -->
-    <div class="w-full rounded bg-[var(--color-bg-2)] p-6 shadow-lg md:p-10">
+    <motion.section
+      class="bg-[var(--color-bg-2)]/90 relative w-full overflow-hidden rounded-lg border border-black/5 p-6 shadow-lg shadow-black/10 md:p-10 dark:border-white/10 dark:shadow-black/5"
+      :initial="hidden(24, 0.98)"
+      :animate="visible(0.02)"
+      layout
+    >
       <div
-        class="flex flex-col items-center gap-8 py-4 md:flex-row md:gap-12 md:py-8"
+        class="bg-[#e85349]/16 absolute -left-10 top-8 h-36 w-36 rounded-full blur-3xl"
+      />
+      <div
+        class="bg-[rgb(var(--primary-6))]/14 absolute bottom-0 right-0 h-44 w-44 rounded-full blur-3xl"
+      />
+
+      <div
+        class="relative flex flex-col items-center gap-8 py-4 md:flex-row md:gap-12 md:py-8"
       >
         <div class="w-full text-center md:w-1/2 md:text-left">
-          <h2
+          <motion.h2
             class="mx-auto mb-4 w-fit bg-gradient-to-r from-[#e85349] to-[#f3bb4b] bg-clip-text text-4xl font-bold text-transparent md:mx-0 md:mb-6 md:text-7xl"
+            :initial="hidden(24, 0.96)"
+            :animate="visible(0.08)"
           >
             KMS Tools
-          </h2>
-          <p
+          </motion.h2>
+          <motion.p
             class="mb-3 text-2xl font-bold text-[var(--color-text-2)] md:mb-4 md:text-4xl"
+            :initial="hidden(20)"
+            :animate="visible(0.14)"
           >
             {{ t('home.hero.subtitle') }}
-          </p>
-          <p
+          </motion.p>
+          <motion.p
             class="mb-6 text-base text-[var(--color-text-3)] md:mb-8 md:text-xl"
+            :initial="hidden(18)"
+            :animate="visible(0.2)"
           >
             {{ t('home.hero.description') }}
-          </p>
+          </motion.p>
+
           <div class="flex justify-center gap-3 md:justify-start md:gap-4">
             <NuxtLink :to="localePath('/activate/windows')">
-              <AButton type="primary" size="large">
-                {{ t('home.hero.get-started') }}
-              </AButton>
+              <motion.div
+                :initial="hidden(12)"
+                :animate="visible(0.3)"
+                :whileHover="hoverLift(5, 1.03)"
+                :whilePress="press"
+              >
+                <AButton type="primary" size="large">
+                  {{ t('home.hero.get-started') }}
+                </AButton>
+              </motion.div>
             </NuxtLink>
             <NuxtLink to="https://github.com/ikxin/kms-tools" target="_blank">
-              <AButton size="large">
-                {{ t('home.hero.view-on-github') }}
-              </AButton>
+              <motion.div
+                :initial="hidden(12)"
+                :animate="visible(0.36)"
+                :whileHover="hoverLift(5, 1.03)"
+                :whilePress="press"
+              >
+                <AButton size="large">
+                  {{ t('home.hero.view-on-github') }}
+                </AButton>
+              </motion.div>
             </NuxtLink>
           </div>
         </div>
         <div class="hidden w-1/2 justify-center md:flex">
-          <img
-            src="/images/homepage-right.svg"
-            alt="KMS Tools"
-            class="h-auto max-w-full"
-          />
+          <motion.div
+            class="relative"
+            :style="{ y: heroImageY, rotate: heroImageRotate }"
+            :whileHover="{ scale: 1.015, rotate: -1.5 }"
+          >
+            <div
+              class="bg-[rgb(var(--primary-6))]/14 absolute inset-6 rounded-full blur-3xl"
+            />
+            <img
+              :src="heroIllustrationUrl"
+              alt="KMS Tools"
+              class="relative block h-auto w-full max-w-[30rem]"
+            />
+          </motion.div>
         </div>
       </div>
-    </div>
+    </motion.section>
 
-    <!-- Features Section -->
-    <div class="w-full rounded bg-[var(--color-bg-2)] p-6 shadow-lg md:p-10">
-      <div class="mb-6 text-center md:mb-8">
-        <h3
+    <motion.section
+      class="bg-[var(--color-bg-2)]/90 w-full rounded-lg border border-black/5 p-6 shadow-lg shadow-black/10 md:p-10 dark:border-white/10 dark:shadow-black/5"
+      :initial="hidden(24, 0.98)"
+      :whileInView="visible(0.04)"
+      :inViewOptions="viewport"
+      layout
+    >
+      <motion.div
+        class="mb-6 text-center md:mb-8"
+        :initial="hidden(18)"
+        :whileInView="visible()"
+        :inViewOptions="viewport"
+      >
+        <motion.h3
           class="mb-2 text-2xl font-bold text-[var(--color-text-1)] md:text-3xl"
+          :initial="hidden(18)"
+          :whileInView="visible()"
+          :inViewOptions="viewport"
         >
           {{ t('home.features.title') }}
-        </h3>
-        <p class="text-sm text-[var(--color-text-3)] md:text-base">
+        </motion.h3>
+        <motion.p
+          class="text-sm text-[var(--color-text-3)] md:text-base"
+          :initial="hidden(14)"
+          :whileInView="visible(0.05)"
+          :inViewOptions="viewport"
+        >
           {{ t('home.features.subtitle') }}
-        </p>
-      </div>
+        </motion.p>
+      </motion.div>
       <div class="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-6">
         <NuxtLink
           v-for="feature in features"
           :key="feature.key"
           :to="localePath(feature.link)"
-          class="group rounded-lg border border-[var(--color-border)] p-5 transition-all hover:border-[rgb(var(--primary-6))] hover:shadow-md md:p-6"
         >
-          <div
-            class="mb-3 inline-flex rounded-lg bg-[rgb(var(--primary-6))]/10 p-3 md:mb-4"
+          <motion.div
+            class="group relative h-full overflow-hidden rounded-lg border border-[var(--color-border)] bg-white/[0.02] p-5 transition-all md:p-6"
+            :initial="hidden(20, 0.97)"
+            :whileInView="
+              visible(
+                features.findIndex(item => item.key === feature.key) * 0.08,
+              )
+            "
+            :inViewOptions="viewport"
+            :whileHover="hoverLift(6, 1.012)"
+            :whilePress="press"
+            layout
           >
-            <Icon
-              :name="feature.icon"
-              class="text-2xl text-[rgb(var(--primary-6))]"
+            <div
+              class="absolute -right-10 -top-10 h-28 w-28 rounded-full bg-[rgb(var(--primary-6))]/10 blur-3xl"
             />
-          </div>
-          <h4
-            class="mb-2 text-lg font-semibold text-[var(--color-text-1)] group-hover:text-[rgb(var(--primary-6))]"
-          >
-            {{ t(`home.features.${feature.key}.title`) }}
-          </h4>
-          <p class="text-sm leading-relaxed text-[var(--color-text-3)]">
-            {{ t(`home.features.${feature.key}.description`) }}
-          </p>
+            <motion.div
+              class="relative mb-3 inline-flex rounded-2xl bg-[rgb(var(--primary-6))]/10 p-3 md:mb-4"
+              :whileHover="{ rotate: -3, scale: 1.04 }"
+            >
+              <Icon
+                :name="feature.icon"
+                class="text-2xl text-[rgb(var(--primary-6))]"
+              />
+            </motion.div>
+            <h4
+              class="relative mb-2 text-lg font-semibold text-[var(--color-text-1)] group-hover:text-[rgb(var(--primary-6))]"
+            >
+              {{ t(`home.features.${feature.key}.title`) }}
+            </h4>
+            <p
+              class="relative text-sm leading-relaxed text-[var(--color-text-3)]"
+            >
+              {{ t(`home.features.${feature.key}.description`) }}
+            </p>
+          </motion.div>
         </NuxtLink>
       </div>
-    </div>
+    </motion.section>
   </div>
 </template>
diff --git a/app/pages/monitor.vue b/app/pages/monitor.vue
index 2e2dd092..baf2b7a6 100644
--- a/app/pages/monitor.vue
+++ b/app/pages/monitor.vue
@@ -1,10 +1,14 @@
 <script lang="ts" setup>
+import { motion } from 'motion-v'
+
 definePageMeta({
   title: 'pages.monitor.title',
 })
 
 const monitorData = useState<MonitorInfo[]>('monitorData')
 
+const { hidden, hoverLift, viewport, visible } = useMotionPresets()
+
 function getColor(value: number): string {
   if (value < 0) return '#d9d9d9'
   if (value < 200) return '#52c41a'
@@ -61,13 +65,21 @@ function getChartOption(item: MonitorInfo): ECOption {
 <template>
   <div class="flex w-full flex-col gap-4" ref="monitor">
     <template v-for="item in monitorData" :key="item.host">
-      <ACard :title="item.host">
-        <VChart
-          :autoresize="true"
-          :option="getChartOption(item)"
-          class="h-32 w-full"
-        />
-      </ACard>
+      <motion.div
+        :initial="hidden(20, 0.98)"
+        :whileInView="visible(0.04)"
+        :inViewOptions="viewport"
+        :whileHover="hoverLift(8, 1.006)"
+        layout
+      >
+        <ACard :title="item.host" class="!bg-transparent overflow-hidden">
+          <VChart
+            :autoresize="true"
+            :option="getChartOption(item)"
+            class="h-32 w-full"
+          />
+        </ACard>
+      </motion.div>
     </template>
   </div>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 23ed027c..896d19ad 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,7 +3,7 @@
 const getMonitorCron = () => {
   const raw = parseInt(
     process.env.NUXT_MONITOR_INTERVAL || process.env.MONITOR_INTERVAL || '10',
-    10,
+    60,
   )
   const seconds = isNaN(raw) || raw <= 0 ? 10 : raw
   if (seconds < 60) {
@@ -38,6 +38,11 @@ export default defineNuxtConfig({
       ],
     },
   },
+  vite: {
+    optimizeDeps: {
+      include: ['@vue/devtools-core', '@vue/devtools-kit'],
+    },
+  },
   runtimeConfig: {
     monitorList: '',
     monitorInterval: '10',
@@ -61,6 +66,7 @@ export default defineNuxtConfig({
     '@nuxtjs/i18n',
     '@nuxtjs/color-mode',
     '@vueuse/nuxt',
+    'motion-v/nuxt',
     'nuxt-echarts',
   ],
   colorMode: {
diff --git a/package.json b/package.json
index a70a1288..a0432d99 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@vueuse/nuxt": "14.2.1",
     "arco-design-nuxt-module": "^0.2.1",
     "echarts": "^6.0.0",
+    "motion-v": "^2.0.1",
     "nuxt": "^4.4.2",
     "nuxt-echarts": "^1.0.1",
     "prettier": "^3.8.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9818ca4f..841e4f66 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ importers:
       echarts:
         specifier: ^6.0.0
         version: 6.0.0
+      motion-v:
+        specifier: ^2.0.1
+        version: 2.0.1(@vueuse/core@14.2.1(vue@3.5.30(typescript@5.9.3)))(vue@3.5.30(typescript@5.9.3))
       nuxt:
         specifier: ^4.4.2
         version: 4.4.2(@babel/core@7.29.0)(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@netlify/blobs@9.1.2)(@parcel/watcher@2.5.6)(@types/node@22.15.19)(@vue/compiler-sfc@3.5.30)(cac@6.7.14)(db0@0.3.4)(eslint@9.17.0(jiti@2.6.1))(ioredis@5.10.0)(magicast@0.5.2)(optionator@0.9.4)(rollup-plugin-visualizer@6.0.11(rollup@4.59.0))(rollup@4.59.0)(terser@5.46.0)(tsx@4.19.2)(typescript@5.9.3)(vite@7.3.1(@types/node@22.15.19)(jiti@2.6.1)(terser@5.46.0)(tsx@4.19.2)(yaml@2.8.2))(yaml@2.8.2)
@@ -3006,6 +3009,20 @@ packages:
   fraction.js@5.3.4:
     resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
 
+  framer-motion@12.38.0:
+    resolution: {integrity: sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -3136,6 +3153,9 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hey-listen@1.0.8:
+    resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==}
+
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
@@ -3565,6 +3585,18 @@ packages:
   mocked-exports@0.1.1:
     resolution: {integrity: sha512-aF7yRQr/Q0O2/4pIXm6PZ5G+jAd7QS4Yu8m+WEeEHGnbo+7mE36CbLSDQiXYV8bVL3NfmdeqPJct0tUlnjVSnA==}
 
+  motion-dom@12.38.0:
+    resolution: {integrity: sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==}
+
+  motion-utils@12.36.0:
+    resolution: {integrity: sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==}
+
+  motion-v@2.0.1:
+    resolution: {integrity: sha512-oTzIRROq01knJLnCV4BqQQ7jdonrp29AIdYE1tJar/ls7b5rEZnexWGhuilVmZUl+ulI+6a7HXEFe1YV/FEPBA==}
+    peerDependencies:
+      '@vueuse/core': '>=10.0.0'
+      vue: '>=3.0.0'
+
   mrmime@2.0.1:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
@@ -7975,6 +8007,12 @@ snapshots:
 
   fraction.js@5.3.4: {}
 
+  framer-motion@12.38.0:
+    dependencies:
+      motion-dom: 12.38.0
+      motion-utils: 12.36.0
+      tslib: 2.8.1
+
   fresh@0.5.2: {}
 
   fresh@2.0.0: {}
@@ -8120,6 +8158,8 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hey-listen@1.0.8: {}
+
   hookable@5.5.3: {}
 
   hookable@6.1.0: {}
@@ -8571,6 +8611,25 @@ snapshots:
 
   mocked-exports@0.1.1: {}
 
+  motion-dom@12.38.0:
+    dependencies:
+      motion-utils: 12.36.0
+
+  motion-utils@12.36.0: {}
+
+  motion-v@2.0.1(@vueuse/core@14.2.1(vue@3.5.30(typescript@5.9.3)))(vue@3.5.30(typescript@5.9.3)):
+    dependencies:
+      '@vueuse/core': 14.2.1(vue@3.5.30(typescript@5.9.3))
+      framer-motion: 12.38.0
+      hey-listen: 1.0.8
+      motion-dom: 12.38.0
+      motion-utils: 12.36.0
+      vue: 3.5.30(typescript@5.9.3)
+    transitivePeerDependencies:
+      - '@emotion/is-prop-valid'
+      - react
+      - react-dom
+
   mrmime@2.0.1: {}
 
   ms@2.1.3: {}
@@ -9897,8 +9956,7 @@ snapshots:
 
   tslib@2.3.0: {}
 
-  tslib@2.8.1:
-    optional: true
+  tslib@2.8.1: {}
 
   tsscmp@1.0.6: {}
 
diff --git a/server/tasks/monitor.ts b/server/tasks/monitor.ts
index dc05ff5f..d00a8752 100644
--- a/server/tasks/monitor.ts
+++ b/server/tasks/monitor.ts
@@ -32,7 +32,7 @@ export default defineTask({
 
     const count = results.filter(item => {
       if (!item.status) {
-        console.log('Monitor failed:', item.host)
+        // console.log('Monitor failed:', item.host)
       }
       return item.status
     }).length
diff --git a/zbpack.json b/zbpack.json
index 19a5b759..a6570925 100644
--- a/zbpack.json
+++ b/zbpack.json
@@ -1,3 +1,6 @@
 {
-  "ignore_dockerfile": true
+  "app_dir": "/",
+  "build_command": "pnpm run -w build",
+  "ignore_dockerfile": true,
+  "start_command": "node .output/server/index.mjs"
 }

From 0b8509841f02e34f643a5e3e452061af2b084f16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=80=E7=BA=B8=E5=BF=98=E5=BF=A7?= <i@ikxin.com>
Date: Sun, 22 Mar 2026 21:37:37 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4=E6=9E=84=E5=BB=BA?=
 =?UTF-8?q?=E5=92=8C=E5=90=AF=E5=8A=A8=E5=91=BD=E4=BB=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 zbpack.json | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/zbpack.json b/zbpack.json
index a6570925..11ddbf35 100644
--- a/zbpack.json
+++ b/zbpack.json
@@ -1,6 +1,4 @@
 {
   "app_dir": "/",
-  "build_command": "pnpm run -w build",
-  "ignore_dockerfile": true,
-  "start_command": "node .output/server/index.mjs"
+  "ignore_dockerfile": true
 }