AI CSS Animations

Blog · · Maxwell Prehoda

How to Make Motion Graphics With Claude, Start to Finish

You can make real motion graphics with Claude now: launch videos, explainers, logo reveals, kinetic type. No After Effects, no templates. The output is code, which means you can edit it, re-render it and reuse it. Here's the whole process, start to finish, without the hype.

1. Use Claude Code, not just the chat

The chat app can write an animation and preview it. To get a video file, you need something that can run code on your machine: write files, open a browser, render frames, look at them and fix what's wrong. That's Claude Code, and it's what the creators in our Motion Prompts directory mention most when they say how they worked.

Install it, make an empty folder, put your assets in it, and start a session:

npm install -g @anthropic-ai/claude-code
mkdir launch-video && cd launch-video
cp ~/Desktop/logo.svg ~/Desktop/screens/*.png .
claude

Assets matter more than people think. A real logo file and real screenshots beat any amount of description. If your logo is only a PNG, ask Claude to trace it to SVG first so it stays sharp and can be animated.

2. Pick a stack before you prompt

Most people skip this and let the model choose. That's fine for a one-off, but you'll want to know what you're getting. Of the entries in the directory whose creators said what they used, these come up most:

  • One HTML file (HTML, CSS, JavaScript, SVG, Canvas). The fastest to iterate on: open it in a browser and it plays. You need a capture step to turn it into an MP4. Good for UI motion, kinetic type and anything 2D.
  • Remotion. A React framework built for video. You write components, it renders an MP4 itself, and it has a studio for scrubbing the timeline. The best choice if you'll make more than one video or want to edit by hand later. Check its license: it's free for individuals and small teams, and larger companies need a paid one.
  • three.js. For 3D. One creator got a 2.5-minute 3D tour of an AI data centre out of a one-line prompt, as a single HTML file with no 3D assets. Heavier to render and harder to art-direct.
  • HyperFrames. HeyGen's open-source HTML-to-video framework. A handful of creators in the directory used it.

If you're not sure, pick one HTML file. It's the easiest to fix and the easiest to throw away.

3. Write a prompt that makes decisions

The median prompt in our collection is 26 words, and most of them are some version of "make an impressive motion graphics video." That gets you a nice reel of the model's favorite tricks. To get your video, decide the length, the platform, the story, the style and what to avoid. Here's a first prompt for a simple app launch:

Make a 20-second motion graphics video introducing this app, for X at 16:9.

The logo is logo.svg. The screenshots are 01-inbox.png, 02-compose.png and 03-send.png, in the order they should appear.
Story: the problem in one line -> the app opens -> the three screens, each with one short caption -> logo, tagline and URL.

Style: calm, editorial, lots of white space. Inter for all text. Black, white and our blue (#2F6BFF).
Avoid: particles, glows, lens flares, 3D camera spins.

Build: one HTML file, 1920x1080, 60fps, every frame computed from a seek(t) function.
When it's built, render a frame from each scene, check them, fix anything cramped or overlapping, then tell me how to preview it.

The last line is the one most people leave out. Claude Code can screenshot its own frames and look at them, so tell it to. It catches overlapping text and clipped captions before you ever see them. We go deeper on prompt structure in what 217 real prompts get right and wrong.

4. Watch it, then give notes like an editor

The first cut gets you most of the way. The rest is notes, and vague notes get vague fixes. "Make it more dynamic" makes everything faster and busier. Give timestamps and specific changes instead:

0:03 - the headline comes in before "Too much email" has left. Let the first line finish leaving first.
0:07-0:12 - the compose screen is on for a second and a half. Hold it for three.
0:15 - the logo bounces twice. One small overshoot, then still.
Everything: slow every entrance down by about 20%.

Three to five notes per round is the sweet spot. More than that and fixes start breaking other things. If a version is clearly worse, say so and ask it to go back. It's code, so nothing is lost.

5. Export it

With Remotion, rendering is built in:

npx create-video@latest
npx remotion studio
npx remotion render src/index.ts MyVideo out/video.mp4

With a plain HTML file, don't screen-record it. Recording drops frames and the timing drifts. Render it frame by frame with a headless browser and stitch the frames with ffmpeg. That's why the prompt above asks for a seek(t) function: if every frame is computed from time, a script can step through it exactly. The full setup, with code, is in editing and exporting AI motion to MP4.

What it costs

Less than you'd expect, more than a chat message. Two data points from creators in the directory: a 2.5-minute 3D film on high effort took about 35 minutes and roughly 7% of the creator's usage. A max-effort showreel with Blender and scripted audio came to about $81 at API prices. A 20-second 2D launch video should cost far less than either.

Where it goes wrong

  • Text overlaps. New lines enter before old ones leave. Ask for every element to have its own exit.
  • Too fast to read. Models pace for impressiveness, not reading. Ask for longer holds.
  • Everything moves at once. Ask for one focal element at a time, with the rest still.
  • Generic decoration. Particles and glows fill empty space. Ban them by name.
  • Fonts that don't load in the render. Ask for fonts to be embedded or loaded locally.
  • Audio out of sync. Have it build the timeline from the music's beat grid, not the other way round.

None of these are hard to fix. They're just the things the model won't do unless you ask. Start with a proven prompt from the directory, swap in your subject, and give it your real assets. That's most of the job.

AI CSS Animations