Tune mobile hero typing and fact sizing

Author: Rajul

docs/index.html

@@ -40,7 +40,7 @@
         <h1 class="hero-title" data-text="the missing click." aria-label="the missing click.">
           <span class="type-ghost" aria-hidden="true">the missing click.</span>
           <span class="type-live" aria-hidden="true">
-            <span id="typeTarget" class="type-target">the missing click.</span><span class="type-cursor" id="typeCursor">_</span>
+            <span class="type-target"><span id="typeTarget" class="type-text">the missing click.</span><span class="type-cursor" id="typeCursor">_</span></span>
           </span>
         </h1>
         <p class="hero-subtitle">

docs/site.css

@@ -222,17 +222,20 @@ input {
 }
 
 .type-live {
-  align-items: baseline;
-  display: inline-flex;
+  display: block;
   inset: 0;
-  justify-content: center;
   position: absolute;
+  text-align: center;
   width: 100%;
 }
 
 .type-target {
-  display: inline-block;
-  white-space: pre-wrap;
+  display: inline;
+  white-space: normal;
+}
+
+.type-text {
+  white-space: normal;
 }
 
 .type-cursor {
@@ -409,24 +412,24 @@ input {
 .fact-kicker {
   color: var(--accent);
   font-family: "JetBrains Mono", monospace;
-  font-size: 0.76rem;
+  font-size: 0.68rem;
   text-transform: uppercase;
 }
 
 .fact-value {
   color: var(--text-primary);
-  font-size: clamp(1.55rem, 2.8vw, 2.2rem);
+  font-size: clamp(1.18rem, 2vw, 1.68rem);
   font-weight: 400;
   letter-spacing: 0;
   line-height: 1.05;
-  margin-top: 14px;
+  margin-top: 12px;
 }
 
 .fact-copy {
   color: var(--text-secondary);
-  font-size: 0.97rem;
+  font-size: 0.88rem;
   line-height: 1.6;
-  margin-top: 14px;
+  margin-top: 12px;
   max-width: 30ch;
 }
 
@@ -831,7 +834,7 @@ input {
 
   .fact-card {
     min-height: auto;
-    padding: 22px 20px;
+    padding: 20px 18px;
   }
 
   .hero-actions {
@@ -864,6 +867,19 @@ input {
     margin-top: 18px;
   }
 
+  .fact-kicker {
+    font-size: 0.62rem;
+  }
+
+  .fact-value {
+    font-size: 1.08rem;
+  }
+
+  .fact-copy {
+    font-size: 0.82rem;
+    line-height: 1.52;
+  }
+
   .cli-install {
     width: 100%;
   }

docs/site.js

@@ -2,6 +2,7 @@ document.documentElement.classList.remove("no-js");
 
 const copyButton = document.getElementById("copyCommandButton");
 const installCommand = document.getElementById("installCommand");
+const heroTitle = document.querySelector(".hero-title");
 const typeTarget = document.getElementById("typeTarget");
 const typeCursor = document.getElementById("typeCursor");
 const typeSound = document.getElementById("typeSound");
@@ -17,8 +18,8 @@ if (copyButton && installCommand) {
   });
 }
 
-if (typeTarget && typeCursor) {
-  const phrase = typeTarget.textContent.trim();
+if (heroTitle && typeTarget && typeCursor) {
+  const phrase = (heroTitle.dataset.text || typeTarget.textContent).trim();
   let audioUnlocked = false;
   let audioContext = null;
   let audioBuffer = null;
@@ -90,7 +91,7 @@ if (typeTarget && typeCursor) {
           loopToken += 1;
           typeTarget.textContent = "";
           typeCursor.classList.remove("is-typing");
-          runTypeLoop(loopToken);
+          runTypeLoop(loopToken, 40);
         } catch (error) {
           audioUnlocked = false;
         }
@@ -117,8 +118,8 @@ if (typeTarget && typeCursor) {
     source.start(0);
   };
 
-  const runTypeLoop = async (token) => {
-    await wait(320);
+  const runTypeLoop = async (token, initialDelay = 140) => {
+    await wait(initialDelay);
 
     while (token === loopToken) {
       typeCursor.classList.add("is-typing");
@@ -130,7 +131,7 @@ if (typeTarget && typeCursor) {
         const character = phrase[i - 1];
         typeTarget.textContent = phrase.slice(0, i);
         playKeySound(character);
-        await wait(character === " " ? 84 : 92);
+        await wait(character === " " ? 54 : 62);
       }
 
       typeCursor.classList.remove("is-typing");
@@ -146,7 +147,7 @@ if (typeTarget && typeCursor) {
       }
 
       typeCursor.classList.remove("is-typing");
-      await wait(340);
+      await wait(220);
     }
   };