From 61eb072cf478b1749b2ed6fce163add81dfff84e Mon Sep 17 00:00:00 2001 From: Elis Eriksson Date: Tue, 7 Jul 2026 16:53:36 +0200 Subject: bro i REALLY gotta learn how to do micro commits --- assets/js/morph.js | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 assets/js/morph.js (limited to 'assets/js/morph.js') 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)); +} -- cgit v1.3-7-ge9ab