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
This commit is contained in:
Si
2026-08-14 12:53:33 +02:00
co-authored by Claude Opus 5
parent 3f00897f0e
commit 554b946235
10 changed files with 184 additions and 27 deletions
+4
View File
@@ -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>