feat: enhance animations in Main and index components; add @vueuse/motion dependency

app/pages/index.vue

@@ -21,10 +21,39 @@ watch(
 
 <template>
   <main class="!max-w-none">
-    <ChatCommandPalette />
+    <ChatCommandPalette
+      v-motion
+      :initial="{
+        opacity: 0,
+        y: 200,
+        scale: 0.6,
+      }"
+      :enter="{
+        opacity: 1,
+        y: 0,
+        scale: 1,
+        transition: {
+          delay: 1600,
+        },
+      }"
+    />
     <ChatMain />
     <div ref="parents" class="space-y-8 my-16 md:my-32">
       <ChatMessageContainer
+        v-motion
+        :initial="{
+          opacity: 0,
+          y: 200,
+          scale: 0.6,
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          scale: 1,
+          transition: {
+            delay: 800,
+          },
+        }"
         :message="{
           id: 0,
           content: 'main.question',
@@ -34,6 +63,20 @@ watch(
         }"
       />
       <ChatMessageContainer
+        v-motion
+        :initial="{
+          opacity: 0,
+          y: 200,
+          scale: 0.6,
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          scale: 1,
+          transition: {
+            delay: 1200,
+          },
+        }"
         :message="{
           content: 'main.about',
           id: 0,
@@ -45,7 +88,16 @@ watch(
       <ChatMessageContainer
         v-for="message in messages"
         :key="message.id"
+        v-motion
         :message="message"
+        :initial="{
+          opacity: 0,
+          scale: 0.6,
+        }"
+        :enter="{
+          opacity: 1,
+          scale: 1,
+        }"
       />
     </div>
   </main>