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>

pages/articles/index.vue

@@ -5,11 +5,15 @@ definePageMeta({
 </script>
 
 <template>
-  <UContainer class="prose dark:prose-invert">
+  <UContainer v-motion-fade class="prose dark:prose-invert">
     <h1>Articles</h1>
   </UContainer>
 
-  <UContainer class="flex flex-col md:gap-10 gap-5 !pt-0">
+  <UContainer
+    v-motion-fade
+    :delay="500"
+    class="flex flex-col md:gap-10 gap-5 !pt-0"
+  >
     <ContentList :query="{ sort: [{ date: -1 }] }" v-slot="{ list }">
       <div v-for="article in list" :key="article._path">
         <ArticleListing :article="article" />
@@ -17,5 +21,5 @@ definePageMeta({
     </ContentList>
   </UContainer>
 
-  <Footer />
+  <Footer v-motion-fade :delay="500" />
 </template>

pages/index.vue

@@ -9,11 +9,12 @@ useSeoMeta({
   twitterCard: "summary_large_image",
 });
 </script>
+
 <template>
-  <Introduction />
-  <BeenWorkingWith />
-  <PersonalProjects />
-  <RecentPosts />
-  <Connect />
-  <Footer />
+  <Introduction v-motion-fade />
+  <BeenWorkingWith v-motion-fade :delay="500" />
+  <PersonalProjects v-motion-fade :delay="500" />
+  <RecentPosts v-motion-fade :delay="500" />
+  <Connect v-motion-fade :delay="500" />
+  <Footer v-motion-fade :delay="500" />
 </template>