The four steps
You know the ones. You scroll and the product spins, or opens, or builds itself out of nowhere. Apple do it. Digi do it. Agencies charge thousands for it. It is not code — it is a folder of images being flicked through by your scroll wheel, and there are exactly four steps to making one.
Make two images in Google Flow
One start frame, one end frame. Same product, same camera, same light — the only thing that changes is the state of the product. Prompts for both are in the next section.
Frames to video
Still in Flow, pick Frames to Video, upload both images and let it animate everything in between. You get a short clip of your product transforming.
Chop the clip into frames with Easy Gif
Go to Easy Gif, use video to image sequence, set it to 30 frames per second, and download the whole lot as a zip. That zip is your animation.
Hand the folder to your AI coding tool
Drop the unzipped folder into Claude Code (Codex works too) and paste the coding prompt. It builds a page where scroll position controls which frame you see. Scroll down, it plays forwards. Scroll up, it rewinds.
Why two images instead of just one video
Because you need the first and last frame to be almost identical apart from the transformation. If you ask an AI for a video from a text prompt, the camera drifts, the light shifts, and the product turns into a slightly different product halfway through. Locking both ends is what makes it look expensive.
The four prompts
These are the whole point of this page. Copy them in order. The only bits you touch are the ones in square brackets.
Start frame prompt
Paste this into Google Flow to generate your opening image.
End frame prompt
The sneaky important one. Change as little as possible — same everything, different state.
Read this before you write your end frame
Every word you change here is a word the AI will treat as permission to change something. Same colour, same light, same angle, same distance. One transformation, nothing else. If your two images disagree about where the light is coming from, the animation will visibly wobble.
Frames to video prompt
Upload both images in Flow, pick Frames to Video, and paste this as the instruction.
The AI coding prompt
Unzip your frames into a folder, open Claude Code or Codex in that folder, and paste this. It removes most of the but-what-do-I-tell-Claude panic.
Make it your product
The headphones are just an example. Swap the SUBJECT line for whatever you sell and pick a transformation that is actually visible — a lid opening, a box unpacking, a bottle turning to show the label, a device folding out, a candle lighting.
Physical product
Closed to open. Front to back. Packaged to unboxed. Anything with a lid is an easy win.
Something with parts
Exploded to assembled. This is the one that makes people stop scrolling.
Not a product at all
A blank page filling with your workbook pages. A phone with your app appearing on the screen.
Keep it dead simple
One change per animation. Two transformations at once looks like a glitch, not a reveal.
If you want the version that looks best in a reel, use a keyboard that builds itself. Drop these two blocks into the START STATE and END STATE lines of the prompts above:
A rotating product is fine. A self-assembling one is a reel.
Something that visibly builds itself gets a reaction. A product rotating slightly gets a nod. Same effort, wildly different response — pick the transformation that earns the scroll.
The honest catches
It genuinely works and it genuinely takes an afternoon. Here is what nobody mentions in the reel.
The end frame is where it goes wrong
Nine times out of ten, a bad animation is a mismatched pair of images. If the product changes size, the shadow moves, or the background tint shifts, the video morphs instead of transforming. Regenerate the end frame rather than trying to fix it later.
30 frames per second adds up fast
A five-second clip is 150 images. That is a lot of page weight. Tell your coding tool to resize and compress the frames, or export at a lower frame rate for the web version and see if you can still tell.
Flow is metered
Google Flow runs on credits, and you will regenerate the pair a few times before they match. Budget for a handful of goes rather than one perfect attempt.
It builds a page, not a live site
What you end up with is a folder on your computer. Ask Claude to deploy it for you, or hand the folder to whoever looks after your website. Say so up front and it will set the file structure up sensibly.
Check it on a phone before you ship it
Scroll distance that feels slow and premium on a laptop can feel like it never ends on mobile. Tell the coding tool to shorten the scroll distance on small screens and test it with your thumb, not your trackpad.
Ready to go deeper?
Here is where to go next if you want the rest of it.
Wright Mode Membership
Join a community of women entrepreneurs implementing AI and automation in their businesses. Live calls, templates, and ongoing support.
Claude Masterclass
Learn how to use Claude like a pro. From prompting fundamentals to building real workflows that save hours every week.
Claude Code Masterclass
Go beyond the chat interface. Build automations, process data, and create tools with Claude Code — no developer experience needed.