feat: add subtle motion

pages/articles/[...slug].vue

@@ -11,6 +11,7 @@ const { path } = useRoute();
 <template>
   <ContentDoc :path="path" v-slot="{ doc }">
     <UContainer
+      v-motion-fade
       class="flex flex-col gap-3 prose dark:prose-invert"
       as="article"
     >
@@ -20,7 +21,13 @@ const { path } = useRoute();
       <h1>{{ doc.title }}</h1>
     </UContainer>
 
-    <UContainer class="hidden md:block" as="figure" v-if="doc.coverImage?.url">
+    <UContainer
+      class="hidden md:block"
+      as="figure"
+      v-if="doc.coverImage?.url"
+      v-motion-fade
+      :delay="500"
+    >
       <NuxtImg
         placeholder
         :src="doc.coverImage.url ?? ''"
@@ -38,6 +45,8 @@ const { path } = useRoute();
       </ULink>
     </UContainer>
     <UContainer
+      v-motion-fade
+      :delay="500"
       class="flex flex-col gap-3 prose dark:prose-invert !pt-0"
       as="article"
     >
@@ -45,5 +54,5 @@ const { path } = useRoute();
     </UContainer>
   </ContentDoc>
 
-  <Footer />
+  <Footer v-motion-fade :delay="500" />
 </template>