// a 63-frame cursor scrub on canvas -- no video, no gif
const FRAME_COUNT = 63;
let current = 0, target = 0;

// cursor Y sets the target frame (top = closed, bottom = open)
onpointermove = (e) => target = clamp(e.clientY / innerHeight, 0, 1);

// every frame (rAF): ease toward target, crossfade the two nearest
current += (target - current) * 0.10;
const f = current * (FRAME_COUNT - 1);
const i = Math.floor(f);

ctx.clearRect(0, 0, W, H);
ctx.globalAlpha = 1;
ctx.drawImage(frames[i], 0, 0);
ctx.globalAlpha = f - i;
ctx.drawImage(frames[i + 1], 0, 0);