This effect is usually called a scroll-scrubbed image sequence. A tall page creates scroll distance. A canvas stays fixed on screen. As the visitor moves down the page, JavaScript converts scroll progress into a frame number and draws that frame onto the canvas.
Use Whisk, another image generator you already like, or your own product photography. Keep the camera, lighting, product proportions, and background consistent between both frames. Only describe the transformation you want to happen.
Create a premium product hero image for [PRODUCT].
Composition: [DESCRIBE THE CAMERA ANGLE AND FRAMING].
Background: [DESCRIBE THE SET].
Lighting: soft studio lighting with controlled highlights.
Keep the product centred, fully visible, and easy to isolate.
No text, logos, interface elements, hands, or extra objects.
Aspect ratio: [16:9 OR 9:16].Use the attached start frame as the exact visual reference.
Keep the same product, camera angle, lens, lighting, colours, background, and framing. Transform only this:
[DESCRIBE THE END STATE].
The product identity and proportions must remain unchanged. No text, logos, interface elements, hands, or extra objects.Upload both images to Google Flow and create a short image-to-video transition. The camera should stay locked unless camera movement is part of the concept. Slow, simple transformations create cleaner scroll sequences than frantic motion.
Animate a smooth premium product transition from the first reference frame to the final reference frame.
Keep the camera completely locked. Preserve the product identity, proportions, materials, lighting, background, and composition throughout. The only motion should be [DESCRIBE THE TRANSFORMATION].
Use slow, physically believable movement with no sudden jumps, warping, duplicate objects, text, or camera shake. Finish exactly on the supplied end frame.A clip between three and six seconds is enough. Export at the same aspect ratio you want on the website and use the highest practical quality. The website will use the extracted frames, not the video file itself.
frame-0001.webp, frame-0002.webp, and so on.mkdir -p public/frames
ffmpeg -i product-animation.mp4 -vf "fps=20,scale=1600:-2" -c:v libwebp -quality 82 public/frames/frame-%04d.webpIf the sequence is still heavy, reduce the dimensions, frame rate, or WebP quality in that order. Test on a real phone using mobile data, not only on fast desktop Wi-Fi.
Place the numbered frames in your website project, then give Claude Code the prompt below. Replace the bracketed values before running it.
Build a responsive scroll-scrubbed image-sequence section for this website.
Assets:
- Frames live in [FRAME FOLDER].
- File pattern is [EXAMPLE: frame-0001.webp].
- There are [NUMBER] frames.
Behaviour:
1. Create enough vertical scroll distance for the animation to feel controlled, around 300vh as a starting point.
2. Keep a full-viewport canvas sticky while the user scrolls through the section.
3. Convert progress through the section into an integer frame index from 1 to [NUMBER].
4. Draw the matching image to the canvas using a contain-style fit, preserving aspect ratio and centring it.
5. Preload the first frame immediately, then preload the remaining frames without blocking the page.
6. Use requestAnimationFrame so rapid scroll events do not trigger unnecessary redraws.
7. Recalculate canvas size on resize and account for devicePixelRatio so the result stays crisp.
8. Add a loading state that disappears when enough frames are ready.
9. Respect prefers-reduced-motion by showing one static representative frame instead.
10. Do not introduce a new framework. Follow the architecture and styling already used in this project.
Add three optional text overlays that fade in and out at roughly 10%, 45%, and 80% scroll progress. Keep all copy and timing values in one easy-to-edit configuration object.
After implementing it, run the existing checks, explain which files changed, and tell me exactly where to edit the frame count, folder path, section height, and overlay copy.requestAnimationFrame.Audit the scroll-sequence implementation you just built.
Check for missing frame requests, incorrect zero-padding, canvas stretching, excessive redraws, memory pressure, layout shift, weak loading behaviour, and mobile cropping. Use the browser console and network panel where available. Fix confirmed issues only, then summarize the cause and the change.