Claude Opus 5.5 Motion Design for SaaS and Mobile Apps

You have seen the clip by now. Someone typed one sentence into Claude Code, asked for a fifteen-second showreel, told it to go all out, and came back to camera moves, kinetic type and transitions that look like a studio's reel. Claude Opus 5.5 motion design has been the most-shared thing in developer feeds since the model shipped on 22 September 2026.

Then you try it on your own product and the result is worse, because a showreel only has to prove the model can animate. A product video has to show your product: its screens, its copy, its actual behaviour. This guide covers how to get from the first kind of video to the second, and why the answer is different for a SaaS web app than for a native mobile app.

What you'll need

• Opus 5.5 in an agent. Claude Code, or any harness calling claude-opus-5-5 through the API. Anthropic lists it at $4 per million input tokens and $20 per million output tokens, with effort levels from low to max (Anthropic, checked 27 September 2026). Motion work is long output, so use high effort for drafts and save max for the final pass.
• A renderer. Opus 5.5 does not output video. It writes code that draws frames, and something on your machine turns those frames into a file: a headless browser plus FFmpeg, Remotion, HyperFrames, or a native tool.
• The real material of your product. Source code, design tokens, screenshots, or a screen recording. Which one matters most depends on Step 1.
• About an hour for a 15–30 second piece, most of it spent reviewing drafts rather than waiting.

The short version

1. Decide whether the agent can read your product directly (a web app) or only see it (a native mobile app).
2. Write a brief that names every screen state, the copy, the length and the aspect ratio.
3. Make the agent storyboard the beats and approve that before any animation code exists.
4. Render low-resolution drafts and fix one shot per round.
5. Finish for the channel: aspect ratio, sound, and the App Store's capture-only rule.

Step 1: Decide whether the agent can read your product

This is the decision the viral examples skip, because a showreel has no product in it. The question is simple: can Opus 5.5 read the thing it is about to animate, or can it only look at pictures of it?

SaaS and web apps: point it at the code

If your product runs in a browser, you are in the easy case. The model's frames are drawn with the same materials your product is built from: HTML, CSS, SVG, canvas. Give it the repository or the live URL and it can pull your real design tokens, your font stack, your component markup and your actual copy. Danny Stuart's write-up of an agentic promo video describes exactly this: point the agent at the real site and it "can open it and match it" (Substack).

That makes a SaaS product video close to a rebuild of your own UI, animated. Dashboards count up, rows slide in, a modal opens with your real easing. The fidelity ceiling is high because nothing has to be translated.

Native mobile apps: give it pixels or a rebuild

A SwiftUI or UIKit app is the hard case. The agent cannot run your app in a browser, so any "app screen" it draws in HTML is a redrawing. It will be close. It will also get the system font's tracking slightly wrong, invent a spacing value, and animate a sheet with a curve iOS never uses. Viewers who own an iPhone notice, even when they cannot say what is off.

You have three honest options:

• Screenshots. The agent animates around real stills. Accurate, but the app never moves.
• A screen recording you made. The agent composites real footage into its motion design. Accurate and moving, but you had to make a clean take. This is also the input dedicated mockup tools expect; the Rotato comparison covers that route.
• A rebuild that actually runs. The agent rebuilds the feature as a working SwiftUI mock, runs it in the iOS Simulator, and films it. Native motion, no take to perform. This needs tooling beyond a browser renderer, which is where the last sections of this guide come in.

The viral clips prove the model can animate. They say nothing about whether it can animate your app, and for native apps that depends on what you hand it.

Step 2: Write a brief that names every state

A one-sentence prompt works for a showreel because any result counts as success. For a product, the brief is where accuracy comes from. Charlie Hills, who published sixteen Opus 5.5 loops, describes the same discipline for single motions: show Claude a reference and name every state (MarTech AI).

A brief that works for a product video:

Product: Ledgerly, invoicing for freelancers (SaaS, React web app)
Source: ./apps/web (use real tokens from tailwind.config.ts, real copy)
Length: 20 seconds, 1920x1080, 30 fps
Beats:
  1. 0-3s   Hook line: "Invoices that chase themselves."
  2. 3-9s   Dashboard: three overdue invoices, total counts up to $4,280
  3. 9-14s  Click "Send reminders", toast appears, rows turn green
  4. 14-18s Close-up on one row: status Overdue -> Paid
  5. 18-20s Logo, URL
Rules: no invented features, no stock icons, our font only.
Output: storyboard first, wait for approval.

Every numbered beat names a state the product can actually be in. That is what stops the model from inventing a feature because it looked good in the storyboard. For a mobile app, replace the Source line with the screenshots or recording you are supplying, and list the exact screens in order.

Step 3: Make it storyboard before it animates

Ask for the storyboard as a separate deliverable and read it before any animation code exists. In Stuart's first run the agent skipped this gate, and the write-up lists it as the first thing to fix.

A storyboard costs a few thousand tokens. A wrong animated draft costs a render and an hour of your attention. Check three things at this stage:

• Order. Does each beat follow from the last, the way a user would meet it?
• Truth. Is every screen something your product really shows, with real copy?
• Time. Does any beat carry more than one idea? Split it, or the viewer loses it.

Approve, then let it build. This is also the moment to state the aspect ratio for good. OrcaRouter's review of a public product-video skill notes that switching to vertical requires re-composing the piece rather than cropping it (OrcaRouter).

Step 4: Draft at low resolution, then fix one shot at a time

Rendering is the slow part. A 20-second piece at 30 fps is 600 frames, and each one is a browser paint or a native draw. Render drafts at half resolution (Remotion's --scale flag, or a smaller canvas in whatever stack you use) and full resolution only once.

Then give feedback in shots, not in adjectives:

1. Name the beat by number.
2. Say what is wrong in concrete terms ("the toast arrives 400 ms after the click; make it immediate").
3. Say what must not change ("keep beats 1–3 as they are").

Opus 5.5 is good at scoped edits because the video is code: it changes one timing value and leaves the rest alone. "Make it pop more" produces a rewrite of the whole piece and a new set of problems.

Feedback in shots gets you a one-value change. Feedback in adjectives gets you a rewrite.

Step 5: Finish for the place it will play

Aspect ratio. Landing pages and YouTube want 16:9. X, Instagram and TikTok want 9:16. Decide per channel and render each one as its own composition.

Sound. Opus 5.5 can synthesize a bed in code, and some creators have had it compose music. For a product video, a licensed track with cuts on its beats usually lands better than a generated one. Tell the agent the tempo and ask it to cut on the beat.

The App Store. Apple's guideline 2.3.4 says previews "may only use video screen captures of the app itself," with narration and overlays allowed on top (Apple). A code-drawn redrawing of your app is fine for social and your landing page. For the preview slot, the footage inside the frame should be a real capture.

Where this goes wrong

• Showreel drift. The model optimises for spectacle when nothing constrains it. Particle bursts and 3D logo spins crowd out the one thing the viewer needed to see. The brief's beat list is the fix.
• Invented UI. Without real source or real pixels, the model fills gaps with plausible screens your product does not have. On a SaaS app, point it at the code. On mobile, supply the pixels.
• Redrawn native UI. Close is not identical. Fonts, corner radii and spring curves drift, and iPhone owners feel it.
• Guessed timing. Code-drawn video places every cut at a second the model chose. When a beat is "tap, then the sheet rises", the cut should land on the tap, and nothing in a hand-written animation knows when that is.
• Render-bound iteration. Full-resolution renders on every round turn a one-hour job into an afternoon. Draft small.
• Max effort everywhere. Long motion code at max effort is expensive. Draft at high; spend max on the final pass.

Doing the mobile half without redrawing your app

This is the gap Reely was built for. It is a Mac app plus an agent skill that turns an iOS feature into a finished video, and it works from whatever you have: screenshots, a screen recording made on any stack, or nothing at all. On that last rung, the agent (Opus 5.5 in Claude Code, if that is what you run) rebuilds the feature as a working SwiftUI mock, drives it in the Simulator with the app's native animations, and records it.

The mechanical difference is timing. Because the agent authored the run, reely run writes a timeline.json sidecar of labeled interaction marks beside the recording, and the composition refers to those marks by name instead of by second:

reely marks out/checkout.mp4

That prints the marks a composition can cut on. A caption tied to the "pay" tap lands on the tap. Re-record after a UI change and every dependent cut moves with it. On rungs one and two, uploaded footage has no sidecar, so you time cuts by eye, like any other tool.

The video itself is JSON, not a render: a spec the agent writes and Reely validates, previews in its editor and renders locally on your Mac. Nothing uploads. The motion range covers kinetic type, device choreography, captions and a brand theme taken from your app's own icon and font. The same format covers both shapes the Reely docs describe: a feature video that walks through one flow, and a launch teaser with a phone playing the real recording.

Where Reely is the wrong tool: a web-only SaaS product. Its device frames, formats and brand extraction are phone-shaped, and it has no web-app capture path. For that product, Opus 5.5 plus a browser renderer, pointed at your own code, is the better route. If your SaaS also ships an iOS app, Reely covers the app half.

A worked example: one photo app, 1,301 layers

The viral showreels are fifteen seconds of abstract shapes. Here is what the same kind of agent produces when it is aimed at a product. Memories is a demo photo-journal app we built for this film, and its 27.5-second film sells one idea: every day in the app holds one photo.

The storyboard the agent wrote has ten beats, each tagged with a role. Grouped by role:

1. Hook. A globe of photo dots spins, brakes, and the camera dives in as each dot unrounds into a photo.
2. Proof. The camera hops through a field of about a thousand photos, three times.
3. Feature. Twice, one photo opens into a detail card with place, year and a note, then dismisses.
4. Reveal. The last photo grows full-bleed, and the camera dollies out until it is one cell in a calendar.
5. Close. The calendar is the app's screen, on a phone that turns.

Nobody typed 1,301 layers. The agent wrote a small generator script that places every photo on a sphere or in the field, plans the camera route, and emits the composition as JSON. The human part was direction, and it was specific: no card ever flips or rotates, every photo keeps its own aspect ratio, and the dots scale in over the globe's rim instead of blinking. Those rules came after rejected drafts, not before.

What the engine did with that data:

• A perspective camera flies through photo layers placed in depth, with per-layer z, rotationXDeg and rotationYDeg.
• 448 animated masks morph a circle into a rounded card by keying the mask's width, height and corner radius, while a displacement effect bends the card's edge.
• 36 frame-pinned layers (space: frame) hold the detail card's text still while the camera keeps moving behind it.
• A 3D device model ends the film, with the calendar screen on it.

It renders at 2218×1440 and 60 fps, locally, in about 24 minutes on the Mac it was built on. Drafts at 30 fps with motion blur off took about five. Because the film is data, the editor opens it as a project you can inspect layer by layer.

A 1,301-layer film is not a prompt. It is a script the agent wrote, a spec the engine checked, and round after round of a human saying what was wrong.

What Advanced Motion adds, and what it does not

The Memories film uses parts of Advanced Motion, a Reely tier in development and not in the current release. The camera, depth, masks and displacement above are Advanced vocabulary; today's plan renders none of them. The Opus 5.5 clips make the reason obvious: the model can direct a film like this, but it needs an engine with the vocabulary to render one natively. The families in progress:

• Procedural systems. repeater layouts (grid, ring, scatter, sphere) and emit particles such as confetti and bokeh.
• Vectors and morphs. A vector kind with icon sets, SVG import, shape morphs, draw-on trims, masks and blend modes.
• Data and counters. Bar, line and donut charts bound to a data series, KPI rows, count-up stats.
• UI cards. Seventeen blocks, including ui.chatThread, ui.notification and ui.listRow, plus screens whose layers can leave the phone.
• Typography. Fit-to-box text, a typewriter caret, per-letter colour and glow.
• Cinematic finish. Twenty-five effects, including liquidGlass, bloom, lightSweep and grain, plus motion blur.
• Camera and 2.5D. Perspective cameras, depth of field, shake, and frame-pinned layers.

One limit worth knowing: the phone is the only true 3D object. Everything else is a flat layer placed in space, without lighting on layers or depth intersection between them.

Frequently asked questions

Does Claude Design do motion graphics?

Yes. Claude Design, Anthropic's visual creation tool released in April 2026, builds animations as HTML, CSS and JavaScript that play in the browser. Published walkthroughs note that it does not export an MP4 directly; you capture the animation frame by frame or send it to another tool. For a finished video file, Claude Code with a renderer is the more direct route.

Can Opus 5.5 create 3D models?

Opus 5.5 can write code that builds and renders 3D scenes, typically in Three.js or WebGL, and creators have used it for devices, logos and abstract geometry. It is not a mesh modeller: the geometry lives in code rather than a file you open in Blender. Anthropic's launch page reports that in a game-building evaluation it scored higher than any other model on graphics and polish.

Is motion design getting replaced by AI?

Not yet. Opus 5.5 compresses the production side of motion design: keyframes, easing, layout and rendering now come from a paragraph. The work that remains is judgment: which beat matters, what the viewer should feel, when to cut. The strongest examples still took several rounds of human feedback, and their authors say so.

Can Claude Code generate a video?

Yes, indirectly. Claude Code writes the code that draws each frame, then runs a renderer on your machine, such as a headless browser with FFmpeg or Remotion, which encodes the frames into an MP4. No hosted video model is involved, so the output is editable: change a timing value in the code and render again.

Next

If your product is a web app, you already have everything this guide needs: Opus 5.5, a renderer, and your own repository. If it is an iOS app and you want the video to show the real app moving, with cuts that land on real taps, get Reely for Mac. It is $9.99 a month or $89.99 a year, with no free trial.