A product that assembles itself as you scroll (no motion code)
You generate two images of the same product (exploded then assembled), a model interpolates the in-between, Claude Code cuts the clip into frames and writes the canvas that scrubs them on scroll. Result: the product assembles as the visitor scrolls down, the effect agencies charge thousands for. Not a single line of motion to write.
Why
What agencies charge thousands for is an image sequence painted on a canvas and driven by scroll. Not magic, a chain of four gestures. You have seen the effect on Apple product pages: you scroll down, the object builds itself, part by part, at the exact pace of your finger. It looks like a five-figure motion budget. In reality, it is a series of still images a <canvas> shows one by one according to your scroll position. All the work is to make those images cleanly and to scrub them without breaking. The chain: Nano Banana Pro generates the assembled frame then, by editing, the exploded one,…
When
Creation phase for a product page or a high-impact marketing section, audience designer/PM/PO who wants a signature interaction without a motion team or dedicated front-end dev. ✅ You know it's your kit when You have a hero object whose assembly tells something (product, device, packaging, set of parts) You want an interaction driven by the visitor, not a background looping on its own You let…
Tools included
- Nano Banana Pro
- Seedance
- Claude Code
- Gsap