From 5b4fe133ebd5d5bde3b940f5bc6478c678a0c3a9 Mon Sep 17 00:00:00 2001 From: martbost Date: Sat, 12 Sep 2026 16:40:23 -0500 Subject: [PATCH] Homepage ticker: speed scales with text length (~70 px/s), pauses on hover/touch; CSS fallback 120 s Co-Authored-By: Claude Fable 5.1 --- public/assets/home.js | 8 ++++++++ public/assets/site.css | 2 +- public/index.html | 4 ++-- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/public/assets/home.js b/public/assets/home.js index 76ec918..414f3cf 100644 --- a/public/assets/home.js +++ b/public/assets/home.js @@ -69,6 +69,14 @@ const inner = IAP.$('tickerInner'); inner.innerHTML = events.map(ev => '' + IAP.describeEvent(ev, c) + '').join(''); IAP.$('ticker').hidden = false; + // readable pace (Marty, 2026-09-12): about 70 px per second no matter how much text is loaded, + // instead of a fixed 42 s for the whole strip; pause while a finger or pointer rests on it + const wrap = IAP.$('ticker'); + const secs = Math.max(30, Math.round((inner.scrollWidth + wrap.clientWidth) / 70)); + inner.style.animationDuration = secs + 's'; + const pause = on => { inner.style.animationPlayState = on ? 'paused' : 'running'; }; + wrap.addEventListener('mouseenter', () => pause(true)); wrap.addEventListener('mouseleave', () => pause(false)); + wrap.addEventListener('touchstart', () => pause(true), { passive: true }); wrap.addEventListener('touchend', () => pause(false), { passive: true }); } catch (e) {} } // level cycler: chips + generation highlighting + auto-advance diff --git a/public/assets/site.css b/public/assets/site.css index 9b58b5f..65f6018 100644 --- a/public/assets/site.css +++ b/public/assets/site.css @@ -176,7 +176,7 @@ h3{font-size:16.5px;margin:0 0 8px;font-weight:700} background:rgba(67,232,195,.04);white-space:nowrap;padding:10px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} -.ticker .inner{display:inline-block;font-family:var(--mono);font-size:12.5px;padding-left:100%;animation:tick 42s linear infinite} +.ticker .inner{display:inline-block;font-family:var(--mono);font-size:12.5px;padding-left:100%;animation:tick 120s linear infinite} .ticker .inner span{margin-right:48px;color:var(--muted)} .ticker .inner span b{color:var(--mint);font-weight:600} @keyframes tick{to{transform:translateX(-100%)}} diff --git a/public/index.html b/public/index.html index ee8136c..cf3c9d8 100644 --- a/public/index.html +++ b/public/index.html @@ -20,7 +20,7 @@ - + @@ -463,7 +463,7 @@ - +