Add a drag-and-resize animation

A drawn pointer grabs the frame near its top edge, drags it across the
screen, lets go, then takes hold of one corner and pulls the frame to a
new size. Moves ease in and overshoot slightly before settling, and the
paths bow, so the motion reads as a hand rather than a tween.

The resize pins the opposite corner and keeps the aspect ratio locked —
a stretched video would read as broken, not as someone resizing — and
clamps the width to the room left before the corner leaves the screen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Tg15tLAuT6NrCE1ZxKVgDB
This commit is contained in:
simon
2026-08-09 22:34:26 +02:00
co-authored by Claude Opus 5
parent 1afe6580ae
commit a6fd6e802a
5 changed files with 436 additions and 4 deletions
+10 -4
View File
@@ -33,18 +33,24 @@ autoplay, so the first click is what unlocks audio. One click per session.
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, corner
screenshot interval and margin, port, and the selectable backgrounds and
animations. Anything the browser needs must also be mirrored in the
`/config.js` route in `server/index.js`.
screenshot interval and margin, the drag animation's size range, port, and
the selectable backgrounds and animations. 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:
The video frame's movement changes with every track. Three 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.
- **drag** — a drawn mouse pointer travels to the frame, grabs it near its top
edge and drags it across the screen, lets go for a beat, then takes hold of
one corner and pulls the frame to a new size. The aspect ratio stays locked
and the frame stays on screen, so the resize reads as a window resize rather
than a stretch.
The queue page's **Animation** buttons pin the player to one of them, which is
how you look at a single animation without waiting for the cycle to reach it.