No sequence found. Run npm run build:sequence to render the frames from the product geometry.
Experiment — Scrubbed sequence
Rendered once.
The same product, pre-rendered to a frame sequence by npm run build:sequence — a turntable captured from the geometry the app already ships.
01
Why not a video
Seeking currentTime snaps to the nearest keyframe, so a scroll-scrubbed video judders unless it is re-encoded all-intra — which costs several times the bytes. A sequence seeks perfectly: frame i is always exactly frame i.
02
Decode, then draw
img.decode() moves the work off the scroll path. Assigning src and drawing on load blocks a frame the first time each image is painted, and it stutters precisely where the user is looking.
03
Blit on change
The canvas only redraws when the frame index moves. Redrawing the same image sixty times a second is free to write and expensive to run.
04
Where this wins
No shader compilation, no GPU memory, no context to lose, and it behaves identically on a five-year-old phone. For pre-determined product motion this is the correct answer more often than WebGL is.