Slow every animation down for a low-res screen

Every speed in config.js is in pixels per second, so the same numbers cross a
small screen in less time than a big one: on 1280x800 the frame covers the
width in two thirds of the time it takes on 1920x1080, and the player reads as
hurried.

One factor now sits behind every animation clock — tickSeconds() for the
frame loops, `speed` for the corners timer, and a --motion-stretch custom
property for the two CSS fades — so the Speed switch on the queue page slows
the drift, the glides, the pong rally, the drag beats, the wash lap, the
screenshot intervals and the fades together. It is read per frame rather than
baked into the constants, so flipping the switch lands on the next frame: no
animation restarts, and one part-way through a beat keeps its place.

The trail's stills now age on animation time rather than wall-clock time, so a
still fades at the rate the frame that dropped it is moving. The audio
crossfade is deliberately left out, being tied to the track that is ending.

The flag is saved with the queue, unlike `paused`: it describes the screen the
player is on, which a restart does not change.

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

public/queue/index.html

@@ -54,6 +54,10 @@
         <span class="label">Animation</span>
         <div id="animations"></div>
       </div>
+      <div class="switcher">
+        <span class="label">Speed</span>
+        <div id="speeds"></div>
+      </div>
     </footer>
 
     <script type="module" src="/queue/queue.js"></script>

public/queue/queue.css

@@ -277,7 +277,8 @@ footer .switcher + .switcher {
 }
 
 #backgrounds,
-#animations {
+#animations,
+#speeds {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
@@ -285,7 +286,8 @@ footer .switcher + .switcher {
 }
 
 #backgrounds button,
-#animations button {
+#animations button,
+#speeds button {
   font: inherit;
   padding: 8px 18px;
   border-radius: 999px;
@@ -296,7 +298,8 @@ footer .switcher + .switcher {
 }
 
 #backgrounds button.active,
-#animations button.active {
+#animations button.active,
+#speeds button.active {
   background: var(--accent);
   border-color: var(--accent);
   color: var(--ink);

public/queue/queue.js

@@ -1,11 +1,18 @@
 import { connect, formatDuration } from '/shared/socket.js';
-import { BACKGROUNDS, AUTO_BACKGROUND, ANIMATIONS, AUTO_ANIMATION } from '/config.js';
+import {
+  BACKGROUNDS,
+  AUTO_BACKGROUND,
+  ANIMATIONS,
+  AUTO_ANIMATION,
+  DEFAULT_LOW_RES,
+} from '/config.js';
 
 let state = {
   items: [],
   currentId: null,
   background: AUTO_BACKGROUND,
   animation: AUTO_ANIMATION,
+  lowRes: DEFAULT_LOW_RES,
   paused: false,
 };
 // Last playhead report, kept with its arrival time so the countdown can be
@@ -18,6 +25,7 @@ const errorBox = document.getElementById('error');
 const statusBox = document.getElementById('status');
 const backgroundBox = document.getElementById('backgrounds');
 const animationBox = document.getElementById('animations');
+const speedBox = document.getElementById('speeds');
 const playPause = document.getElementById('playpause');
 
 const socket = connect({ onMessage, onStatus });
@@ -257,6 +265,18 @@ const renderAnimation = buildSwitcher(
   () => state.animation,
 );
 
+// Not a row of names but a two-way switch, built the same way so it lights up
+// and travels like the others. The speeds themselves live in config.js.
+const renderSpeed = buildSwitcher(
+  speedBox,
+  [
+    [false, 'Normal'],
+    [true, 'Low-res screen'],
+  ],
+  'setLowRes',
+  () => Boolean(state.lowRes),
+);
+
 // --- socket -------------------------------------------------------------
 
 function onMessage(msg) {
@@ -265,6 +285,7 @@ function onMessage(msg) {
     render();
     renderBackground();
     renderAnimation();
+    renderSpeed();
   } else if (msg.type === 'progress') {
     progress = { id: msg.id, currentTime: msg.currentTime, at: Date.now() };
     renderTotals();