Cycle the frame through animations, add a corners effect

The frame had exactly one behaviour, started once and run forever. Make
animations a start(context) => stop() lifecycle held in a registry, and
draw a new one on every completed crossfade.

Selection uses a shuffle bag: each animation comes up exactly once per
pass, so they stay evenly used, and a swap at the pass boundary keeps the
same one from running twice in a row. Written for a registry larger than
today's two entries.

The new corners animation parks the frame in a random corner and drops a
screenshot of it into the next of the other three corners every 5s, going
clockwise. The frame's own corner is never a slot, so a still cannot
cover it by construction rather than by clamping. This holds while
FRAME_SCALE stays under 0.5, now noted where that knob lives.

Screenshots need getDisplayMedia: the decks are cross-origin YouTube
iframes, so canvas taints and there is no other way to read the playing
pixels. The prompt has to be requested before start() yields, or the
click's transient activation is gone. Declining, or serving over plain
HTTP where mediaDevices is undefined, leaves the frame parked without
stills instead of failing.

The capture sink is a 1x1 element in the document, like #probe: detached
video elements are never composited and get throttled hard enough to make
every screenshot seconds stale.

startBounce also gains the stop() it always needed — it was leaking its
rAF loop and resize listener, and a queued frame would fight whichever
animation came next.

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

README.md

@@ -3,9 +3,9 @@
 A YouTube playlist player for parties. Two browser windows run side by side:
 
 - **Player** (`http://localhost:3000/`) — fullscreen poster background with a
-  small video frame drifting diagonally and bouncing off the edges. Consecutive
-  videos overlap in a 5 second audio/video crossfade, so there is never silence
-  between tracks.
+  small video frame that moves around, switching animation on every track (see
+  [Animations](#animations)). Consecutive videos overlap in a 5 second
+  audio/video crossfade, so there is never silence between tracks.
 - **Queue** (`http://localhost:3000/queue`) — add videos by URL, drag to
   reorder, delete, and see how much playtime is left.
 
@@ -31,8 +31,27 @@ autoplay, so the first click is what unlocks audio. One click per session.
   showing it while the player page is closed). Totals are prefixed with `≥`
   whenever a length is still unknown.
 - The queue is saved to `queue.json` on every change and restored at startup.
-- Settings live in `config.js`: overlap length, frame size, drift speed, port,
-  and the selectable backgrounds.
+- Settings live in `config.js`: overlap length, frame size, drift speed, corner
+  screenshot interval and margin, port, and the selectable backgrounds. Anything
+  the browser needs must also be mirrored in the `/config.js` route in
+  `server/index.js`.
+
+## Animations
+
+The video frame's movement changes with every track. Two animations ship today:
+
+- **bounce** — diagonal drift, reflecting off the screen edges.
+- **corners** — the frame parks in a random corner and every 5 seconds a
+  screenshot of it appears in the next of the three other corners, going
+  clockwise. The frame never moves, so a screenshot can never cover it.
+
+**The corners animation asks to share your screen.** The decks are cross-origin
+YouTube iframes, so nothing on the page can read their pixels — capturing the
+tab and cropping out the frame is the only way to photograph what is playing.
+The prompt appears once, on the first click of **Start**; choose *this tab*.
+Declining is fine: the frame still parks in its corner, just without the
+screenshots. The prompt is skipped entirely on a plain-HTTP origin (i.e. when
+you open the player from another machine over the network), for the same reason.
 
 ## Adding animations
 
@@ -40,3 +59,14 @@ autoplay, so the first click is what unlocks audio. One click per session.
 `#frameSkin` inside it is the cosmetic layer, and the two video decks sit inside
 that. New effects should nest a fresh wrapper rather than sharing a transform
 with the bounce loop.
+
+An animation is `start(context) => stop()`, where `context` is
+`{ element, capture }` — `capture` may be null, and is read late, so an
+animation must cope with it being absent. `stop()` has to undo everything:
+timers, listeners, and any DOM it added, because the next animation takes over
+the same element immediately. Add it to the `ANIMATIONS` array and it joins the
+rotation.
+
+Selection uses a shuffle bag (`createPicker`): every animation comes up exactly
+once per pass, so they stay evenly used, and the same one never runs twice in a
+row — including across the seam between two passes.