We needed an animated explainer video for our Shopify App Store listing. The quotes we got ranged from $3,000 to $8,000 for a 60-second motion graphics piece with a 3-4 week turnaround.
Instead, we built the entire thing in an afternoon using Claude Code, screen recorded it from a browser, added AI voiceover with Resemble.ai, and published it the same day. Total production cost: $0 in external tooling.
Here's the final video:
Here's exactly how we did it, step by step, so you can do the same thing.
The idea: HTML animations are video frames
The core insight is simple. Modern CSS and JavaScript can produce the same flat 2D animations you'd build in After Effects. Fade-ins, drawing lines, shaking elements, cross-fades, staggered reveals - these are all CSS keyframes.
If you can build an animation that plays in a browser, you can screen record it. And if you can screen record it, you have a video.
The advantage over traditional motion graphics: your web project already has all your brand assets. Logos, colors, fonts, icons - they're all sitting in your repo. No exporting assets to a designer, no brand guide handoffs, no "can you make the green a bit more teal" back-and-forth.
One clarification on "we": this was one person and Claude. No design team, no video team, no freelancers. Every step below was either done by Claude directly or by me following Claude's output. The whole project - from first prompt to published video - was a conversation.
Step 1: Tell Claude what story you want to tell
I didn't write the script from scratch. I described the story I wanted to tell: "ecommerce stores struggle with measurement because the foundational data is wrong - Google Analytics counts sessions not people, and ad platforms double-count every sale. Show why it's broken, then show how Attribution fixes it."
Claude came back with an 8-slide structure with timing, visual descriptions, and voiceover copy for each slide. We iterated on it in conversation - tightening the narrative, adjusting timing, cutting a slide that didn't earn its seconds.
Then we designed each slide individually. Claude would describe the visual layout and animation sequence, I'd push back ("the orbit is invisible at 6 seconds, drop it" or "labels should point outward from center, not all below"), and we'd refine until each slide was fully specified. Claude even built preview animations inline in the chat so I could see the concepts before any code was written.
The final script had three columns per slide:
- What appears on screen (visual description)
- Animation sequence with exact timing (what happens at 0.0s, 0.5s, 1.0s)
- Voiceover text
Our video was 9 slides, about 57 seconds total. Each slide had a specific duration and a specific story beat. The narrative arc was: your data is broken (slides 1-5), here's the fix (slides 6-7), end card (slides 8-9).
The script is the most important part. The animations are just illustrations of the story. If the story doesn't work on paper, no amount of animation polish will save it. Spend your time here - push back on Claude's first draft, rearrange slides, rewrite the VO until it sounds like something a human would actually say.
Step 2: Hand the specs to Claude Code
Once every slide was designed and iterated in conversation, I gave the full spec to Claude Code (Anthropic's command-line coding tool) to build. By this point, each slide had exact animation timing, specific asset paths, color values, and layout details. CC wasn't designing - it was implementing a spec that had already been through multiple rounds of revision. The prompt included:
- The visual description and animation timing for each slide
- Real file paths to our brand logos and integration icons
- The color palette (our brand teal, red for "broken" elements, gray for neutral)
- A request for a minimal layout file with no site nav or footer
CC produced all 9 slides as Astro pages, plus a "full sequence" page that plays them back-to-back with cross-fade transitions.
The animations are pure CSS @keyframes and vanilla JS setTimeout chains. No animation libraries. No dependencies. Just the web platform.
Step 3: The scaling trick
Here's where we hit our first real problem. The animations were authored at web scale - sized for reading in a browser. But video needs everything bigger. At 1920x1080, web-sized elements look tiny.
Our first instinct was to go through every slide and manually increase font sizes, icon sizes, and spacing. That broke the proportions immediately. Every relationship between elements fell apart.
The fix was embarrassingly simple: one CSS transform on the container.
We added transform: scale(1.5) to a wrapper div in the layout file. Everything got 50% bigger uniformly. Proportions stayed perfect because it's a single transform, not individual element changes. Zero slide files were modified.
For slides with dense content (our dashboard table), we added a per-slide override: transform: scale(0.85) on that slide's wrapper to bring it back down slightly. One number per slide. That's it.
Step 4: The launcher
Screen recording a browser window at the right dimensions is annoying. You have to resize the window, guess at the pixel dimensions, and hope you got it right.
We built a launcher page - a single button that opens the video sequence in a new window at exactly 1280x720:
window.open('/video/full', '_blank',
'width=1280,height=720,menubar=no,toolbar=no,location=no,status=no')One click, perfect dimensions every time.
Step 5: The spacebar trigger
Another small but important detail: you need to start screen recording before the animations play. If the animations start on page load, you're scrambling to hit record while the first slide is already running.
We added a spacebar listener. On page load, the screen is blank white. All CSS animations are set to animation-play-state: paused. Pressing spacebar adds a class that switches everything to running and fires the JS timing chains.
The workflow becomes: open the launcher, click the button, start recording, press spacebar. Clean start every time.
Step 6: Voiceover with Resemble.ai
We wrote the voiceover text for each slide as part of the script (step 1), so the VO copy was ready before we started building. Each slide's narration was timed to match its animation duration.
We used Resemble.ai to generate the voiceover. You paste in the text, pick a voice, adjust the pacing, and export the audio. The whole VO track took about 20 minutes to produce and iterate on.
Here's a step most guides skip: the VO clips came back at different lengths than we'd estimated in the script. Slide 3's narration ran 9.2 seconds instead of the 8 we'd planned. Slide 5 was done in 6 seconds instead of 8. So we went back to Claude Code with the actual audio duration for each slide and had it update the animation timing to match. This took about five minutes and meant the animations and voiceover landed in sync on the first assembly pass instead of requiring tedious trimming in the editor.
Record your VO first, measure each clip, then adjust the slide durations. Not the other way around.
For anyone comparing AI voice tools: Resemble.ai gave us the most natural-sounding output with the best control over pacing and emphasis. The voice doesn't sound like a robot reading a script - it sounds like someone explaining something they understand.
Step 7: Assembly and music
We brought the screen recording and VO audio into iMovie. Laid the VO track over the video, trimmed a few slide holds to match the pacing, and exported. iMovie is free on every Mac and was more than enough for this - we didn't need DaVinci Resolve or Premiere.
We skipped background music because we wanted to ship. The video works fine without it - the VO carries the narrative and the animations fill the visual space. But if you want that polished underscore, grab a track from YouTube Audio Library (free, no attribution needed), Epidemic Sound ($15/month), or Artlist ($10-17/month). Search for "minimal ambient technology" or "soft corporate." You want something with no drums, no melody, no lyrics - just a subtle bed that makes the silence between sentences feel intentional. Drop it into iMovie as a second audio track, pull the volume down to about 15-20% so it sits under the VO without competing, and you're done.
Final compression with ffmpeg:
ffmpeg -i input.mov -c:v libx264 -crf 23 -preset medium -c:a aac -b:a 128k output.mp4Took the file from 240MB down to about 15MB.
What we learned
Record voiceover before finalizing animation timing. Your script says "8 seconds" but the actual VO clip might be 6.5 or 9.2. Generate the VO first, measure each clip's duration, then have Claude Code update the slide timings to match the audio. This gets you sync on the first assembly pass instead of fighting it in the editor.
Use SVGs for everything. This matters more than you'd think. The global scale wrapper means every image gets scaled up 1.5x. PNGs and JPGs get blurry. SVGs stay crisp at any scale because they're vector, not raster. All our integration logos (Meta, Google, TikTok, Klaviyo) were already SVGs in our project. The one PNG we used looked noticeably soft in the recording. If your brand assets are only available as PNGs, convert them to SVG first or source SVG versions. This is the difference between the video looking polished and looking like a screen recording of a website.
The script matters more than the animation. We spent more time on the 8-slide narrative arc than on any individual animation. A mediocre animation of a great story beats a beautiful animation of a boring one.
One global scale beats individual resizing. Every time we tried to resize elements individually, proportions broke. The transform: scale(1.5) wrapper was the single best decision in the whole process.
Static beats animated when time is short. Our first version had tools orbiting around a center icon. At 6 seconds per slide, a 60-second orbit was invisible - it just looked static with extra complexity. We dropped the orbit and used static positions with drawn-in connecting lines. Simpler, cleaner, and deterministic for transitions between slides.
White letterbox, not dark. When the viewport aspect ratio doesn't match 16:9, letterbox bars appear. We initially used a dark background (#1a1a1a) which showed up in the recording. White (#fff) blends with the slide backgrounds and disappears.
Test the full sequence, not just individual slides. Individual slides looked great. The transitions between them needed work - timing adjustments, cross-fade durations, making sure the visual rhythm felt right across the full 57 seconds.
The tools
- Claude: Script writing, slide design, iteration, voiceover copy
- Claude Code: Built all 9 animated slide pages, the layout, the launcher, and the full sequence page
- Resemble.ai: AI voiceover generation
- Astro: Our existing web framework (this works with any framework - Next.js, plain HTML, whatever you use)
- QuickTime (or OBS): Screen recording
- iMovie: Video assembly (free on Mac)
- ffmpeg: Video compression
Try it yourself
Here are the actual prompts to get started. Copy them.
Prompt 1: Give this to Claude to design your video
I need a 30-60 second animated explainer video for [my product/app store listing/landing page].
The story I want to tell: [describe in 2-3 sentences what problem you solve and why it matters]
My brand colors are: [primary color, secondary color, accent color]
Give me a slide-by-slide script with:
- What appears on screen for each slide (visual description)
- Exact animation timing (what happens at 0.0s, 0.5s, 1.0s, etc.)
- Voiceover text for each slide
- Duration for each slide
Keep the total video under 60 seconds. Use flat 2D animation style - clean shapes, text reveals, icon animations. No 3D, no particle effects.
After the script, design each slide individually. For each one, describe the exact layout, colors, element sizes, and animation sequence so a developer could implement it without guessing.Iterate on Claude's output until every slide is locked. Push back on anything that doesn't feel right. Ask Claude to build inline preview animations so you can see concepts before committing.
Prompt 2: Give this to Claude Code to build the slides
Build animated video slides for screen recording. Here's the spec:
[Paste your final slide-by-slide spec from Claude here]
Technical requirements:
- Create src/layouts/VideoLayout.astro - minimal layout, white background, no site nav/footer, noindex meta tag
- Create src/pages/video/slide-1.astro through slide-[N].astro, each using VideoLayout
- Create src/pages/video/full.astro that plays all slides sequentially with cross-fade transitions
- Create src/pages/video/index.astro with a button that opens /video/full in a popup: window.open('/video/full', '_blank', 'width=1280,height=720,menubar=no,toolbar=no,location=no,status=no')
- All animations use CSS @keyframes and JS setTimeout. No animation libraries.
- All animations start paused on page load. Spacebar keydown adds class "playing" to body, switches animation-play-state to running, and fires JS timing chains. No visible UI before spacebar is pressed - just blank white.
- Wrap the slot content in a scale wrapper: transform: scale(1.5) with transform-origin: center center. This makes web-scale elements large enough for video.
- Use real brand logos from the project assets as SVG wherever possible (PNGs get blurry when scaled)
My brand assets are at:
- Logos: [your logo directory paths]
- Icons: [your icon directory paths]
- Brand colors: [hex values]After the build
- Generate your voiceover with Resemble.ai or record yourself
- Measure each VO clip's duration
- Tell Claude Code: "Update slide timings: slide 1 = 5.8s, slide 2 = 7.1s, slide 3 = ..." (use your actual VO durations)
- Screen record: open the launcher page, click the button, start recording, press spacebar
- Assemble in iMovie with the VO track, optionally add music
- Compress:
ffmpeg -i input.mov -c:v libx264 -crf 23 -preset medium -c:a aac -b:a 128k output.mp4
The constraint is visual complexity. This works well for flat 2D explainer videos - the kind you see from Stripe, Linear, or Notion. Clean shapes, text reveals, data visualizations, icon animations. It doesn't work for 3D, particle effects, character animation, or anything that needs frame-by-frame illustration.
For an app store listing video, a product explainer, or an investor deck animation, this is more than enough. And the iteration speed is unbeatable - change a timing value, refresh the page, see the result instantly. No render queue. No export pipeline. No waiting.
The video we made with this workflow is live on our Shopify App Store listing. If you make something with these prompts, we'd love to see it - tag us on LinkedIn.
A note on timing: this was written in April 2026. By the time you read this, you'll probably be able to describe a video in a sentence and have AI generate the whole thing - animations, voiceover, music, and all. But right now, that doesn't exist yet. This workflow is a nifty hack for the gap between "AI can write code" and "AI can produce video." It works today, it's free, and the results are genuinely good. Use it while you can still impress people with it.
