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:
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user