From ee4b8a1d509e8a34f06ec54d881f4fcc1363b38e Mon Sep 17 00:00:00 2001
From: ngn <ngn@ngn.tf>
Date: Thu, 24 Jul 2025 15:40:38 +0300
Subject: [PATCH] switch to a simpler css based typing animation

Signed-off-by: ngn <ngn@ngn.tf>
---
 app/src/components/header.svelte | 78 ++++----------------------------
 app/static/css/global.css        | 10 ++++
 2 files changed, 20 insertions(+), 68 deletions(-)

diff --git a/app/src/components/header.svelte b/app/src/components/header.svelte
index b41b114..fd28348 100644
--- a/app/src/components/header.svelte
+++ b/app/src/components/header.svelte
@@ -1,77 +1,27 @@
 <script>
-  import { onMount } from "svelte";
-  import { browser } from "$app/environment";
-
   import { _ } from "$lib/locale.js";
-
-  export let picture = "";
-  export let title = "";
-
-  let title_cur = title;
-  let javascript = false;
-
-  // TODO: make the animation first delete and then type
-
-  // do the typing animation
-  function animate(title) {
-    // animation is displayed in the browser obv
-    if (!browser) {
-      return;
-    }
-
-    // clear any previous timeouts
-    let id = window.setTimeout(function () {}, 0);
-    while (id--) {
-      clearTimeout(id);
-    }
-
-    // reset the current title and add each letter with a timeout to give the
-    // epic typing effect
-    title_cur = "";
-
-    for (let i = 0; i < title.length; i++) {
-      setTimeout(() => {
-        title_cur += title[i];
-      }, i * 70);
-    }
-  }
-
-  onMount(() => {
-    javascript = true;
-  });
-
-  $: animate(title);
+  let { picture, title } = $props();
 </script>
 
 <header>
-  <div>
-    {#if javascript}
-      <h1 class="title">{title_cur}</h1>
-      <h1 class="cursor">_</h1>
-    {:else}
-      <h1 class="title">{title}</h1>
-    {/if}
+  <div style="--length: {title.length + 1}">
+    <h1>{title}<span>_</span></h1>
   </div>
   <img src="/assets/{picture}.png" alt="" />
 </header>
 
 <style>
   header {
-    background: var(--transparent);
-
-    width: 100%;
-    height: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: end;
+    background: var(--transparent);
   }
 
   header div {
-    display: flex;
-    flex-direction: row;
-    align-items: end;
-    padding: 40px 40px 10px 40px;
+    padding: 100px 40px 10px 40px;
+    color: var(--color);
     font-size: var(--size-6);
     font-family:
       Consolas,
@@ -83,20 +33,16 @@
       Courier New,
       monospace;
     white-space: nowrap;
-    justify-content: start;
-    width: min-content;
   }
 
-  header h1 {
-    color: var(--color);
-  }
-
-  header div .title {
+  header div h1 {
     text-shadow: var(--text-shadow);
     overflow: hidden;
+    white-space: nowrap;
+    animation: typing 0.8s steps(var(--length), end);
   }
 
-  header div .cursor {
+  header div span {
     content: "_";
     display: inline-block;
     animation: blink 1.5s steps(2) infinite;
@@ -108,10 +54,6 @@
   }
 
   @media only screen and (max-width: 900px) {
-    header {
-      display: block;
-    }
-
     header img {
       display: none;
     }
diff --git a/app/static/css/global.css b/app/static/css/global.css
index f75bf19..1254ae4 100644
--- a/app/static/css/global.css
+++ b/app/static/css/global.css
@@ -53,6 +53,16 @@
   }
 }
 
+/* typing animation */
+@keyframes typing {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
 * {
   padding: 0;
   margin: 0;