Slow the breaking-news ticker to a constant readable ~55-70 px/s

0466ef4f4bdeb25473269c6d8f6b10ccf234fa5c · 2026-09-24 08:29:44 -0700 · Steve Abrams

Loop duration was fixed (60s -> 24s by chaos tier) while the loop grew to
40+ headlines, so the crawl hit ~1,600 px/s. Duration is now computed from
the track length so the speed stays readable at any headline count.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VLjoHsyGTDeVCa1rdrAxnk

Files touched

M index.html

Diff

commit 0466ef4f4bdeb25473269c6d8f6b10ccf234fa5c
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Sep 24 08:29:44 2026 -0700

    Slow the breaking-news ticker to a constant readable ~55-70 px/s
    
    Loop duration was fixed (60s -> 24s by chaos tier) while the loop grew to
    40+ headlines, so the crawl hit ~1,600 px/s. Duration is now computed from
    the track length so the speed stays readable at any headline count.
    
    Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
    Claude-Session: https://claude.ai/code/session_01VLjoHsyGTDeVCa1rdrAxnk
---
 index.html | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 0a77848..7ba7418 100644
--- a/index.html
+++ b/index.html
@@ -616,10 +616,10 @@ body.chaos-tier-3 .chaos-fill { background: #ff2222; }
    visibly speeds up. The reduced-motion path never uses this animation at
    all (ticker-track animation is fully disabled + JS swaps to the static
    frame renderer), so this is motion-safe by construction. */
-.ticker-track { animation: ticker-scroll var(--ticker-dur, 60s) linear infinite; }
-body.chaos-tier-1 { --ticker-dur: 40s; }
-body.chaos-tier-2 { --ticker-dur: 32s; }
-body.chaos-tier-3 { --ticker-dur: 24s; }
+/* Duration is set from JS (setTickerSpeed) as track length / reading speed,
+   so the crawl moves at a constant, readable px/s however many headlines
+   are in the loop. 90s is only the pre-measure fallback. */
+.ticker-track { animation: ticker-scroll var(--ticker-dur, 90s) linear infinite; }
 
 /* Broadcast losing its grip: headline stamps via generated content only —
    zero markup change, so these can flip every tick without ever touching
@@ -1700,6 +1700,7 @@ function updateChaosUI() {
   els.chaosRow.setAttribute("aria-label", `Chaos index: ${pct} percent, ${band.label}`);
 
   CHAOS_BANDS.forEach((b, i) => document.body.classList.toggle(`chaos-tier-${i}`, i === tierIdx));
+  if (!state.reducedMotion) setTickerSpeed();
   updateAnchorCaption(tierIdx);
 
   // Announce real band CHANGES only (throttled by definition — a band only
@@ -1749,6 +1750,22 @@ function renderTickerScroll() {
   // duplicate the list once so the CSS translateX(-50%) loop is seamless
   const text = state.tickerItems.join("   •   ");
   els.tickerTrack.textContent = text + "   •   " + text;
+  setTickerSpeed();
+}
+
+// Reading speed of the crawl, in px/s. Chaos still speeds it up, but only a
+// little — the old fixed 60s→24s loop times made a 40+ headline loop fly by.
+const TICKER_PX_PER_SEC = 55;
+const TICKER_CHAOS_BOOST = [1, 1.1, 1.2, 1.3];
+function setTickerSpeed() {
+  const oneCopy = els.tickerTrack.scrollWidth / 2;
+  if (!oneCopy) return;
+  const boost = TICKER_CHAOS_BOOST[state.chaosTierIdx] || 1;
+  const dur = Math.round(oneCopy / (TICKER_PX_PER_SEC * boost));
+  // Changing animation-duration jumps the crawl position, so only apply
+  // meaningful changes (new headlines / a chaos tier change), not jitter.
+  const cur = parseFloat(els.tickerTrack.style.getPropertyValue("--ticker-dur")) || 0;
+  if (Math.abs(dur - cur) / (cur || 1) > 0.08) els.tickerTrack.style.setProperty("--ticker-dur", dur + "s");
 }
 
 function renderTickerStaticFrame() {

← 40beaff 5x: sweep 1 (category-page fix) and sweep 2 (clean) notes · back to Crazy News Channel · 5x sweep 3: Cody's 3 verified findings — article back/Escape b868846 →