Build a $5k scroll animation with zero code, end to end in Ultron

You can build the $5,000 scroll animation from Apple's product pages yourself, end to end in Ultron, without writing a single line of code.

You know those scroll animations on Apple's product pages, where you scroll down and the product spins, builds itself, or comes apart frame by frame? Agencies charge thousands to build those, because the usual way involves a 3D artist rendering a long image sequence and a developer wiring it to your scroll. It looks expensive because normally it is.

Here is the shortcut. You generate the start and end of the animation in Ultron, let Ultron fill in every frame in between, slice that clip into images, and then Ultron writes the code that wires it to your scroll for you. Four steps, zero code, and the output is the exact technique Apple uses on the AirPods page. Below is the full walkthrough, the build prompt, and three bonus prompts to push it further.

What you're actually building

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 the scroll position decides which frame shows. Scroll down, it steps forward. Scroll up, it steps back. That is why it feels like you are physically controlling the animation, and it is the same trick behind those high-end product pages.

The four steps

• Generate two frames in Ultron. Generate two images from a text prompt: a start frame (how the animation begins) and an end frame (how it ends). Keep the subject, angle, and lighting consistent between them so only the thing you want to animate actually changes.

• Animate the in-between with frames to video. Still in Ultron, feed it your first and last image, add a short motion prompt (for example, "slow smooth 360 rotation"), and let Ultron generate every frame between your start and end. Download the clip.

• Slice the clip into frames in Ultron. Have Ultron convert the video into a JPG image sequence at 30fps and package it as a downloadable ZIP. Unzip it and you have a numbered folder of images, one per frame.

• Hand the folder back to Ultron. Drop the whole frame folder into Ultron and paste the build prompt below. It writes the code that links your scroll to the frames.

The mega prompt

3 bonus prompts to run next

Once the scroll sequence works, these turn one animation into a full polished section. Same project, still in Ultron.

How to get the most out of it

• Lock your two frames before you animate. The whole effect lives or dies on the start and end images. Generate them with the same subject, camera angle, and background so only the motion changes. If frame one and frame two look like two different products, the in-between will look like mush.

• More frames means smoother, but heavier. 30fps on a 2 to 4 second clip is the sweet spot. Longer or higher means a buttery animation but a heavier page, so if it feels slow to load, ask Ultron to compress the images or drop to every second frame.

• Brand new? Paste the build prompt exactly as-is. You do not need to understand the code. Drop the folder, paste the prompt, and ask Ultron to "run it and show me a preview" so you can see it working before you touch anything.

• Power user? Feed it your real page. Paste your existing site code or design system first, tell it your section width, fonts, and breakpoints, and have it match your stack (React, an embeddable widget, plain HTML) instead of generating a generic file.

The honest bit

This is genuinely how the pro 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 your animation short and simple (a rotation, an assembly, a single reveal) rather than a complex scene. Simple subjects on clean backgrounds give you the crispest result.