---
title: "Revuelto: Assembled — Scroll-Driven Canvas Animation"
description: "Revuelto: Assembled by Shreyansh Kumar Singh — a car that assembles as you scroll: 110 WebP frames scrubbed on a canvas, on a 5.5 MB page."
url: https://www.shreyanshkumarsingh.com/projects/revuelto-scroll-canvas-animation
author: Shreyansh Kumar Singh
updated: 2026-10-08
---

# Revuelto: Assembled — a car that builds itself as you scroll

By Shreyansh Kumar Singh. Private repository — live demo above.

**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

## The 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.

## What 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.

## The hardest decision: Drop 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.

## The 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.

Stack: Next.js 16, React 19, Canvas 2D, Lenis, GSAP, Tailwind v4

- [Open the live teardown](https://www.shreyanshkumarsingh.com/sims/revuelto.html)

---

Shreyansh Kumar Singh — AI & Full-Stack Engineer, Pune, India. Contact: shreyanshkumarsingh208@gmail.com or https://www.shreyanshkumarsingh.com/contact (call and WhatsApp buttons). More: https://www.shreyanshkumarsingh.com/llms.txt · https://www.shreyanshkumarsingh.com/sitemap.xml