holy

2026-06-09 01:10:40 +02:00
parent 897536afc9
commit 09b3a19a33
9 changed files with 409 additions and 110 deletions
--- a/frontend/app/components/Sprite.vue
+++ b/frontend/app/components/Sprite.vue
@@ -33,17 +33,16 @@ onMounted(() => {
    position: absolute;
    z-index: 1;
    width: 1300px;
-    
+    margin-left: 20px;
+
    @media screen and (max-width: 1200px) and (min-width: 900px) {
        width: 975px;
+        margin-top: 210px;
+        margin-left: 75px;
    }

-    @media screen and (max-width: 900px) and (min-width: 600px) {
-        width: 650px;
-    }
-
-    @media screen and (max-width: 600px){
-        width: 425px;
+    @media screen and (max-width: 900px){
+        display: none;
    }
 }
 </style>
--- a/frontend/app/components/layouts/FixedLayout.vue
+++ b/frontend/app/components/layouts/FixedLayout.vue
@@ -7,13 +7,13 @@
 <style lang="scss" scoped>
@media screen and (min-width: 1200px){
  .fixed-layout {
-    width: 1100px;
+    width: 1150px;
  }
 }

@media screen and (max-width: 1200px){
  .fixed-layout {
-    max-width: 1100px;
+    max-width: 1150px;
  }
 }
 </style>
--- a/frontend/app/components/parts/TableHeader.vue
+++ b/frontend/app/components/parts/TableHeader.vue
@@ -2,7 +2,6 @@
 import HeaderLinks from './HeaderLinks.vue';
 import SiteOptions from './site_options/SiteOptions.vue';
 import StickyHeader from './StickyHeader.vue';
-
 import { accent } from '~/composables/theme'
 const spritePath = computed(() => {
    return `/sprites/${accent.value}/${accent.value}.gif`
@@ -16,7 +15,12 @@ const asciiArt = [
 ];
 const fullText = asciiArt.join('\n');

-const displayedArt = ref("");
+interface ArtChar {
+  char: string;
+  done: boolean;
+}
+
+const displayedArt = ref<ArtChar[]>([]);
 let charIndex = 0;
 let intervalId: ReturnType<typeof setInterval> | null = null;

@@ -36,36 +40,69 @@ const preloadImages = (imageArray) => {
  )
 }

-onMounted(() => {
-    preloadImages(sprite_names);
+   onMounted(() => {
+        preloadImages(sprite_names);

-   if (hasAnimated.value || displayedArt.value === fullText) {
-     displayedArt.value = fullText;
-     return;
-   }
+        if (hasAnimated.value || displayedArt.value.length === fullText.length) {
+            for (let i = 0; i < fullText.length; i++) {
+                displayedArt.value.push({ char: fullText[i], done: true });
+            }
+            return;
+        }

-   intervalId = setInterval(() => {
-     if (charIndex < fullText.length) {
-       displayedArt.value += fullText[charIndex];
-       charIndex++;
-     } else {
-       clearInterval(intervalId!);
-       intervalId = null;
-       hasAnimated.value = true;
-     }
-   }, 5);
- });
+        intervalId = setInterval(() => {
+            if (charIndex < fullText.length) {
+                displayedArt.value[charIndex] = { char: fullText[charIndex], done: true };
+                charIndex++;
+            } else {
+                clearInterval(intervalId!);
+                intervalId = null;
+                hasAnimated.value = true;
+            }
+        }, 5);
+    });

- onBeforeUnmount(() => {
-   if (intervalId) clearInterval(intervalId);
- });
+  const getGridPos = (idx: number) => {
+        let x = 0, y = 0;
+        for (let j = 0; j < idx; j++) {
+            if (fullText[j] === '\n') { y++; x = 0; }
+            else { x++; }
+        }
+        return { x, y };
+    };
+
+    const onCharClick = (index: number, spanEl: HTMLElement) => {
+        for (let i = 0; i < fullText.length; i++) {
+            if (fullText[i] === '\n') continue;
+            const indexGrid = getGridPos(index);
+            const charGrid = getGridPos(i);
+            let manhattanDistance = Math.abs(indexGrid.x - charGrid.x) + Math.abs(indexGrid.y - charGrid.y);
+            let delay = manhattanDistance * 20;
+            setTimeout(() => {
+                displayedArt.value[i] = { char: fullText[i], done: true };
+                const targetSpan = document.querySelector(`.ascii-art span[index="${i}"]`) as HTMLElement;
+                if (targetSpan) {
+                    targetSpan.style.transition = 'color 80ms ease-out';
+                    targetSpan.style.color = 'var(--color-link)';
+                    requestAnimationFrame(() => {
+                        setTimeout(() => {
+                            targetSpan.style.color = '';
+                        }, 150);
+                    });
+                }
+            }, delay);
+        }
+    };
+    onBeforeUnmount(() => {
+        if (intervalId) clearInterval(intervalId);
+    });

 </script>

 <template>
    <div class="header">
        <div class="header-container website">
-                <pre v-html="displayedArt + (displayedArt.length < fullText.length ? '_' : '')" class="title ascii-art" aria-label="ARANROIG.COM"></pre>
+                <pre class="title ascii-art" aria-label="ARANROIG.COM"><span v-for="(c, i) in displayedArt" :key="i" :index="i.toString()" :class="{ 'char-done': c.done }" @click="onCharClick(i, $event.target as HTMLElement)">{{ c.char }}</span><span class="cursor" :class="{ 'blink': displayedArt.length < fullText.length }" v-if="displayedArt.length < fullText.length">_</span></pre>
                <HeaderLinks></HeaderLinks>
        </div>
        <div class="header-container right">
@@ -144,6 +181,23 @@ onMounted(() => {
    color: var(--color-text);
    min-height: clamp(1.59rem, 6.38vw, 3.01rem);
    min-width: clamp(11rem, 44vw, 23rem);
+
+    span:not(.char-done) {
+        color: transparent;
+    }
+}
+
+.char-done {
+    opacity: 1;
+}
+
+.cursor {
+    font-weight: bold;
+    color: var(--color-text);
+
+    &.blink {
+        animation: blink 1s step-end infinite;
+    }
 }

@keyframes blink {
--- a/frontend/app/pages/art/[slug].vue
+++ b/frontend/app/pages/art/[slug].vue
@@ -23,6 +23,7 @@ const { data: post } = await useAsyncData(`art-${slug}`, () =>
 .extended-container {
    width: 100%;
    margin: auto;
+    margin-top: 32px;
 }

 .art {
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -318,7 +318,6 @@ const sectionTargets = {

 <style lang="scss" scoped>
 .intro-section {
-  margin-top: 290px;

  > div:first-child {
    margin-top: 0;
@@ -328,16 +327,16 @@ const sectionTargets = {
    margin-bottom: 0;
  }

+  @media screen and (min-width: 1200px) {
+    margin-top: 290px;
+  }
+
  @media screen and (max-width: 1200px) and (min-width: 900px) {
    margin-top: 380px;
  }

-  @media screen and (max-width: 900px) and (min-width: 600px) {
-    margin-top: 280px;
-  }
-
-  @media screen and (max-width: 600px) {
-    margin-top: 280px;
+  @media screen and (max-width: 900px) {
+    margin-top: 60px;
  }
 }

--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -27,5 +27,5 @@ export default defineNuxtConfig({
    vueI18n: './i18n.config.ts',
    langDir: 'locales/'
  },
-  modules: ['@nuxtjs/i18n', '@nuxt/content', '@nuxt/image']
+  modules: ['@nuxtjs/i18n', '@nuxt/content', '@nuxt/image', 'motion-v/nuxt']
 })
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,7 +10,9 @@
        "@nuxt/content": "^3.12.0",
        "@nuxt/image": "^2.0.0",
        "@nuxtjs/i18n": "10.2.3",
+        "@vueuse/motion": "^3.0.3",
        "better-sqlite3": "^12.10.0",
+        "motion-v": "^2.3.0",
        "nuxt": "^4.3.1",
        "sass": "^1.98.0",
        "vue": "^3.5.30",
@@ -2071,14 +2073,6 @@
      "resolved": "https://registry.npmjs.org/citty/-/citty-0.2.1.tgz",
      "integrity": "sha512-kEV95lFBhQgtogAPlQfJJ0WGVSokvLr/UEoFPiKKOXF7pl98HfUVUD0ejsuTCld/9xH9vogSywZ5KqHzXrZpqg=="
    },
-    "node_modules/@nuxt/cli/node_modules/giget": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/giget/-/giget-3.1.2.tgz",
-      "integrity": "sha512-T2qUpKBHeUTwHcIhydgnJzhL0Hj785ms+JkxaaWQH9SDM/llXeewnOkfJcFShAHjWI+26hOChwUfCoupaXLm8g==",
-      "bin": {
-        "giget": "dist/cli.mjs"
-      }
-    },
    "node_modules/@nuxt/cli/node_modules/std-env": {
      "version": "3.10.0",
      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
@@ -4848,6 +4842,12 @@
      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
      "license": "MIT"
    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
    "node_modules/@typescript-eslint/project-service": {
      "version": "8.57.1",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.57.1.tgz",
@@ -5292,6 +5292,138 @@
      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.30.tgz",
      "integrity": "sha512-YXgQ7JjaO18NeK2K9VTbDHaFy62WrObMa6XERNfNOkAhD1F1oDSf3ZJ7K6GqabZ0BvSDHajp8qfS5Sa2I9n8uQ=="
    },
+    "node_modules/@vueuse/core": {
+      "version": "14.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.3.0.tgz",
+      "integrity": "sha512-aHfz47g0ZhMtTVHmIzMVpJy8ePhhOy68GY5bv110+5DVtZ+W7BsOx+m61UNQqfrWyPztIHIanWa3E2tib3NFIw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.3.0",
+        "@vueuse/shared": "14.3.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "14.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.3.0.tgz",
+      "integrity": "sha512-BwxmbAzwAVF50+MW57GXOUEV61nFBGnlBvrTqj49PqWJu3uw7hdu72ztXeZ33RdZtDY6kO+bfCAE1PCn88Tktw==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/motion": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@vueuse/motion/-/motion-3.0.3.tgz",
+      "integrity": "sha512-4B+ITsxCI9cojikvrpaJcLXyq0spj3sdlzXjzesWdMRd99hhtFI6OJ/1JsqwtF73YooLe0hUn/xDR6qCtmn5GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vueuse/core": "^13.0.0",
+        "@vueuse/shared": "^13.0.0",
+        "defu": "^6.1.4",
+        "framesync": "^6.1.2",
+        "popmotion": "^11.0.5",
+        "style-value-types": "^5.1.2"
+      },
+      "optionalDependencies": {
+        "@nuxt/kit": "^3.13.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.0"
+      }
+    },
+    "node_modules/@vueuse/motion/node_modules/@nuxt/kit": {
+      "version": "3.21.8",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.21.8.tgz",
+      "integrity": "sha512-kg63DUPY5AHPn+9XM7u8rYcdWHXjzwfUscgRDuiC5YUciQ+xdLRhdwXelYFxEAx2nxJHossliiQXbMm/Fleivw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "c12": "^3.3.4",
+        "consola": "^3.4.2",
+        "defu": "^6.1.7",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.8",
+        "ignore": "^7.0.5",
+        "jiti": "^2.7.0",
+        "klona": "^2.0.6",
+        "knitwork": "^1.3.0",
+        "mlly": "^1.8.2",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.1",
+        "rc9": "^3.0.1",
+        "scule": "^1.3.0",
+        "semver": "^7.8.0",
+        "tinyglobby": "^0.2.16",
+        "ufo": "^1.6.4",
+        "unctx": "^2.5.0",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@vueuse/motion/node_modules/@vueuse/core": {
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.9.0.tgz",
+      "integrity": "sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "13.9.0",
+        "@vueuse/shared": "13.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/motion/node_modules/@vueuse/metadata": {
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.9.0.tgz",
+      "integrity": "sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/motion/node_modules/@vueuse/shared": {
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.9.0.tgz",
+      "integrity": "sha512-e89uuTLMh0U5cZ9iDpEI2senqPGfbPRTHM/0AaQkcxnpqjkZqDYP8rpfm7edOz8s+pOCOROEy1PIveSW8+fL5g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "14.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.3.0.tgz",
+      "integrity": "sha512-bZpge9eSXwa4ToSiqJ7j6KRwhAsneMFoSz3LMWKQDkqimm3D/tbFlrklrs/IOqC8tEcYmXQZJ6N0UrjhBirVCg==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
    "node_modules/@webcontainer/env": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/@webcontainer/env/-/env-1.1.1.tgz",
@@ -5970,22 +6102,23 @@
      }
    },
    "node_modules/c12": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/c12/-/c12-3.3.3.tgz",
-      "integrity": "sha512-750hTRvgBy5kcMNPdh95Qo+XUBeGo8C7nsKSmedDmaQI+E0r82DwHeM6vBewDe4rGFbnxoa4V9pw+sPh5+Iz8Q==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-3.3.4.tgz",
+      "integrity": "sha512-cM0ApFQSBXuourJejzwv/AuPRvAxordTyParRVcHjjtXirtkzM0uK2L9TTn9s0cXZbG7E55jCivRQzoxYmRAlA==",
+      "license": "MIT",
      "dependencies": {
        "chokidar": "^5.0.0",
-        "confbox": "^0.2.2",
-        "defu": "^6.1.4",
-        "dotenv": "^17.2.3",
+        "confbox": "^0.2.4",
+        "defu": "^6.1.6",
+        "dotenv": "^17.3.1",
        "exsolve": "^1.0.8",
-        "giget": "^2.0.0",
+        "giget": "^3.2.0",
        "jiti": "^2.6.1",
        "ohash": "^2.0.11",
        "pathe": "^2.0.3",
-        "perfect-debounce": "^2.0.0",
+        "perfect-debounce": "^2.1.0",
        "pkg-types": "^2.3.0",
-        "rc9": "^2.1.2"
+        "rc9": "^3.0.1"
      },
      "peerDependencies": {
        "magicast": "*"
@@ -5996,15 +6129,6 @@
        }
      }
    },
-    "node_modules/c12/node_modules/rc9": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.2.tgz",
-      "integrity": "sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==",
-      "dependencies": {
-        "defu": "^6.1.4",
-        "destr": "^2.0.3"
-      }
-    },
    "node_modules/cac": {
      "version": "6.7.14",
      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
@@ -6696,9 +6820,10 @@
      }
    },
    "node_modules/defu": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
-      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg=="
+      "version": "6.1.7",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.7.tgz",
+      "integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==",
+      "license": "MIT"
    },
    "node_modules/denque": {
      "version": "2.1.0",
@@ -7592,6 +7717,48 @@
        "url": "https://github.com/sponsors/rawify"
      }
    },
+    "node_modules/framer-motion": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.40.0.tgz",
+      "integrity": "sha512-uaBd3qC1v3KQqBEjwTUd183K6PbS+j0yR9w9VmEOLWA/tnUcSn8Xa3uck7t4dgpDoUss8xQTcj8W2L07lrnLFg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.40.0",
+        "motion-utils": "^12.39.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/framesync": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.1.2.tgz",
+      "integrity": "sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==",
+      "license": "MIT",
+      "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==",
+      "license": "0BSD"
+    },
    "node_modules/fresh": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
@@ -7710,17 +7877,10 @@
      }
    },
    "node_modules/giget": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/giget/-/giget-2.0.0.tgz",
-      "integrity": "sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==",
-      "dependencies": {
-        "citty": "^0.1.6",
-        "consola": "^3.4.0",
-        "defu": "^6.1.4",
-        "node-fetch-native": "^1.6.6",
-        "nypm": "^0.6.0",
-        "pathe": "^2.0.3"
-      },
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/giget/-/giget-3.2.0.tgz",
+      "integrity": "sha512-GvHTWcykIR/fP8cj8dMpuMMkvaeJfPvYnhq0oW+chSeIr+ldX21ifU2Ms6KBoyKZQZmVaUAAhQ2EZ68KJF8a7A==",
+      "license": "MIT",
      "bin": {
        "giget": "dist/cli.mjs"
      }
@@ -8242,6 +8402,12 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==",
+      "license": "MIT"
+    },
    "node_modules/hookable": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/hookable/-/hookable-6.1.0.tgz",
@@ -8784,9 +8950,10 @@
      }
    },
    "node_modules/jiti": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
-      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "license": "MIT",
      "bin": {
        "jiti": "lib/jiti-cli.mjs"
      }
@@ -10389,9 +10556,10 @@
      "license": "MIT"
    },
    "node_modules/mlly": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.1.tgz",
-      "integrity": "sha512-SnL6sNutTwRWWR/vcmCYHSADjiEesp5TGQQ0pXyLhW5IoeibRlF/CbSLailbB3CNqJUk9cVJ9dUDnbD7GrcHBQ==",
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.2.tgz",
+      "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==",
+      "license": "MIT",
      "dependencies": {
        "acorn": "^8.16.0",
        "pathe": "^2.0.3",
@@ -10419,6 +10587,37 @@
      "resolved": "https://registry.npmjs.org/mocked-exports/-/mocked-exports-0.1.1.tgz",
      "integrity": "sha512-aF7yRQr/Q0O2/4pIXm6PZ5G+jAd7QS4Yu8m+WEeEHGnbo+7mE36CbLSDQiXYV8bVL3NfmdeqPJct0tUlnjVSnA=="
    },
+    "node_modules/motion-dom": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.40.0.tgz",
+      "integrity": "sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.39.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.39.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz",
+      "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==",
+      "license": "MIT"
+    },
+    "node_modules/motion-v": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/motion-v/-/motion-v-2.3.0.tgz",
+      "integrity": "sha512-J0CCfXtICCni9RjotDUBOs57xNpYI9yyBSohEOxaRHrmjwOtlw291fhRu/mdgEdSasys96R028YDDOAtWBbRaA==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.40.0",
+        "hey-listen": "^1.0.8",
+        "motion-dom": "^12.40.0",
+        "motion-utils": "^12.39.0"
+      },
+      "peerDependencies": {
+        "@vueuse/core": ">=10.0.0",
+        "vue": ">=3.0.0"
+      }
+    },
    "node_modules/mrmime": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -12546,9 +12745,10 @@
      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
    },
    "node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "license": "MIT",
      "engines": {
        "node": ">=12"
      },
@@ -12566,15 +12766,34 @@
      }
    },
    "node_modules/pkg-types": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
-      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.1.tgz",
+      "integrity": "sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==",
+      "license": "MIT",
      "dependencies": {
-        "confbox": "^0.2.2",
-        "exsolve": "^1.0.7",
+        "confbox": "^0.2.4",
+        "exsolve": "^1.0.8",
        "pathe": "^2.0.3"
      }
    },
+    "node_modules/popmotion": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.5.tgz",
+      "integrity": "sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==",
+      "license": "MIT",
+      "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==",
+      "license": "0BSD"
+    },
    "node_modules/possible-typed-array-names": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -13199,11 +13418,12 @@
      "license": "ISC"
    },
    "node_modules/rc9": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/rc9/-/rc9-3.0.0.tgz",
-      "integrity": "sha512-MGOue0VqscKWQ104udASX/3GYDcKyPI4j4F8gu/jHHzglpmy9a/anZK3PNe8ug6aZFl+9GxLtdhe3kVZuMaQbA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rc9/-/rc9-3.0.1.tgz",
+      "integrity": "sha512-gMDyleLWVE+i6Sgtc0QbbY6pEKqYs97NGi6isHQPqYlLemPoO8dxQ3uGi0f4NiP98c+jMW6cG1Kx9dDwfvqARQ==",
+      "license": "MIT",
      "dependencies": {
-        "defu": "^6.1.4",
+        "defu": "^6.1.6",
        "destr": "^2.0.5"
      }
    },
@@ -13823,9 +14043,10 @@
      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g=="
    },
    "node_modules/semver": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
-      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.3.tgz",
+      "integrity": "sha512-wnilbGyMxzbY7dNOl7jpKbLSjcfeweJWU5j4+u5qW+6/wuGD9KzIGOyZnQVSBM9E7DtWaaH3CyHkppYrKYoxwg==",
+      "license": "ISC",
      "bin": {
        "semver": "bin/semver.js"
      },
@@ -14432,6 +14653,22 @@
      "resolved": "https://registry.npmjs.org/structured-clone-es/-/structured-clone-es-2.0.0.tgz",
      "integrity": "sha512-5UuAHmBLXYPCl22xWJrFuGmIhBKQzxISPVz6E7nmTmTcAOpUzlbjKJsRrCE4vADmMQ0dzeCnlWn9XufnAGf76Q=="
    },
+    "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==",
+      "license": "MIT",
+      "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==",
+      "license": "0BSD"
+    },
    "node_modules/stylehacks": {
      "version": "7.0.8",
      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-7.0.8.tgz",
@@ -14666,12 +14903,13 @@
      }
    },
    "node_modules/tinyglobby": {
-      "version": "0.2.15",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
-      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "license": "MIT",
      "dependencies": {
        "fdir": "^6.5.0",
-        "picomatch": "^4.0.3"
+        "picomatch": "^4.0.4"
      },
      "engines": {
        "node": ">=12.0.0"
@@ -14784,8 +15022,7 @@
    "node_modules/tslib": {
      "version": "2.8.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "optional": true
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
    },
    "node_modules/tunnel-agent": {
      "version": "0.6.0",
@@ -14857,9 +15094,10 @@
      }
    },
    "node_modules/ufo": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.3.tgz",
-      "integrity": "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q=="
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz",
+      "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
+      "license": "MIT"
    },
    "node_modules/ultrahtml": {
      "version": "1.6.0",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,7 +13,9 @@
    "@nuxt/content": "^3.12.0",
    "@nuxt/image": "^2.0.0",
    "@nuxtjs/i18n": "10.2.3",
+    "@vueuse/motion": "^3.0.3",
    "better-sqlite3": "^12.10.0",
+    "motion-v": "^2.3.0",
    "nuxt": "^4.3.1",
    "sass": "^1.98.0",
    "vue": "^3.5.30",
--- a/frontend/plugins/motion.client.ts
+++ b/frontend/plugins/motion.client.ts
@@ -0,0 +1,6 @@
+// plugins/motion.client.ts
+import { MotionPlugin } from '@vueuse/motion'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(MotionPlugin)
+})