pathways: drop splash hint text; auto-fade splash once the user is active (pointer/key/wheel/touch) and has had time to read

3 files changed, 47 insertions, 21 deletions

diff --git a/public/app.css b/public/app.css
index 30187b7..11b24a0 100644
--- a/public/app.css
+++ b/public/app.css
@@ -119,7 +119,6 @@ html, body {
 #splash h1 { margin: 0; font-size: 44px; font-weight: 300; letter-spacing: .18em; }
 #splash h1 .dot { color: var(--ring); }
 #splash p { max-width: 34ch; color: var(--muted); margin: 0; font-size: 15px; line-height: 1.6; }
-#splash p .hint { font-size: 12px; letter-spacing: .02em; opacity: .75; }
 #start {
   margin-top: 10px;
   padding: 10px 34px;
diff --git a/public/app.js b/public/app.js
index c617e3a..1c98d84 100644
--- a/public/app.js
+++ b/public/app.js
@@ -467,21 +467,48 @@ addEventListener("keydown", (e) => {
 
 addEventListener("resize", center)
 
-startBtn.addEventListener("click", async () => {
+const MIN_READ = 1500
+const splashShownAt = Date.now()
+let started = false
+let splashTimer = 0
+
+function start() {
+  if (started) return
+  started = true
+  clearTimeout(splashTimer)
   splash.classList.add("hide")
-  try {
-    const r = await fetch("/api/random")
-    const data = await r.json()
-    const photo = data.photo
-    photoInfo.set(photo.id, photo)
-    const a = aspect(photo)
-    const wf = a >= 1 ? a : 1
-    const hf = a >= 1 ? 1 : 1 / a
-    const uW = (window.innerWidth * 0.92) / wf
-    const uH = (window.innerHeight * 0.92) / hf
-    U = Math.max(100, Math.min(640, Math.round(Math.min(uW, uH))))
-    const rect = { x: 0, y: 0, w: tileW(photo), h: tileH(photo) }
-    addTile(photo, rect)
-    setCurrent(photo.id, rect)
-  } catch { /* ignore */ }
-})
+  ;(async () => {
+    try {
+      const r = await fetch("/api/random")
+      const data = await r.json()
+      const photo = data.photo
+      photoInfo.set(photo.id, photo)
+      const a = aspect(photo)
+      const wf = a >= 1 ? a : 1
+      const hf = a >= 1 ? 1 : 1 / a
+      const uW = (window.innerWidth * 0.92) / wf
+      const uH = (window.innerHeight * 0.92) / hf
+      U = Math.max(100, Math.min(640, Math.round(Math.min(uW, uH))))
+      const rect = { x: 0, y: 0, w: tileW(photo), h: tileH(photo) }
+      addTile(photo, rect)
+      setCurrent(photo.id, rect)
+    } catch { /* ignore */ }
+  })()
+}
+
+function noteActivity() {
+  if (started) return
+  const left = MIN_READ - (Date.now() - splashShownAt)
+  if (left <= 0) start()
+  else {
+    clearTimeout(splashTimer)
+    splashTimer = setTimeout(start, left)
+  }
+}
+
+startBtn.addEventListener("click", start)
+addEventListener("pointermove", noteActivity)
+addEventListener("pointerdown", noteActivity)
+addEventListener("keydown", noteActivity)
+addEventListener("wheel", noteActivity)
+addEventListener("touchstart", noteActivity)
diff --git a/public/index.html b/public/index.html
index a2dd33a..2de35c3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="color-scheme" content="dark">
   <title>pathways</title>
-  <link rel="stylesheet" href="/app.css?v=11">
+  <link rel="stylesheet" href="/app.css?v=12">
 </head>
 <body>
   <main id="stage">
@@ -13,9 +13,9 @@
   </main>
   <div id="splash">
     <h1>pathways<span class="dot">.</span></h1>
-    <p>four paths, one per direction. walk them.<br><span class="hint">drag or scroll to pan · pinch to zoom · double-click empty space or press 0 to fit</span></p>
+    <p>four paths, one per direction. walk them.</p>
     <button id="start">start</button>
   </div>
-  <script src="/app.js?v=11"></script>
+  <script src="/app.js?v=12"></script>
 </body>
 </html>