A scroll-linked image sequence. Instead of a video that plays on its own, you have a stack of still frames painted onto a canvas, and your scroll position decides which frame shows. Scroll down, it steps forward. Scroll up, it steps back.
That's why it feels like you're physically controlling the animation, and it's the exact technique behind those high-end product pages. Apple's AirPods page is about 65 images being swapped as you scroll. No 3D engine, no magic.
Once you know that, the whole thing stops being intimidating. You're not building an animation. You're building a folder of pictures and telling the page which one to show.
Step one lives or dies here, so don't freestyle it. The trick: both prompts are word-for-word identical except the one thing that changes. That's what keeps the product, camera and lighting matching across both frames, so the in-between stays clean.
Start frame (your product, assembled):
High-end studio product photograph of [YOUR PRODUCT], fully assembled and
intact, floating dead centre against a seamless matte [BACKGROUND COLOUR]
studio background. Straight-on view, perfectly level camera, soft even studio
lighting, one subtle soft shadow directly beneath the product, photorealistic,
ultra sharp, high detail. Keep the product small enough in frame that there is
generous empty space on every side. No text, no watermark, no hands, no props,
no brand logos. Landscape 16:9.End frame (your product, taken apart):
High-end studio product photograph of the same [YOUR PRODUCT] as a clean
exploded view: the outer shell or casing lifted apart and every major part and
layer separated and floating in an organised, evenly spaced arrangement along
one axis, like a technical teardown render. Same straight-on view, same
perfectly level camera, same soft even studio lighting, same seamless matte
[BACKGROUND COLOUR] studio background, one subtle soft shadow beneath. The core
body of the product stays in the exact centre at the same size, with the parts
spreading outward around it. Photorealistic, ultra sharp, high detail. No text,
no watermark, no hands, no props, no brand logos. Landscape 16:9.Swap the bracket for anything: a smartphone, a mechanical watch, a film camera, an espresso machine, a sneaker, a skincare bottle. "Exploded view" is the magic phrase, it's the technical name for those pulled-apart product renders and image models know it well.
For the end frame, name the 4 to 6 parts you want visible so the model doesn't invent mush:
In Seedance, load your start frame and end frame, then:
The product slowly comes apart into an exploded view: the casing separates and
the internal parts spread outward smoothly and evenly. Camera locked in place,
background unchanged, no cuts.Keep the camera locked. A moving camera here fights the scroll, because the viewer is already controlling the motion.
Take that clip to framesextractor.com, set it to 30 frames per second, and hit Download all ZIP. Unzip it and you have a numbered folder of images, one per frame. It runs in your browser, so nothing uploads anywhere and there's no waiting.
Drop your frame folder into Claude Code, then paste this underneath.
Using this folder of image frames, build a scroll-linked image sequence on an
HTML canvas. Preload all the frames first, then map the scroll position to the
frame index so the animation plays frame by frame as the user scrolls, the same
technique Apple uses on the AirPods page.
Requirements:
- Use GSAP and ScrollTrigger.
- Pin the canvas while the sequence plays, and scrub it smoothly to scroll so
there is no stutter.
- Preload every frame before the animation starts, with a simple loading state
so the user never sees half-loaded frames.
- Keep it sharp and centred on mobile, and reduce the frame count on small
screens if it helps performance.
- Respect prefers-reduced-motion: show the first and last frame only, no scrub.
- Add a headline that fades in over the top of the sequence.
Give me a single self-contained file I can drop straight into my site, and tell
me how to preview it locally.Once the sequence works, these turn one animation into a full polished section. Same project, same tool.
This is genuinely how the professional version works, but AI-generated frames can drift. A logo warps, a reflection flickers, an edge wobbles. Generate a couple of clips and pick the cleanest, and keep the animation simple (a rotation, an assembly, a single reveal) rather than a complex scene. Simple subjects on clean backgrounds give you the crispest result.
Also: the exploded view is the hardest thing to get right, because the model has to invent what's inside your product. For anything with real internals, expect a few rerolls, and name the parts explicitly.
🎬 Higgsfield: higgsfield.ai (images and Seedance for the in-between)
✂️ Frames Extractor: framesextractor.com (video to image sequence, free, runs in your browser)
🤖 Claude Code: claude.com/product/claude-code (wires it to your scroll)