From d4c0440136c68aae7d667714e2ba518ab123de9b Mon Sep 17 00:00:00 2001 From: Emile Clark-Boman Date: Mon, 28 Jul 2025 10:58:18 +1000 Subject: [PATCH] proper typing effect --- www/anim.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ www/anim.html | 17 +++++++++++++++++ 2 files changed, 67 insertions(+) create mode 100644 www/anim.css create mode 100644 www/anim.html diff --git a/www/anim.css b/www/anim.css new file mode 100644 index 0000000..e0733f2 --- /dev/null +++ b/www/anim.css @@ -0,0 +1,50 @@ +body { + background-color: #0e0d14; +} + +.heading { + font-family: monospace; + font-size: 2em; + font-weight: bold; + color: #ac4aed; +} + +.centered { + margin-top: 25%; /* terrible solution... */ +} + +/* =========================================================== * + * Type Writer Effect * +/* =========================================================== */ + +.typing-wrapper { + display: flex; + text-align: center; + justify-content: center; +} + +.typing-prompt { + display: inline-block; + text-align: center; +} + +.typing { + display: inline-block; + width: 36ch; + animation: typing 3s steps(36), blink 1s step-end infinite alternate; + white-space: nowrap; + overflow: hidden; + border-right: 1ch solid; +} + +@keyframes typing { + from { + width: 0 + } +} + +@keyframes blink { + 50% { + border-color: transparent + } +} diff --git a/www/anim.html b/www/anim.html new file mode 100644 index 0000000..55d2e36 --- /dev/null +++ b/www/anim.html @@ -0,0 +1,17 @@ + + + + + + +
+ +
+ $  +
+ Do butterflies cry when they're sad? +
+
+ +