3 files changed, 61 insertions, 26 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index cb03aaf..4b99331 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -61,27 +61,6 @@ a[target="_blank"]::after {
     content: "}";
 }
 
-.tooltip {
-	position:relative;
-	display:inline-block;
-}
-
-.tooltiptext {
-	visibility: hidden;
-	color: var(--base);
-	background: var(--text);
-	text-align: center;
-	position: absolute;
-	z-index: 1;
-	top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-	min-width: 100%;
-}
-.tooltip:hover .tooltiptext {
-	visibility: visible;
-}
-
 a.active,
 a:focus,
 a:hover {
@@ -94,7 +73,7 @@ header {
     background: repeating-linear-gradient(45deg,var(--base) 0rem,var(--base) 1rem,var(--base-2) 1rem,var(--base-2) 2rem);
     border: var(--base-2) 1px solid;
     padding-inline: 0.4rem;
-    max-width: 110ch;
+    max-width: 90ch;
     height: 4rem;
     margin-inline: auto;
     display: flex;
@@ -141,7 +120,7 @@ header li:first-child a::after {display: none;}
 */
 
 main {
-    max-width: 100ch;
+    max-width: 80ch;
     margin-inline: auto;
 }
 
@@ -270,3 +249,8 @@ blockquote {
 	padding-left: 10px;
 	color: var(--code-text);
 }
+
+.morph {
+	min-width: 12ch;
+	text-align: center;
+}
diff --git a/assets/js/morph.js b/assets/js/morph.js
new file mode 100644
index 0000000..728ff1f
--- /dev/null
+++ b/assets/js/morph.js
@@ -0,0 +1,43 @@
+const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@._-";
+
+function morph(element, target) {
+    clearInterval(element._timer);
+
+    const start = element.textContent;
+    const length = Math.max(start.length, target.length);
+
+    let progress = 0;
+
+    element._timer = setInterval(() => {
+        progress += 0.05;
+
+        const currentLength = Math.round(
+            start.length + (target.length - start.length) * progress
+        );
+
+        let output = "";
+
+        for (let i = 0; i < currentLength; i++) {
+            if (progress > i / currentLength + 0.2 && target[i]) {
+                output += target[i];
+            } else {
+                output += CHARS[Math.floor(Math.random() * CHARS.length)];
+            }
+        }
+
+        element.textContent = output;
+
+        if (progress >= 1) {
+            clearInterval(element._timer);
+            element.textContent = target;
+        }
+    }, 15);
+}
+
+for (const link of document.querySelectorAll(".morph")) {
+    const original = link.textContent;
+    const alternate = link.dataset.alt;
+
+    link.addEventListener("mouseenter", () => morph(link, alternate));
+    link.addEventListener("mouseleave", () => morph(link, original));
+}
diff --git a/assets/js/transitions.js b/assets/js/transitions.js
index e6d7c85..3955a67 100644
--- a/assets/js/transitions.js
+++ b/assets/js/transitions.js
@@ -7,14 +7,14 @@ function transitionOut(callback) {
     document.body.style.filter = "url(#transition)"
     const src = new Number(displacement.getAttribute("scale"));
     noise.setAttribute("seed",Math.random() * 1000)
-    if (src < 1000) {
-        displacement.setAttribute("scale", src + 10 + src);
+    if (src < 100) {
+        displacement.setAttribute("scale", src + 20 + src);
         nextFunc = () => transitionOut(callback)
         requestAnimationFrame(nextFunc)
     } else {
         setTimeout(() =>{
             document.body.style.filter = ""
-        },10000);
+        },1000);
         callback()
     }
 }
@@ -52,3 +52,11 @@ if (noise && displacement) {
 } else {
     console.log("Can't do transitions!!")
 }
+
+// for when going forwards or back
+window.addEventListener("pageshow", (e) => {
+    if (e.persisted) {
+        displacement.setAttribute("scale", 200);
+        transitionIn();
+    }
+});