# Can you prompt a professional animated commercial? Yes. Here is how.

By Daniel Marklund. Published 6 November 2026.

## 40 seconds of animated illustrations, made with nothing but prompts

A few weeks back we set ourselves a challenge: make a professional animated commercial without designing anything and without writing a line of code. Only prompts.

Does it work? Yes ✅

Was it easy? No 🚫

It took a lot of iterations and some clever tricks.

Here is the result:

https://player.vimeo.com/video/1240818352?h=76710971e8

**The short version.** Image models are impressive. But when it comes to vector illustrations it is not really there yet, especially if you want to add movement. Video models don’t rescue you either. Hand them a whole scene with a lot of details and they fall apart. But here is what works:

1. Generate each scene as a still image
2. Divide the scene into its individual illustrations
3. Ask video model to animate each illustration on its own, one short clip each
4. Add a mask. Keep the illustration and the movements, remove background and everything else.
5. Put the scene back together

We are certain all of this will get easier, fast. New models land every month. Until then, here is an approach you may use to get similar results for your project.

## The whole process in one picture

![Flow chart of the process: write the manuscript, generate a style guide with Claude, write image prompts with Claude, generate the scenes as images in Figma Weave. Scenes go straight to Remotion, or, when illustrations need animation, take a detour: cut out each illustration, animate it in Veo 3, make a mask with Claude. Remotion, built by Claude, assembles the scene into the final 40-second video](/img/blog/prompt-an-animated-commercial/pipeline.svg)

Simple scenes go straight from the still to Remotion. Illustrations that need life are cut out, animated one by one, and masked first. Then Remotion rebuilds each scene, using the still as a guide.

## The toolbox

Here are the tools we used. Any of them can be swapped for a competitor.

| Tool | What it did |
| --- | --- |
| Claude | Read our website and wrote a style guide. Turned the manuscript into one image prompt per scene. Wrote every video prompt. |
| Figma Weave (formerly Weavy) | Node-based canvas where the still image for each scene was generated. ComfyUI or Wireflow would work too. |
| Veo 3 | Turned individual illustrations into four-second animated clips. |
| Claude Code | Wrote the script that diffs frames and generates masks. Built and rendered the whole Remotion project. |
| Remotion | Assembled stills, clips, text, transitions and sound into the final video. HyperFrames would work as well. |

## Step 1: Make sure the model starts from your brand

To get the end result to look a bit more unique (and coherent with our brand) we pointed Claude at cloudamqp.com and asked it to study the site: the colors, the fonts, and the illustrations we already use. You’ll receive a short “design guide” in return.

That guide was pasted into every prompt that followed.

Steal the prompt

```
Go to [PASTE-URL-FOR-YOUR-WEBSITE] and study our design. Extract the color palette with hex codes, the heading font and the body font, and the style of the illustrations: line weight, shapes, level of detail, and what is never used (gradients, 3D, photos). Write a short style guide I can paste into image generation prompts so every image matches the brand.
```

## Step 2: Write the manuscript as scenes

My colleague Lovisa wrote the manuscript. She split it into five scenes (plus an outro). Each scene got one-two lines of text that the voiceover would read out loud and one sentence describing what should be on screen. Reading it felt like flipping through a slide deck.

Scene 3, for example:

- **Visual**: Three vertical sections each holding an illustration from small to large. A Raspberry Pi, a cell tower, a data center, with a message rate above each one (1k msg/s, 1M msg/s, 1B msg/s)
- **Voiceover**: “Whether you’re sending a thousand messages or a billion we make scaling easy.”

That structure was a great starting point. Enough to ask Claude for an image prompt for each scene.

But don’t jump to the images yet. Finish the manuscript first.

Everything after this step depends on it. The images illustrate what is being said. The animations are timed to the voiceover. Change the manuscript late, and you redo the work that came after it.

So get it 90% done before you move on. You can still tweak the wording and move scenes around. What’s hard to change later is the length.

Length sets the pace, and pace is what makes a video feel right. Each scene’s animation needs about as much time as its sentences takes to say:

- If the sentences are too short, the voiceover goes quiet while it waits for the animation to finish.
- If the sentences are too long, the voiceover has to hurry because the animation is already over.

Both feel off. Keep the scenes roughly equal in length.

To check, read the manuscript out loud with a stopwatch. Or ask Claude how many seconds it takes to say at commercial pace, pauses included. That’s roughly how long your video will be. Reading it out loud also shows you which sentences don’t flow.

## Step 3: One prompt per scene, one scene at a time

We gave Claude two things: the style guide and the ideas on how to visualise each scene. Then asked for one image prompt for each of them. Claude wrote the first one, we tested it, and iterated if we were not happy.

Steal the prompt

```
Write an image prompt for a scene in a storyboard for an upcoming video. Return only the prompt.

Style guide: [Paste output from Claude from previous step]
Visual: Three vertical sections each holding an illustration from small to large. A Raspberry Pi, a cell tower, a data center, with a message rate above each one (1k msg/s, 1M msg/s, 1B msg/s)
```

You can paste this resulting image prompt straight into ChatGPT or Claude and get an image back. However, I prefer to use a node-based tool instead, like Figma Weave. Three reasons:

- You see every prompt next to the image it produced, not buried in a long chat
- Iterating is a matter of duplicating a node and changing one line
- You pick the model per node, so you can try several without starting over

(ComfyUI or Wireflow give you the same thing.)

![A Figma Weave graph: 1, paste your prompt into a Prompt node, which feeds a node running the model of your choice; 2, run the model to generate the image; 3, use the result as the image input for the next scene](/img/blog/prompt-an-animated-commercial/figma-weave-demo.svg)

The trick for consistency: generate scene 1, then feed that image in as a reference when you generate scene 2. Then scene 2 into scene 3. Each scene inherits the look of the one before it. Combined with the style guide, this kept the backgrounds, the sparkles and the line weight the same from first frame to last.

At this stage you are not chasing perfection. You are collecting parts.

Steal the prompt (scene 4, containing three illustrations)

```
Create a flat-design illustration split into three equal vertical sections on a light warm-gray (#F5F0EB) background, 16:9. Faint dotted vertical lines separate the sections. Each section has a bold dark charcoal (#4A4A4A) heading above its illustration.

Left: heading "Automatic Diagnostics". A desktop monitor showing a browser window with a simple diagnostic dashboard: status bars, a small line graph trending up, green dots for healthy and orange (#E8792F) for warning, a checklist with checkmarks.

Middle: heading "Alarms & Notifications". A smartphone at a slight tilt. A push notification banner with a small orange bell icon sits at the top of the screen. Two or three short vibration arcs radiate from each side of the phone.

Right: heading "24/7 Human Experts". A friendly support engineer with a headset, sitting at a desk in front of a monitor, leaning slightly forward. A small orange speech bubble with three dots floats near the microphone.

Style: clean, minimal flat vector with consistent line weight across all three. No 3D, no photorealism, no gradients. Characters simple and stylized. The only accent color is orange (#E8792F), with green (#4CAF50) used sparingly for positive status. Small plus-sign sparkles and dots scattered lightly in the background, matching the previous scene.
```

Here is what we got:

- [![Choose your broker: RabbitMQ or LavinMQ. Choose your cloud: AWS, Azure, Google Cloud or Scaleway, each logo on a white card](/thumbs/card/img/blog/prompt-an-animated-commercial/scenes/1-choose-your-broker.png.webp)](/img/blog/prompt-an-animated-commercial/scenes/1-choose-your-broker.png)
  _Scene 1: Meet CloudAMQP_
- [![A New Instance card with AWS and EU-West-1 selected, a progress bar at 100%, Instance Ready and a cursor clicking Create Instance](/thumbs/card/img/blog/prompt-an-animated-commercial/scenes/2-new-instance.png.webp)](/img/blog/prompt-an-animated-commercial/scenes/2-new-instance.png)
  _Scene 2: Create an instance_
- [![A Raspberry Pi at 1K msg/s, a cell tower at 1M msg/s and a data center at 1B msg/s, small to large](/thumbs/card/img/blog/prompt-an-animated-commercial/scenes/3-makes-scaling-easy.png.webp)](/img/blog/prompt-an-animated-commercial/scenes/3-makes-scaling-easy.png)
  _Scene 3: From a Pi to a data center_
- [![Automatic Diagnostics on a monitor, Alarms & Notifications on a phone showing a high CPU alert, and 24/7 Human Experts as a support engineer with a headset](/thumbs/card/img/blog/prompt-an-animated-commercial/scenes/4-key-features.png.webp)](/img/blog/prompt-an-animated-commercial/scenes/4-key-features.png)
  _Scene 4: Diagnostics, alarms, experts_
- [![A startup, a hospital, a bank and a factory in a row, linked by a dashed arc, above the line Mission-critical messaging for every industry](/thumbs/card/img/blog/prompt-an-animated-commercial/scenes/5-every-industry.png.webp)](/img/blog/prompt-an-animated-commercial/scenes/5-every-industry.png)
  _Scene 5: Every industry_
- [![A sign post reading Queue starts here, above www.cloudamqp.com and a Get started today button](/thumbs/card/img/blog/prompt-an-animated-commercial/scenes/6-outro.png.webp)](/img/blog/prompt-an-animated-commercial/scenes/6-outro.png)
  _Scene 6: Outro_

## Step 4: Don’t animate what Remotion can draw

Before touching a video model, ask one question per scene: can this be built from boxes, text and buttons?

For example: Scene 1 is logos sliding onto cards. Scene 2 is a cursor clicking a button and a progress bar filling to 100% with some confetti. None of those need an animated illustration. Claude Code can build these scenes for us straight in Remotion by using plain web elements.

- [![The reference image from Figma Weave for scene 2, a New Instance card with a progress bar at 100%, and an arrow to the final scene, implemented in Remotion with HTML elements only](/thumbs/hero/img/blog/prompt-an-animated-commercial/scene-2-html-elements-only.png.webp)](/img/blog/prompt-an-animated-commercial/scene-2-html-elements-only.png)
  _Give Claude Code the still from Figma Weave as a reference and it rebuilds the whole scene in Remotion from plain HTML elements: the card, the dropdowns, the progress bar, the confetti. No image or video model involved._

Remotion is good at this. Fades, slides, scale, stagger, a cursor that eases into a click. You describe the motion in words and the code appears.

You could probably stop here. A video made this way already looks like a product video and it takes a fraction of the time.

But we wanted more. Scenes 3, 4 and 5 are illustrations: a data center, a buzzing phone, a support engineer, a row of buildings. Those are the ones that give our commercial its character, and for that we need a video model...

## Step 5: Video models can’t handle a scene. Give them one object.

The obvious move is to feed the whole scene into a video model and ask it to animate. We tried. The result was unusable. Text warps, objects drift into each other, details appear that were never in the image. Video models are great at a small number of objects and bad at a composition.

The workaround we found: cut every scene into its individual illustrations. Scene 4 has three: a monitor, a phone, an engineer. Each became its own image file, its own prompt, and its own four-second clip.

What the video prompt may include:

1. Name the one thing that moves and how
2. Name everything that must stay still, the background included
3. Ask for no camera movement, no zoom and no new objects
4. If the clip should loop, ask for the last frame to match the first

Steal the prompt

```
Use the attached illustration as the start frame. Animate only the support engineer: they type on the keyboard with both hands in a calm, natural rhythm and talk into the headset, with small nods and subtle mouth movements, as if helping a customer. Everything else stays exactly as it is: the monitor and its screen, the desk, the keyboard and the background. No camera movement, no zoom, no new objects. The last frame matches the first so the clip loops. No audio.
```

![The start frame: a flat illustration of a support engineer with a headset, typing at a computer](/img/blog/prompt-an-animated-commercial/support-engineer-start-frame.webp)
_Start frame_

[Watch the Veo 3 clip](/img/blog/prompt-an-animated-commercial/support-engineer-veo3.mp4)
_Veo 3 clip_

Even then, Veo 3 hallucinates. Tremendously. The same prompt could give me a wacky result on one run and a flawless one on the next, without me changing a word. Some illustrations took six prompts before a usable clip came out. This was certainly the most frustrating part of the whole project.

[Watch the phone clip's iterations](/img/blog/prompt-an-animated-commercial/phone-veo3-iterations.mp4)
_Getting a usable clip can take patience and a lot of iterations._

## Step 6: The mask trick that makes it blend

This is the part people ask about.

Veo 3 gives you a full-frame video. Drop that into the scene and it covers the background, the heading and the illustration next to it. Veo 3 also shifts the colors slightly some times.

We needed to remove everything but the illustration and its animation.

I asked Claude Code to analyse each clip: compare every frame, find the pixels that change, and write a mask.

Steal the prompt (to Claude Code, in a folder where you store each clip)

```
In this folder is a short video clip of an illustration on a plain, flat-coloured background. I want a mask that separates the illustration from the background, so I can cut it out and place it on a new background.

Go through every frame. Apply a light blur so compression noise and small colour drift don't register, and measure how far each pixel's colour is from the background colour. Sample the background colour from the edges of the frame. Count as background only the pixels connected to the edge of the frame, so light areas inside the illustration that happen to be close to the background colour stay in the mask. Ignore tiny specks.

Smooth the mask across 3 to 5 frames so the outline doesn't flicker as things move. Output a mask video: white for the illustration, black for the background, with feathered edges. Add a small margin so the feathering never cuts into the outlines.
```

It is not perfect. A small margin around each moving part is still visible if you look for it, and a bad threshold either eats part of the animation or lets a halo through. Tune it per clip.

[Watch the cut-out clip](/img/blog/prompt-an-animated-commercial/engineer-cutout-reveal.mp4)
_Only the illustration and its movements are kept. Everything else becomes transparent._

Claude Code handles the task in an interesting way: First it analyses each frame in the clip and make a heatmap of how far each pixel move from the background colour, then turn that into the mask.

![A reference frame from the clip: the support engineer at the computer on a light background](/img/blog/prompt-an-animated-commercial/mask-reference-frame.webp)
_Reference frame_

![A heatmap of the same frame: the background is dark, the illustration's outlines and hair glow bright yellow, and its fills are purple](/img/blog/prompt-an-animated-commercial/mask-heatmap.webp)
_Heatmap_

![The mask: a soft-edged white silhouette of the engineer, monitor and desk on black](/img/blog/prompt-an-animated-commercial/mask-foreground.webp)
_Mask_

## Step 7: Let Remotion do the assembly

I dumped all the material in one folder called `/inbox`: the manuscript, the stills, the illustrations, the animated clips and their masks. Every file was named after the scene it belonged to.

Claude Code took it from there and built the Remotion project.

Remotion handled more on its own than I expected:

- The phone in scene 4 buzzes with a shake effect
- The radio waves on the cell tower in scene 3 pulse outward
- The sign post in the outro slides in and wobbles upright

None of that needed a video model. So Veo 3 ended up on only a handful of illustrations, the ones that needed movement.

Steal the prompt (to Claude Code, at the root of the project folder)

```
Build a Remotion commercial, 1920x1080 at 30 fps, from the material in /inbox. Use the manuscript for scene order and voiceover. Treat each scene's still as a storyboard, not as the truth: a lot has changed since it was made. Don't use it as the background. Use it as the starting point to rebuild the scene from its own material (illustrations, animated clips, masks): place each piece roughly where it sits in the still, use the masks as alpha for the clips, and let the material decide the details. Time each scene to its voiceover and cross-fade between scenes.
```

## Step 8: Keep the humans in the parts people hear

My colleague Johannes recorded the voiceover. The sound effects came from libraries, found the traditional way, by scouring the internet.

AI could have done both. Voice models are actually really good by now, but we chose not to.

CloudAMQP is built by developers for developers, and a lot of customers pick us because a person answers when something breaks at 3 am. A human voice felt more suitable for us.

## Watch it, then go make your own

The commercial is 40 seconds. Now that you know how it was made, watch it once more and see if you can spot the masks.

https://player.vimeo.com/video/1240818352?h=76710971e8

If you make a video like this on your own, please send it to us. We would love to see what breaks for you (and what doesn’t).

And if you got this far: have you considered using a message queue in your app to make it more scalable? Maybe you should. CloudAMQP hosts RabbitMQ and LavinMQ on every major cloud, with real human support. That is what the commercial is about.

[Industry-leading RabbitMQ and LavinMQ as a service. Start your managed cluster today, it's 100% free to try. Try CloudAMQP for free](https://customer.cloudamqp.com/signup?topic=get_started)