From 5cd9fb65017e1022b75be9bd4af36c1b22a95057 Mon Sep 17 00:00:00 2001
From: Ulysse Cura <ulysse.cura@gmail.com>
Date: Tue, 10 Mar 2026 22:05:18 +0100
Subject: [PATCH] Even better animation and timings

---
 scripts/session_startup_animation.js |  1 +
 styles/session_startup_animation.css | 14 ++++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/scripts/session_startup_animation.js b/scripts/session_startup_animation.js
index e27f3e2..8ca79ea 100644
--- a/scripts/session_startup_animation.js
+++ b/scripts/session_startup_animation.js
@@ -41,6 +41,7 @@ async function sessionStartupAnimation()
     let text_elem = document.createElement("h1");
     text_elem.className = "startup-animation-text";
     text_elem.style.setProperty("--delay", String(200 / quote.text.length));
+    text_elem.style.setProperty("--half-text-len", String((quote.text.length - 1) / 2));
 
     for(let i = 0; i < quote.text.length; i++)
     {
diff --git a/styles/session_startup_animation.css b/styles/session_startup_animation.css
index 67ff25e..24389f2 100644
--- a/styles/session_startup_animation.css
+++ b/styles/session_startup_animation.css
@@ -39,13 +39,19 @@
 @keyframes char-animation {
     0% {
         filter: hue-rotate(45deg);
-        top: 75vh;
+        top: 110vh;
+        transform: scale(800%) translate(calc((var(--char-nb) - var(--half-text-len)) * 5vh));
+    }
+    35% {
+        transform: scale(150%) translate(calc((var(--char-nb) - var(--half-text-len)) * -3vh));
     }
     45% {
-        top: -10vh;
+        top: -20vh;
+        transform: scale(110%) translate();
     }
     75% {
         top: -1vh;
+        transform: scale(100%) translate(0);
     }
     90% {
         top: -2vh;
@@ -82,7 +88,7 @@
     opacity: 0;
     animation: char-animation   2.9s ease-in-out calc(var(--delay) * var(--char-nb) * 1ms + 1s),
                opacity-fade-in  1s               calc(var(--delay) * var(--char-nb) * 1ms + 1s),
-               opacity-fade-out 1s ease-in       4s;
+               opacity-fade-out 1s ease-in       4.2s;
 }
 
 .startup-animation-author {
@@ -96,5 +102,5 @@
     text-align: center;
     white-space: nowrap;
     animation: opacity-fade-in 1s ease-in,
-               opacity-fade-out 1s ease-in 4s;
+               opacity-fade-out 1s ease-in 4.2s;
 }