feat: add subtle motion

2024-01-05 15:11:58 +02:00
parent 4c03892f39
commit 67381e7592
6 changed files with 95 additions and 11 deletions
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -6,6 +6,7 @@ export default defineNuxtConfig({
    "@nuxt/image",
    "@nuxtjs/robots",
    "@vueuse/nuxt",
+    "@vueuse/motion/nuxt",
    "@nuxt/content",
  ],
  content: {
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
  }
--- a/pages/articles/[...slug].vue
+++ b/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>
--- a/pages/articles/index.vue
+++ b/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>
--- a/pages/index.vue
+++ b/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>