Case study · MOTION · 2609.MOT.09
Revuelto: Assembled — a car that builds itself as you scroll
Is a canvas image sequence better than a video element for scroll-driven product animation?
For scroll-scrubbed product animation, a canvas image sequence beats a <video> element: each scroll position maps to an exact frame that can be drawn instantly in either direction, while seeking a compressed video backwards is slow and imprecise. Revuelto: Assembled scrubs 110 WebP frames of a Lamborghini Revuelto on a canvas — scroll down and it assembles, scroll up and it comes apart — on a 5.5 MB page.
- Frames
- 110 WebP, scrubbed live
- Page weight
- 5.5 MB
- 3D libraries
- 0 — dropped for canvas
- Stack
- Next.js 16 · React 19 · Canvas 2D · Lenis · GSAP · Tailwind v4
01The problem it solves
Apple-style product pages tie animation to the scroll bar. The obvious implementations — scrubbing a video, or rebuilding the object in 3D — tend to stutter when scrolled backwards or cost far more than the effect is worth.
02What he built
A frame sequence on a canvas
A locked-off clip exported as 110 WebP frames and drawn to a Canvas 2D element according to scroll progress, with Lenis smoothing the scroll and GSAP sequencing the story beats: the exploded intro, mid-assembly, the reveal and the specification section.
03 — THE HARDEST DECISIONDrop Three.js for a canvas
A real-time 3D model was the obvious choice and the expensive one. A pre-rendered frame sequence gives photographic quality, deterministic frames in both scroll directions, and a predictable budget — the whole page weighs 5.5 MB — so Three.js and React Three Fiber were dropped in favour of a canvas.
04The result
A scroll-driven teardown that runs smoothly forwards and backwards, built in Next.js 16 and React 19 with Tailwind v4 — the motion end of the range.
NOTESQuestions this project answers
STACKTech stack
- Next.js 16
- React 19
- Canvas 2D
- Lenis
- GSAP
- Tailwind v4