Image Sequence Scrub

ScrollVanilla JS · zero dependenciesFrames pre-rendered once, blitted per scroll

frame 0

scroll = scrub the film ↓

-- fps

prefers-reduced-motion detected — frames follow your scroll directly

X-ray · layers

Scrubscroll drives the frame

Smoothingframes glide, not jump

Frame counterthe film's odometer

Parameters

Frames40

Glide0.18

Orbit size70 px

Track length1700 px

your version · updates as you tinker

How this effect works

This is how the big product sites do their "scroll rotates the gadget" pages: an array of pre-rendered frames, and scroll picks which one to show — index = progress × (frames - 1). The scroll is the playhead: forward plays, backward rewinds, stopping freezes. Here the frames are drawn once into offscreen canvases at load (a little orbit scene — in production they'd be JPEG exports of a 3D render); scrubbing only ever blits a finished frame, which is why it stays fast.

Smoothing runs the frame index through the usual chase-lerp so a fast flick sweeps through the frames instead of teleporting across them — that sweep is what preserves the illusion of motion. The counter is the honest debug view: watch the numbers to see exactly what the scrubbing does.

Production notes: prefers-reduced-motion: direct mapping, no glide · frame memory = width × height × count — budget it; 40 frames at this size ≈ 25MB decoded, real pages preload progressively · the copied snippet is self-contained (procedural frames) with its own demo scroll box.