Firefox has no tab capture, so preferCurrentTab is silently dropped and the
operator can only share a window or a screen. Neither maps onto the viewport
the way the crop assumes, so screenshots came out offset by the browser chrome
— and every failure was swallowed by a bare catch, leaving no way to tell why.
Check the shared surface and only crop when the viewport covers it: exact for
Chrome's tab capture, true for a screen while the page is fullscreen. Test that
by dimensions rather than document.fullscreenElement, which F11 leaves null.
Start now requests fullscreen, after getDisplayMedia so the click's transient
activation goes to the fragile call. Reasons surface in a corner notice and the
console, and the check reruns per grab so leaving fullscreen says so.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01H9v2Xoa6eoeGYpK6gp95k9
cc_load_policy is only a request: the viewer's "always show captions"
preference overrides it, and auto-generated tracks ignore it. Unloading
the caption module is the part that sticks, and it has to run again after
every load because a new video brings the module back.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01H9v2Xoa6eoeGYpK6gp95k9
The poster behind the frame was one of two, picked by hand and then left
there all night. It now turns over on every track change the way the
animations do, and never as the same picture twice: a shuffle bag over
whatever images sit in assets/, each shown at a random zoom between 1.15
and 1.9 and cropped around a randomly chosen point of the poster.
The list is read from the directory rather than written out in config.js.
The old one named two files that are no longer there, which is the failure
mode a hand-kept list has; now a poster joins the rotation, with its own
button on the queue page, by being dropped in the folder.
Zoom never goes below 1.15. These are portrait prints and the screen is
wide, so cover fits the poster's full width and crops vertically — at 1
the paper margin shows as a grey stripe down both sides. 1.15 cuts at
least 13% off the width of every crop a 1920x1080 screen can produce.
The crop is drawn into a screen-sized canvas rather than handed to CSS as
an object-fit rule on a full-size <img>. The scans are 3508x4950, which is
a 70MB texture per layer and two of them composited for the length of the
fade; instead each pick is fetched, resized off the main thread to roughly
screen resolution, drawn once, and closed. A swap costs about 400ms of
async work, all of it before the fade begins, and no full-size bitmap is
held anywhere. Nothing about the posters' resolution reaches the
compositor, so assets/ can keep the 300 dpi originals.
Backgrounds pin and unpin like animations: DEFAULT_BACKGROUND is now the
auto cycle, the queue page's row leads with Auto, and isBackground()
guards the socket handler and the restored queue.json against a key that
no longer names a file.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01H9v2Xoa6eoeGYpK6gp95k9
The video frame plays the paddle: it slides along the bottom of the
screen and nowhere else, a square ball runs the diagonals off the walls,
and every ball that gets past the frame puts one on a seven-segment
counter in the top right.
The frame is solid on all four sides, not just its face, so a ball that
comes at its flank or up under it is turned away too. Which side a hit
came in on is read from where the ball was before the step, with a
shallowest-penetration fallback for the frame sliding into the ball
rather than the other way round — without that the ball tunnels in and
rattles inside the frame. The face keeps the original's angle rule, where
the hit position sets the departure angle, so rallies develop instead of
the ball retracing one line; the other three sides are plain reflections.
The paddle steers by predictLanding, which unfolds the wall reflections
analytically instead of simulating them. A paddle that outruns the ball
never loses, so PONG_MISS_CHANCE of the time it aims a width wide and
lets one through — otherwise the counter would sit on 00 all night.
The digits are SVG polygons built from a segment map, so the era-correct
display costs no font file.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01H9v2Xoa6eoeGYpK6gp95k9
The browser gets its constants from a /config.js route that re-declared each
export by hand, so a constant added to config.js and imported by the frontend
linked against nothing. WASH_FRAME_SCALE, added with the colour wash, did
exactly that: motion.js failed to link, player.js never ran, and the start gate
sat on its hardcoded "Loading queue..." forever.
Serialise every export except the server-only PORT, so the mirror cannot drift
from the source again.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Tg15tLAuT6NrCE1ZxKVgDB
The frame parks in the middle and the colour changes instead: a gradient
creeps round the colour wheel behind the poster, and the frame's glow
travels with it. Every other animation moves the frame, so the still one
reads as a rest between them rather than as a dead spot.
The wash layer blends with mix-blend-mode: color, which keeps the
poster's luminance and replaces only its hue. soft-light was the first
try and barely shifted the colour at all against a poster already knocked
back to 45% brightness.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Tg15tLAuT6NrCE1ZxKVgDB
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
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
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
A full corner used to swap its single still in place, so a fresh
screenshot was indistinguishable from the one it replaced. Each corner
now holds three stills nudged inward by 9% of the frame per depth, and
the newest one moves to the top of the layer, leaving the edges of the
ones below visible. Fill order is slot-major, so a new shot never lands
where the previous shot at that corner was.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Tg15tLAuT6NrCE1ZxKVgDB
Waiting for the shuffle bag to land on the animation you are working on makes
testing one of them tedious. The queue page now carries an Animation row next
to Background: Auto keeps the per-track cycle, any other button pins the player
to that animation until the mode changes again.
The animation names live in config.js alongside their labels, so the server can
validate them and the queue page can label its buttons; motion.js keys its
registry by the same names.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Tg15tLAuT6NrCE1ZxKVgDB
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
Two frontends sharing one WebSocket-backed state on the server:
- Player: fullscreen poster background with a small frame (30% of the
screen) that drifts diagonally and reflects off the edges. Two stacked
YouTube players hand over with a 5s equal-power crossfade so there is
never silence between tracks.
- Queue: add by URL, drag to reorder, delete, click to jump. Shows title
and length per item, highlights what is playing, and tracks remaining
vs. total playtime.
No API key is required — titles come from YouTube's oEmbed endpoint and
durations from a hidden muted probe player that cues each new video just
to read its length.
The fade is driven by both requestAnimationFrame and the interval tick:
a hidden or throttled tab stops serving frames entirely, which would
otherwise strand a handover half-faded with two tracks audible.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Tg15tLAuT6NrCE1ZxKVgDB
