To make animated ads with Claude Code, have it draw the ad in HTML instead of recording your screen. It uses your app’s own colors and mascot, animates every piece with GSAP, and renders the result to an MP4 with HyperFrames, an open source tool from HeyGen. Each of my ads runs about 20 seconds, comes out in up to 4 sizes, and I don’t have to get on camera.
Why I stopped waiting to get on camera
I’ll get on video. I just don’t love it, and it slows everything down. Every app I build needs promo videos, and when a video needs me in it, the video waits for me to be in the mood to film it. So the apps sat there with nothing to post.
My first workaround was app reels: Claude recorded the app working, and text went on top. They got made, but they looked like what they were, choppy screenshots with captions slapped over them.
Then in September I saw an animated ad on X someone made with Claude. It was smooth, sharp and moving, and it looked nothing like a screen recording. I asked Claude Code for one for my Side Hustle Garden app. It came back looking like a real ad, and I wanted one for everything.
What is an animated ad made with Claude Code?
It’s a short video where nothing is filmed or screen-recorded. Claude Code writes a web page holding the whole ad: the headlines, my app’s mascot and art, and a few cards rebuilt to look like the app’s real screens. Then it animates everything on the page and turns it into a video file, one frame at a time.
Because every frame is drawn instead of captured, the text stays crisp and the motion stays smooth. It’s the whole difference from my old reels, which were recordings of a screen and looked like it.
The three kinds of videos I post, side by side:
| Me on camera | App reel | Animated ad | |
|---|---|---|---|
| What’s in it | Me, talking | A recording of the app working | The app’s mascot and art, drawn and animated |
| Needs me | Yes | No | No |
| How it looks | Like me, for better or worse | Choppy, with text on top | Smooth and sharp |
| Voice | Mine | AI voiceover | AI voiceover |
| Feels like | A person | A demo | An ad |
The Side Hustle Garden ad, start to finish
Side Hustle Garden turns each bill into a plant. You log side hustle money, it goes to your smallest bill first, and the bill’s plant blooms once it’s covered for the month. The ad tells the story in 20 seconds, in five beats:
- The problem. “Side hustle money comes in. Then it disappears into the month.” An Etsy sale, a dog walking payment and a freelance gig pop up, and the garden shows 4 plants with none bloomed.
- What you do. “Plant your bills. Water them with side hustle income.” A rebuilt payment form logs a freelance gig.
- The payoff. “Smallest bill first, so a whole plant blooms.”
- The character moment. The app’s garden gnome pops up with a speech bubble: the car payment bloomed, and rent is next.
- The end card. The app name, the three-line pitch and the web address.
Every ad since has followed the same shape: a problem, what you do, what you get, a bit of personality and the ask. This is the wide version, the one on YouTube:
The gnome is the app’s own art, copied from the app’s files, so the ad looks like what people see after they sign up. It also turned up one funny snag. The gnome’s eyelids are drawn shut in the art, and a line in the app’s stylesheet is what opens them. Without the line, the gnome looked asleep in every frame of the ad.
What do you need to make an animated ad with Claude Code?
You need Claude Code, plus Node 22 or newer and FFmpeg installed on your computer. GSAP and HyperFrames are both free to use. Bring your app’s colors, its mascot or logo file if you have one, and five beats: the problem, what you do, what you get, a bit of personality and the ask.
How does Claude Code build the ad?
Claude Code does the building. My part is saying what the app is and what the ad should say. Under the hood, so you know what you’re asking for:
- One template file holds the ad. Every size-specific number (where the headline sits, how big the mascot is) lives in one place in the file. A small script stamps out a separate copy for each size, so a fix happens once.
- GSAP moves everything. It’s a JavaScript animation library, and it’s been free for commercial use since Webflow made it free in April 2025.
- HyperFrames turns the page into a video. It plays the animation and captures every frame at full resolution. It’s open source and needs Node 22 or newer and FFmpeg installed.
- Stills get checked before the render. Claude takes screenshots at 6 to 8 moments in the ad and looks for text running into things. On the first square version of my ad, the headline ran right into a card.
- Then the encode. The finished files get squeezed small enough to upload. My Side Hustle Garden upload files came out at 1.4 and 1.7 MB.
One rule makes the renders work: every animation has a fixed start and end point. The renderer jumps to frame 200, then frame 201, instead of playing the ad in real time, so anything depending on “what happened a moment ago” comes out wrong.
Which sizes do you need?
Each ad can come out in four sizes, and they don’t all go to the same place:
| Size | Where it goes |
|---|---|
| Tall, 9:16 (1080 x 1920) | TikTok, Instagram and Facebook Reels, X, Pinterest, YouTube Shorts |
| Wide, 16:9 (1920 x 1080) | A regular YouTube video |
| 4:5 (1080 x 1350) | Instagram or Facebook feed, posted by hand |
| Square, 1:1 (1080 x 1080) | Feeds, posted by hand |
The tall one does almost all the work for me, because my scheduler posts it everywhere. I only make the wide one for my paid apps. The ads for my free tools are short, and I’d rather save regular YouTube videos for longer ones. On the tall size, the text stays inside the middle of the frame. Meta’s Reels ad specs suggest leaving about the top 14%, the bottom 35% and 6% on each side free of text and logos, so the profile icon and buttons don’t cover them.
Where do the ads go after they’re made?
Every ad lands in the same review page as my other clips, and I approve it or toss it. Then it goes into my posting queue. My n8n social media scheduler weaves post types together, so a batch of ads doesn’t go out back to back like a bot wrote my feed. The ads get mixed in between blog posts and clips where I’m on camera.
Claude has made 19 of these so far. 15 of them came in one day, and 10 have posted. I turned one down. They don’t replace the videos with me in them. They mean the apps get promoted on the days I’m not filming, which is most days.
Get the generator
My setup is built into my own Claude Code skill, with my apps’ art and my posting pipeline baked in. Yours won’t look like mine. The generator asks about your product instead. It wants what the product does and who it’s for, your colors, and whether you have a mascot or logo to reuse. Then it asks for your five beats, the sizes, the length and whether you want a voiceover.
Then it writes a prompt you paste into Claude Code. The prompt carries the rules behind mine: fixed start and end points on every animation, the safe zone on the tall size and still checks before rendering. It also keeps every word to what you typed, so Claude doesn’t invent a feature you don’t have.
If you love how your ad turns out, tell Claude to make it a skill. The generator gets you one ad. A skill remembers everything you and Claude figured out along the way, your colors, your mascot, the fixes, so the next ad is one command. It’s how I got from one ad to 19. If skills are new to you, I wrote up what a Claude Code skill is and how to make one.
What it doesn’t do
It doesn’t put a person in the ad. The voice is obviously AI, and the ads are obviously promos. People like seeing the human behind a thing, and these can’t give you one. I use them alongside my own videos, never instead of them.
It doesn’t make the ad sound like you. Every line comes from what you tell it. If your beats are bland, the ad is bland, just smoother.
It doesn’t skip the setup. You need Claude Code, Node and FFmpeg installed. Plan on fixing something after the still check, too. My first one needed it.
It doesn’t label itself. If you post to TikTok, its community guidelines require a label on realistic AI-generated content. Whether your voiceover needs one is your call, and so is the label.
Frequently asked questions
Can Claude Code make videos?
Yes, by writing the video as a web page. Claude Code builds the animation in HTML, then a rendering tool like HyperFrames captures it frame by frame and saves it as an MP4. Nothing gets filmed.
What is HyperFrames?
HyperFrames is an open source tool from HeyGen that turns an HTML page into a video. It works with animation libraries like GSAP, renders every frame, and needs Node 22 or newer and FFmpeg. Its license is Apache 2.0.
Is GSAP free to use for ads?
Yes. GSAP has been free for everyone, including commercial use, since Webflow announced it in April 2025. Its license does rule out building a no-code animation tool that competes with Webflow, which an ad for your own product isn’t.
How long should an animated app ad be?
Mine run about 20 seconds, enough for five beats: the problem, what you do, the payoff, a character moment and the end card. The generator lets you pick 15, 20 or 30 seconds.
Do I need to know how to code?
No. Claude Code writes and runs the code. You describe the product, check the stills it shows you and say what to fix. Installing Node and FFmpeg is the most technical part.
Can I reuse my app’s mascot in the ad?
Yes, and it’s the best part. Point Claude at the mascot’s file in your project and it builds the ad around it. Without a mascot file, have it use simple shapes in your brand colors instead of inventing a character.
Try it yourself
Animated ads with Claude Code skip the camera and the screen recorder entirely. Claude draws the ad in HTML with your own art, animates it with GSAP and renders it with HyperFrames. Use the generator to write your first prompt, and when the ad looks right, turn it into a skill so the next one takes a single command.
A tool I built
Side Hustle Garden
Log every side hustle payment and watch it knock out your monthly bills, smallest first.
Plant your first dollar →I run an affiliate program on the tools I build. Approved affiliates earn 20% on what their referrals pay, for up to a year. US only for now. See the program →
Related reading
- n8n Social Media Scheduler: No More Back-to-Back Promos
- How I Turn a YouTube Video Into Shorts Without Editing
- What a Claude Code Skill Is, and How to Make One
- Easy to Build, Hard to Ship: My Web App Launch Checklist
Subscribe if you haven’t yet, and go give your app a 20-second ad it doesn’t need you on camera for.
