Add a colour wash animation
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
This commit is contained in:
@@ -44,7 +44,17 @@ 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;
|
||||
export const TRAIL_FADE_SECONDS = 8;
|
||||
|
||||
// The colour wash: seconds for one full trip round the colour wheel. Slow
|
||||
// enough that the screen never looks like it is flashing — the colour should
|
||||
// only be obviously different once you look away and back.
|
||||
export const WASH_CYCLE_SECONDS = 90;
|
||||
|
||||
// How far apart the two ends of the wash gradient sit on the wheel, in degrees,
|
||||
// and how strongly the wash tints the poster underneath it.
|
||||
export const WASH_SPREAD = 70;
|
||||
export const WASH_STRENGTH = 0.55;
|
||||
|
||||
// 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.
|
||||
@@ -53,6 +63,7 @@ export const ANIMATIONS = {
|
||||
corners: { label: 'Corners' },
|
||||
drag: { label: 'Drag & resize' },
|
||||
trail: { label: 'Comet trail' },
|
||||
wash: { label: 'Colour wash' },
|
||||
};
|
||||
|
||||
// Cycle a fresh random animation on every track change. Anything else pins the
|
||||
|
||||
Reference in New Issue
Block a user