Update index page to include text animation

nuxt.config.ts

@@ -7,6 +7,7 @@ export default defineNuxtConfig({
       isCustomElement: (tag) => ['l-dot-stream'].includes(tag),
     },
   },
+  modules: ['@hypernym/nuxt-anime'],
   app: {
     baseURL: "/clean-cuts/",
     pageTransition: {

package-lock.json

@@ -16,6 +16,7 @@
         "vue-router": "^4.3.0"
       },
       "devDependencies": {
+        "@hypernym/nuxt-anime": "^2.1.1",
         "sass": "^1.79.4"
       }
     },
@@ -878,6 +879,20 @@
         "node": ">=14"
       }
     },
+    "node_modules/@hypernym/nuxt-anime": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@hypernym/nuxt-anime/-/nuxt-anime-2.1.1.tgz",
+      "integrity": "sha512-M0PfitJcjOZ96vmmFghCDq0RY7sN2iJTUDZEJEgwzB/1/gqxDZkQMcRmEhNqysX8sQcDBDDlkECgN+Yf+TBhIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/animejs": "^3.1.7",
+        "animejs": "^3.2.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ivodolenc"
+      }
+    },
     "node_modules/@ioredis/commands": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
@@ -2034,6 +2049,13 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@types/animejs": {
+      "version": "3.1.12",
+      "resolved": "https://registry.npmjs.org/@types/animejs/-/animejs-3.1.12.tgz",
+      "integrity": "sha512-fpdH+ZtlO0kqjTOqRaBdsEmvpRNOayI8k4EVkEtitL5l6wducDOXk0rgQgfZqWf/ZX9DzXrHf257S5i9xTcISQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -2512,6 +2534,13 @@
         "node": ">= 6.0.0"
       }
     },
+    "node_modules/animejs": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.2.tgz",
+      "integrity": "sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",

package.json

@@ -19,6 +19,7 @@
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
+    "@hypernym/nuxt-anime": "^2.1.1",
     "sass": "^1.79.4"
   }
 }

pages/index.vue

@@ -1,19 +1,104 @@
+<script setup lang="ts">
+const { $anime } = useNuxtApp();
+const textWrapper = useTemplateRef("my-letters");
+
+onMounted(() => {
+  textWrapper.value!.innerHTML = textWrapper.value!.textContent!.replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>");
+  $anime.timeline({loop: true})
+    .add({
+      targets: '.ml11 .line',
+      scaleY: [0,1],
+      opacity: [0.5,1],
+      easing: "easeOutExpo",
+      duration: 700
+    })
+    .add({
+      targets: '.ml11 .line',
+      translateX: [0, textWrapper.value!.getBoundingClientRect().width + 10],
+      easing: "easeOutExpo",
+      duration: 700,
+      delay: 100
+    }).add({
+      targets: '.ml11 .letter',
+      opacity: [0,1],
+      easing: "easeOutExpo",
+      duration: 600,
+      offset: '-=775',
+      delay: (el, i) => 34 * (i+1)
+    }).add({
+      targets: '.ml11 .line',
+      opacity: 0,
+      duration: 1000,
+      easing: "easeOutExpo",
+      delay: 1000
+    }).add({
+      targets: '.ml11',
+      opacity: 0,
+      duration: 1000,
+      easing: "easeOutExpo",
+      delay: 15000
+    });
+  });
+</script>
+
 <template>
   <div>
     <div class="d-flex flex-column justify-content-center align-items-center gap-2" style="margin-top: 25%;"
       data-aos="fade-down" data-aos-duration="1000">
-        <Card class="d-flex flex-column justify-content-center align-items-center">
-            <h1 class="display-4">
-              <img class="me-4" src="/favicon.png"/>
-              <TheTitle />
+        <Card class="d-flex flex-column justify-content-center align-items-center position-relative">
+            <div class="d-flex justify-content-center align-items-center gap-2">
+              <div style="width: 64px;">
+                <div class="ratio ratio-1x1">
+                  <LLazyImg img-class="rounded" :src="`/clean-cuts/favicon.png`"/>
+                </div>
+              </div>
+              <div>
+                  <h1 class="ml11">
+                    <span class="text-wrapper">
+                      <span class="line line1"></span>
+                      <span class="letters" ref="my-letters">Clean Cuts</span>
+                    </span>
                   </h1>
+              </div>
+            </div>
             <p>Your local League of Legends companion index.</p>
         </Card>
+       
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-import MaterialIcon from '~/components/MaterialIcon.vue';
-import TheTitle from '~/components/TheTitle.vue';
-</script>
+<style lang="scss">
+.ml11 {
+  font-weight: 300;
+  font-size: 4rem;
+}
+
+.ml11 .text-wrapper {
+  position: relative;
+  display: inline-block;
+  padding-top: 0.1em;
+  padding-right: 0.05em;
+  padding-bottom: 0.15em;
+}
+
+.ml11 .line {
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  height: 100%;
+  width: 3px;
+  background-color: #fff;
+  transform-origin: 0 50%;
+}
+
+.ml11 .line1 { 
+  top: 0; 
+  left: 0;
+}
+
+.ml11 .letter {
+  display: inline-block;
+  line-height: 1em;
+}
+</style>