add anime lib

_layouts/home.html

@@ -8,7 +8,11 @@
 <main>
   <div class="header">
     <div class="title-container">
-      <h1 class="effect-scramble">Karson Kalt</h1>
+      <h1 class="ml10">
+        <span class="text-wrapper">
+          <span class="letters">Karson Kalt</span>
+        </span>
+      </h1>
       <span class="domain">.dev</span>
     </div>
     <nav class="nav">

_sass/custom-styles.scss

@@ -99,6 +99,22 @@ li {
   color: var(--text-primary);
 }
 
+.ml10 {
+  position: relative;
+}
+
+.ml10 .text-wrapper {
+  position: relative;
+  display: inline;
+  overflow: hidden;
+}
+
+.ml10 .letter {
+  display: inline-block;
+  line-height: 1em;
+  transform-origin: 0 0;
+}
+
 #theme-button-wrapper {
   background-color: var(--accent-color-80);
   position: fixed;
@@ -652,6 +668,10 @@ li {
     line-height: 1.3;
     font-family: "Ubuntu Mono";
     margin-left: -5px;
+    animation: fadeInFromLeft 500ms;
+    animation-delay: 1000ms;
+    opacity: 0;
+    animation-fill-mode: forwards;
   }
 
   @media (max-width: 800px) {

assets/ts/home/addM110Effect.ts

@@ -0,0 +1,16 @@
+import anime from "animejs/lib/anime.es.js";
+
+export const addM110Effect = () => {
+  var textWrapper = document.querySelector(".ml10 .letters") as HTMLElement;
+  textWrapper.innerHTML = (textWrapper.textContent as string).replace(
+    /\S/g,
+    "<span class='letter'>$&</span>"
+  );
+
+  anime.timeline({ autoplay: true }).add({
+    targets: ".ml10 .letter",
+    rotateY: [-90, 0],
+    duration: 1300,
+    delay: (_: any, i: number) => 80 * i,
+  });
+};

assets/ts/home/index.ts

@@ -3,15 +3,15 @@ import { addTabs } from "./tabs";
 import { addTerminal } from "./terminal/index";
 import { loadLocalStorage } from "./loadLocalStorage";
 import { addGlareEffect } from "./addGlareEffect";
-import { addScrambleEffect } from "./scrambleEffect";
+import { addM110Effect } from "./addM110Effect";
 
 document.addEventListener("DOMContentLoaded", () => {
   addTabs();
   addTerminal();
   addGithubStatus();
   loadLocalStorage();
   addGlareEffect();
-  addScrambleEffect();
+  addM110Effect();
 });
 
 document

package.json

@@ -17,9 +17,11 @@
     "ts-loader": "^9.5.1",
     "typescript": "^5.5.2",
     "webpack": "^5.92.1",
-    "webpack-cli": "^5.1.4"
+    "webpack-cli": "^5.1.4",
+    "@types/animejs": "^3.1.12"
   },
   "dependencies": {
+    "animejs": "^3.2.2",
     "chroma-js": "^2.4.2"
   }
 }