Note
Canvas Image Sequence vs Video for Scroll Animation
Is a canvas image sequence better than a video element for scroll-driven product animation in Next.js?
For animation scrubbed directly by the scroll bar, yes: a canvas image sequence maps each scroll position to one exact, already-decoded frame and draws it instantly in either direction, while seeking a compressed video — especially backwards — waits on the decoder and stutters. Use video when the clip plays on its own; use a frame sequence when the user's scroll is the playhead.
Why video seeking stutters
Compressed video stores occasional keyframes and encodes most frames as differences from earlier ones. To show an arbitrary frame the browser decodes forward from the previous keyframe — cheap when playing forward, slow and uneven when the user scrubs back and forth. You can re-encode with every frame as a keyframe, but then the file balloons.
How the frame sequence works
Revuelto: Assembled — a Lamborghini Revuelto that assembles as you scroll and comes apart as you scroll back — uses 110 WebP frames drawn to a Canvas 2D element. Scroll progress picks the frame index; drawing an already-loaded image is a single drawImage call, so forwards and backwards cost the same. Lenis smooths the scroll input and GSAP sequences the story beats around it. The whole page weighs 5.5 MB.
The trade-offs to plan for
- Download size: you ship every frame. Keep the frame count to what the motion needs and compress frames as WebP or AVIF.
- Memory: decoded frames cost width × height × 4 bytes each, so frame size matters more than file size on phones.
- Loading: draw the first frame immediately and load the rest progressively, so the page is usable before the sequence is complete.
- Why not real-time 3D: Three.js or React Three Fiber can rebuild the object live, but a pre-rendered sequence gives photographic quality and a predictable budget — Revuelto dropped 3D for exactly that reason.