feat: add subtle motion

nuxt.config.ts

@@ -6,6 +6,7 @@ export default defineNuxtConfig({
     "@nuxt/image",
     "@nuxtjs/robots",
     "@vueuse/nuxt",
+    "@vueuse/motion/nuxt",
     "@nuxt/content",
   ],
   content: {

package-lock.json

@@ -11,6 +11,7 @@
         "@nuxt/ui": "^2.11.0",
         "@nuxtjs/robots": "^3.0.0",
         "@vueuse/core": "^10.7.0",
+        "@vueuse/motion": "^2.0.0",
         "@vueuse/nuxt": "^10.7.0",
         "sharp": "^0.33.0"
       },
@@ -4048,6 +4049,25 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@vueuse/motion": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/motion/-/motion-2.0.0.tgz",
+      "integrity": "sha512-V3TAlbt1OPmb9DZFoFCz9WC3Oue54t9VHlavSWm+VU1JNimYcd+pc6aGR/hgaHUAU9tOPRHoDTleSrv2zrdIsw==",
+      "dependencies": {
+        "@vueuse/core": "^10.1.2",
+        "@vueuse/shared": "^10.1.2",
+        "csstype": "^3.1.2",
+        "framesync": "^6.1.2",
+        "popmotion": "^11.0.5",
+        "style-value-types": "^5.1.2"
+      },
+      "optionalDependencies": {
+        "@nuxt/kit": "^3.5.1"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.0"
+      }
+    },
     "node_modules/@vueuse/nuxt": {
       "version": "10.7.0",
       "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-10.7.0.tgz",
@@ -6141,6 +6161,19 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framesync": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.1.2.tgz",
+      "integrity": "sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==",
+      "dependencies": {
+        "tslib": "2.4.0"
+      }
+    },
+    "node_modules/framesync/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -6714,6 +6747,11 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
       "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
     },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -11665,6 +11703,22 @@
         "pathe": "^1.1.0"
       }
     },
+    "node_modules/popmotion": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.5.tgz",
+      "integrity": "sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==",
+      "dependencies": {
+        "framesync": "6.1.2",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.1.2",
+        "tslib": "2.4.0"
+      }
+    },
+    "node_modules/popmotion/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
     "node_modules/portfinder": {
       "version": "1.0.32",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
@@ -14289,6 +14343,20 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/style-value-types": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.1.2.tgz",
+      "integrity": "sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "2.4.0"
+      }
+    },
+    "node_modules/style-value-types/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
     "node_modules/stylehacks": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-6.0.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "@nuxt/ui": "^2.11.0",
     "@nuxtjs/robots": "^3.0.0",
     "@vueuse/core": "^10.7.0",
+    "@vueuse/motion": "^2.0.0",
     "@vueuse/nuxt": "^10.7.0",
     "sharp": "^0.33.0"
   }

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 />
+  <Introduction v-motion-fade />
-  <BeenWorkingWith />
+  <BeenWorkingWith v-motion-fade :delay="500" />
-  <PersonalProjects />
+  <PersonalProjects v-motion-fade :delay="500" />
-  <RecentPosts />
+  <RecentPosts v-motion-fade :delay="500" />
-  <Connect />
+  <Connect v-motion-fade :delay="500" />
-  <Footer />
+  <Footer v-motion-fade :delay="500" />
 </template>