Add a comet trail animation

The frame glides from waypoint to waypoint and drops a screenshot of
itself every frame-width or so. The stills stay where they were taken
and fade over a few seconds, so the live video reads as the head of a
comet whose tail is its own recent past.

The steering caps how fast the heading may change: an instant turn would
lay the stills out in straight dotted lines, and it is the curve that
makes a tail read as one. Drops are spaced by distance travelled rather
than by a timer, so they stay even however the frame is turning.

Since the capture is a crop of the tab, a still lying under the frame
would be photographed into the next one. A drop waits until the frame is
clear of the tail, keeping the invariant corners already relies on.

Also picks up the FRAME_SCALE, BOUNCE_SPEED and CORNER_INTERVAL_SECONDS
tuning sitting in the tree.

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:58:08 +02:00
co-authored by Claude Opus 5
parent 2066966694
commit 6d306d1b98
5 changed files with 268 additions and 10 deletions
+17 -3
View File
@@ -12,13 +12,13 @@ export const HARD_CUT_SECONDS = 0.4;
// The video frame takes up this fraction of the screen. Keep this below 0.5:
// the corners animation puts a frame-sized image in all four corners, which
// only stays overlap-free while two frames fit side by side.
export const FRAME_SCALE = 0.3;
export const FRAME_SCALE = 0.35;
// Pixels per second the frame drifts across the screen.
export const BOUNCE_SPEED = 90;
export const BOUNCE_SPEED = 120;
// The corners animation: seconds between screenshots.
export const CORNER_INTERVAL_SECONDS = 5;
export const CORNER_INTERVAL_SECONDS = 4;
// Gap between the frame and the screen edge, as a fraction of the short side.
export const CORNER_MARGIN = 0.025;
@@ -33,12 +33,26 @@ export const DRAG_FRAME_SCALE = 0.6;
export const DRAG_MIN_SCALE = 0.55;
export const DRAG_MAX_SCALE = 1.6;
// The trail animation: how fast the frame glides, and how sharply it may turn.
// The turn cap is what bends the path into an arc — without it the frame would
// snap onto each new heading and the tail would read as a dotted line.
export const TRAIL_SPEED = 150;
export const TRAIL_TURN_RATE = 0.7;
// Gap between two dropped stills, in frame widths, and how many the tail holds.
export const TRAIL_SPACING = 0.6;
export const TRAIL_LENGTH = 8;
// A still's life, from the moment it lands to fully faded.
export const TRAIL_FADE_SECONDS = 4;
// 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 = {
bounce: { label: 'Bounce' },
corners: { label: 'Corners' },
drag: { label: 'Drag & resize' },
trail: { label: 'Comet trail' },
};
// Cycle a fresh random animation on every track change. Anything else pins the