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 <noreply@anthropic.com>
2026-09-12 16:40:23 -05:00
parent 99f6c1f8c6
commit 5b4fe133eb
3 changed files with 11 additions and 3 deletions
@@ -69,6 +69,14 @@
      const inner = IAP.$('tickerInner');
      inner.innerHTML = events.map(ev => '<span>' + IAP.describeEvent(ev, c) + '</span>').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