refactor(docs): remove motion-v dependency and enhance background decoration with particle effects

Author: honghuangdc

docs/package.json

@@ -19,7 +19,6 @@
   "dependencies": {
     "@soybeanjs/ui": "workspace:^",
     "@unocss/reset": "^66.5.9",
-    "motion-v": "^1.7.4",
     "nprogress": "^0.2.0",
     "pinia": "^3.0.4",
     "vue": "^3.5.24",

docs/src/components/app-header.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { SButton, SDrawer, SIcon } from '@soybeanjs/ui';
 import { useI18n } from 'vue-i18n';
+import pkg from '../../package.json' with { type: 'json' };
 import ToolBar from './tool-bar.vue';
 
 const router = useRouter();
@@ -64,7 +65,7 @@ function goHome() {
         <div
           class="hidden md:block text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full"
         >
-          v0.0.1
+          {{ pkg.version }}
         </div>
 
         <!-- Tools -->

docs/src/motion/background-decoration.vue

@@ -1,41 +1,66 @@
 <script setup lang="ts">
-import { Motion } from 'motion-v';
+import { computed } from 'vue';
 
 const orbs = [
   {
     size: 'w-[500px] h-[500px]',
-    color: 'bg-blue-400/20 dark:bg-blue-600/20',
-    initial: { x: -100, y: -100 },
-    animate: {
-      x: [0, 100, -50, 0],
-      y: [0, -50, 100, 0],
-      scale: [1, 1.2, 0.9, 1]
-    },
-    duration: 20
+    color: 'bg-blue-400/20 dark:bg-blue-600/20'
   },
   {
     size: 'w-[400px] h-[400px]',
-    color: 'bg-purple-400/20 dark:bg-purple-600/20',
-    initial: { x: 400, y: 200 },
-    animate: {
-      x: [0, -100, 50, 0],
-      y: [0, 100, -50, 0],
-      scale: [1, 0.8, 1.1, 1]
-    },
-    duration: 25
+    color: 'bg-purple-400/20 dark:bg-purple-600/20'
   },
   {
     size: 'w-[300px] h-[300px]',
-    color: 'bg-cyan-400/20 dark:bg-cyan-600/20',
-    initial: { x: 100, y: 400 },
-    animate: {
-      x: [0, 50, -100, 0],
-      y: [0, -100, 50, 0],
-      scale: [1, 1.1, 0.9, 1]
-    },
-    duration: 18
+    color: 'bg-cyan-400/20 dark:bg-cyan-600/20'
   }
 ];
+
+// Tech Particles 配置
+const particleColors = [
+  'bg-primary',
+  'bg-purple-500',
+  'bg-cyan-500',
+  'bg-pink-500',
+  'bg-indigo-500',
+  'bg-teal-500',
+  'bg-rose-500',
+  'bg-amber-500',
+  'bg-emerald-500'
+];
+
+const particleSizes = ['w-1 h-1', 'w-1.5 h-1.5', 'w-2 h-2'];
+
+// 生成9个粒子，使用3x3网格均匀分布
+const gridCols = 3;
+const gridRows = 3;
+const totalParticles = gridCols * gridRows;
+
+const particles = computed(() => {
+  return Array.from({ length: totalParticles }, (_, index) => {
+    const col = index % gridCols;
+    const row = Math.floor(index / gridCols);
+
+    // 计算均匀分布的位置（留出边距，避免太靠边）
+    const leftPercent = 10 + col * (80 / (gridCols - 1));
+    const topPercent = 10 + row * (80 / (gridRows - 1));
+
+    // 随机选择颜色和大小
+    const color = particleColors[index % particleColors.length];
+    const size = particleSizes[index % particleSizes.length];
+
+    // 延迟时间（0-2000ms之间，每个粒子间隔约200ms）
+    const delay = index * 200;
+
+    return {
+      color,
+      size,
+      left: leftPercent,
+      top: topPercent,
+      delay
+    };
+  });
+});
 </script>
 
 <template>
@@ -46,16 +71,9 @@ const orbs = [
     />
 
     <!-- Floating Orbs -->
-    <Motion
+    <div
       v-for="(orb, index) in orbs"
       :key="index"
-      :initial="orb.initial"
-      :animate="orb.animate"
-      :transition="{
-        duration: orb.duration,
-        repeat: Infinity,
-        ease: 'linear'
-      }"
       class="absolute rounded-full blur-[100px]"
       :class="[orb.size, orb.color]"
       :style="{
@@ -66,9 +84,17 @@ const orbs = [
 
     <!-- Tech Particles / Accents -->
     <div class="absolute inset-0 opacity-30 dark:opacity-50">
-      <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-primary rounded-full animate-ping" />
-      <div class="absolute top-3/4 right-1/4 w-1.5 h-1.5 bg-purple-500 rounded-full animate-ping delay-700" />
-      <div class="absolute bottom-1/4 left-1/2 w-1 h-1 bg-cyan-500 rounded-full animate-ping delay-1000" />
+      <div
+        v-for="(particle, index) in particles"
+        :key="index"
+        :style="{
+          left: `${particle.left}%`,
+          top: `${particle.top}%`,
+          animationDelay: `${particle.delay}ms`
+        }"
+        class="absolute rounded-full animate-ping"
+        :class="[particle.color, particle.size]"
+      />
     </div>
   </div>
 </template>

docs/src/pages/index.vue

@@ -4,7 +4,6 @@ import { useRouter } from 'vue-router';
 import { useDark } from '@vueuse/core';
 import { SIcon } from '@soybeanjs/ui';
 import { useI18n } from 'vue-i18n';
-import { Motion } from 'motion-v';
 import BackgroundDecoration from '@/motion/background-decoration.vue';
 
 const router = useRouter();
@@ -37,14 +36,6 @@ const features = computed(() => [
     class: 'text-pink-500'
   }
 ]);
-
-function getDelay(index: number) {
-  return {
-    delay: index * 0.1 + 0.5,
-    duration: 0.5,
-    ease: 'easeOut' as const
-  };
-}
 </script>
 
 <template>
@@ -55,56 +46,31 @@ function getDelay(index: number) {
 
     <div class="container mx-auto px-4 relative z-10">
       <div class="text-center max-w-5xl mx-auto">
-        <Motion
-          :initial="{ opacity: 0, scale: 0.5 }"
-          :animate="{ opacity: 1, scale: 1 }"
-          :transition="{ duration: 0.8, ease: 'easeOut' }"
-          class="lg:!mt-4 mt-28 mb-4 inline-block relative z-20"
-        >
-          <Motion :animate="{ y: [0, -20, 0] }" :transition="{ duration: 2, repeat: Infinity, ease: 'easeInOut' }">
-            <div class="group relative">
-              <div
-                class="absolute inset-0 bg-primary/20 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"
-              />
-              <img
-                src="/logo.svg"
-                alt="Logo"
-                class="size-28 md:size-36 mx-auto drop-shadow-2xl filter relative z-10 transition-transform duration-300 group-hover:scale-105"
-              />
-            </div>
-          </Motion>
-        </Motion>
+        <div class="logo-float group relative z-20 mt-28 mb-4 lg:!mt-4">
+          <div
+            class="absolute inset-0 bg-primary/20 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+          />
+          <img
+            src="/logo.svg"
+            alt="Logo"
+            class="size-28 md:size-36 mx-auto drop-shadow-2xl filter relative z-10 transition-transform duration-300 group-hover:scale-105"
+          />
+        </div>
 
-        <Motion
-          :initial="{ opacity: 0, y: 50 }"
-          :animate="{ opacity: 1, y: 0 }"
-          :transition="{ duration: 0.8, ease: 'easeOut' }"
-        >
+        <div class="hero-content">
           <h1
             class="text-4xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-8 bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-primary dark:from-primary dark:to-primary-300"
           >
             {{ t('components.home.title') }}
           </h1>
-        </Motion>
-
-        <Motion
-          :initial="{ opacity: 0, y: 30 }"
-          :animate="{ opacity: 1, y: 0 }"
-          :transition="{ duration: 0.8, delay: 0.2, ease: 'easeOut' }"
-        >
           <p
             class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-12 max-w-3xl mx-auto leading-relaxed font-medium"
           >
             {{ t('components.home.description') }}
           </p>
-        </Motion>
+        </div>
 
-        <Motion
-          :initial="{ opacity: 0, scale: 0.9 }"
-          :animate="{ opacity: 1, scale: 1 }"
-          :transition="{ duration: 0.5, delay: 0.4 }"
-          class="flex flex-wrap gap-6 justify-center mb-24"
-        >
+        <div class="flex flex-wrap gap-6 justify-center mb-24">
           <button
             class="group flex-center gap-2 w-45 px-4 py-2 rounded-full text-center bg-primary text-white font-semibold text-lg hover:bg-primary-600 transition-all shadow-lg hover:shadow-primary/30 active:scale-95 flex items-center"
             @click="router.push('/components/button')"
@@ -121,16 +87,14 @@ function getDelay(index: number) {
             <SIcon :icon="isDark ? 'skill-icons:github-light' : 'skill-icons:github-dark'" />
             {{ t('components.home.actions.github') }}
           </a>
-        </Motion>
+        </div>
 
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 text-left">
-          <Motion
+          <div
             v-for="(feature, index) in features"
             :key="feature.title"
-            :initial="{ opacity: 0, y: 20 }"
-            :animate="{ opacity: 1, y: 0 }"
-            :transition="getDelay(index)"
-            class="group bg-white/40 dark:bg-white/5 backdrop-blur-xl p-6 rounded-2xl border border-border shadow-lg shadow-gray-200/20 dark:shadow-none hover:bg-white/60 dark:hover:bg-white/10 hover:border-white/80 dark:hover:border-white/20 hover:-translate-y-1 transition-all duration-300"
+            :style="{ animationDelay: `${index * 0.1 + 0.5}s` }"
+            class="feature-card group bg-white/40 dark:bg-white/5 backdrop-blur-xl p-6 rounded-2xl border border-border shadow-lg shadow-gray-200/20 dark:shadow-none hover:bg-white/60 dark:hover:bg-white/10 hover:border-white/80 dark:hover:border-white/20 hover:-translate-y-1 transition-all duration-300"
           >
             <div class="text-3xl mb-4 p-3 rounded-xl bg-gray-50 dark:bg-white/5 w-fit" :class="feature.class">
               <SIcon :icon="feature.icon" />
@@ -139,13 +103,63 @@ function getDelay(index: number) {
               {{ feature.title }}
             </h3>
             <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">{{ feature.description }}</p>
-          </Motion>
+          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
 
+<style scoped>
+/* Logo 上下浮动动画 */
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+.logo-float {
+  animation: float 2s ease-in-out infinite;
+}
+
+/* 标题和描述淡入+向上移动动画 */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.hero-content {
+  animation: fadeInUp 0.8s ease-out forwards;
+}
+
+/* 特性卡片淡入+向上移动动画 */
+@keyframes fadeInUpCard {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.feature-card {
+  animation: fadeInUpCard 0.5s ease-out forwards;
+  opacity: 0;
+}
+</style>
+
 <route lang="yaml">
 meta:
   layout: home