Give the drag animation its own base frame size

The shared FRAME_SCALE has to stay under 0.5 so the corners animation can
fit two frames side by side, but nothing else is on screen while the drag
animation runs, so it can afford a roomier frame.

frameSize() now takes the scale as an argument; drag passes
DRAG_FRAME_SCALE and the min/max resize multipliers apply on top of it.

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

config.js

@@ -23,8 +23,12 @@ export const CORNER_INTERVAL_SECONDS = 5;
 // Gap between the frame and the screen edge, as a fraction of the short side.
 export const CORNER_MARGIN = 0.025;
 
+// The drag animation gets its own, roomier base size: it is the only thing on
+// screen while it runs, so it does not have to leave space for a second frame.
+export const DRAG_FRAME_SCALE = 0.6;
+
 // The drag animation resizes the frame to somewhere between these multiples of
-// the normal frame size. Above 1 the frame grows past FRAME_SCALE, which is
+// its base size. Above 1 the frame grows past DRAG_FRAME_SCALE, which is
 // fine — nothing else is on screen while this animation runs.
 export const DRAG_MIN_SCALE = 0.55;
 export const DRAG_MAX_SCALE = 1.6;

public/player/motion.js

@@ -11,6 +11,7 @@ import {
   BOUNCE_SPEED,
   CORNER_INTERVAL_SECONDS,
   CORNER_MARGIN,
+  DRAG_FRAME_SCALE,
   DRAG_MIN_SCALE,
   DRAG_MAX_SCALE,
   AUTO_ANIMATION,
@@ -19,14 +20,14 @@ import {
 const ASPECT = 9 / 16;
 
 /**
- * Frame size for a viewport: FRAME_SCALE of the width, but never taller than
+ * Frame size for a viewport: `scale` of the width, but never taller than
- * FRAME_SCALE of the height, so a wide screen does not get a letterbox strip.
+ * `scale` of the height, so a wide screen does not get a letterbox strip.
  */
-export function frameSize(viewportWidth, viewportHeight) {
+export function frameSize(viewportWidth, viewportHeight, scale = FRAME_SCALE) {
-  let width = viewportWidth * FRAME_SCALE;
+  let width = viewportWidth * scale;
   let height = width * ASPECT;
 
-  const maxHeight = viewportHeight * FRAME_SCALE;
+  const maxHeight = viewportHeight * scale;
   if (height > maxHeight) {
     height = maxHeight;
     width = height / ASPECT;
@@ -433,7 +434,7 @@ export function startDragResize({ element }) {
   pointer.innerHTML = ARROW;
   document.body.appendChild(pointer);
 
-  let base = frameSize(window.innerWidth, window.innerHeight);
+  let base = frameSize(window.innerWidth, window.innerHeight, DRAG_FRAME_SCALE);
   let rect = {
     x: (window.innerWidth - base.width) / 2,
     y: (window.innerHeight - base.height) / 2,
@@ -622,7 +623,7 @@ export function startDragResize({ element }) {
   let current = step();
 
   function measure() {
-    base = frameSize(window.innerWidth, window.innerHeight);
+    base = frameSize(window.innerWidth, window.innerHeight, DRAG_FRAME_SCALE);
 
     const gap = margin();
     const limits = widthLimits();

server/index.js

@@ -15,6 +15,7 @@ import {
   BOUNCE_SPEED,
   CORNER_INTERVAL_SECONDS,
   CORNER_MARGIN,
+  DRAG_FRAME_SCALE,
   DRAG_MIN_SCALE,
   DRAG_MAX_SCALE,
   BACKGROUNDS,
@@ -47,6 +48,7 @@ app.get('/config.js', (_req, res) => {
       `export const BOUNCE_SPEED = ${BOUNCE_SPEED};\n` +
       `export const CORNER_INTERVAL_SECONDS = ${CORNER_INTERVAL_SECONDS};\n` +
       `export const CORNER_MARGIN = ${CORNER_MARGIN};\n` +
+      `export const DRAG_FRAME_SCALE = ${DRAG_FRAME_SCALE};\n` +
       `export const DRAG_MIN_SCALE = ${DRAG_MIN_SCALE};\n` +
       `export const DRAG_MAX_SCALE = ${DRAG_MAX_SCALE};\n` +
       `export const BACKGROUNDS = ${JSON.stringify(BACKGROUNDS)};\n` +