From f55298ff4f890ddd8a27d2696272ffc29d8a809f Mon Sep 17 00:00:00 2001
From: simon <bhbsqhm2udg@mailbox.org>
Date: Sun, 9 Aug 2026 23:31:32 +0200
Subject: [PATCH] Give the colour wash a roomier frame

Nothing else is on screen while the wash runs, so the frame does not
have to leave space for a second one.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Tg15tLAuT6NrCE1ZxKVgDB
---
 config.js               |  4 ++++
 public/player/motion.js | 10 +++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/config.js b/config.js
index beb0690..1cbb45c 100644
--- a/config.js
+++ b/config.js
@@ -56,6 +56,10 @@ export const WASH_CYCLE_SECONDS = 90;
 export const WASH_SPREAD = 70;
 export const WASH_STRENGTH = 0.55;
 
+// The wash animation gets its own, roomier frame: like the drag animation it
+// has the screen to itself, so it does not have to leave room for a second one.
+export const WASH_FRAME_SCALE = 0.6;
+
 // The frame animations, keyed by the id sent over the socket. The names must
 // match the registry in public/player/motion.js, which supplies the code.
 export const ANIMATIONS = {
diff --git a/public/player/motion.js b/public/player/motion.js
index f964177..35edb36 100644
--- a/public/player/motion.js
+++ b/public/player/motion.js
@@ -20,6 +20,7 @@ import {
   TRAIL_LENGTH,
   TRAIL_FADE_SECONDS,
   WASH_CYCLE_SECONDS,
+  WASH_FRAME_SCALE,
   WASH_SPREAD,
   WASH_STRENGTH,
   AUTO_ANIMATION,
@@ -45,8 +46,8 @@ export function frameSize(viewportWidth, viewportHeight, scale = FRAME_SCALE) {
 }
 
 /** Size the frame to the current viewport and report the size back. */
-function applyFrameSize(element) {
-  const size = frameSize(window.innerWidth, window.innerHeight);
+function applyFrameSize(element, scale = FRAME_SCALE) {
+  const size = frameSize(window.innerWidth, window.innerHeight, scale);
   element.style.width = `${size.width}px`;
   element.style.height = `${size.height}px`;
   return size;
@@ -943,7 +944,7 @@ export function startWash({ element }) {
   element.classList.add('washing');
 
   function centre() {
-    const size = applyFrameSize(element);
+    const size = applyFrameSize(element, WASH_FRAME_SCALE);
     place(element, (window.innerWidth - size.width) / 2, (window.innerHeight - size.height) / 2);
   }
 
@@ -975,6 +976,9 @@ export function startWash({ element }) {
     wash.remove();
     element.classList.remove('washing');
     element.style.removeProperty('--wash');
+    // Same reason as the drag animation: the next one sizes the frame itself,
+    // but a wash-sized frame left up for one paint would flash.
+    applyFrameSize(element);
   };
 }