How to make animated videos with Claude (and why most of them don’t go viral)

You can ask Claude for an animated explainer and get something that moves within minutes. Making one that people actually watch to the end is a different problem. This guide covers both: how the video gets made, and why most of them stall at a few hundred views.

What Claude actually does

Claude doesn’t output video files. It writes code that draws the video: an HTML page animated with CSS and JavaScript, an SVG animation, a canvas, or a React component for a library like Remotion. Turning that code into an MP4 is a separate step:

1. the animation is written as a function of time, so any frame can be drawn on demand (“show me the scene at 3.2 seconds”);
2. a headless browser opens the page and captures it frame by frame, 30 frames per second, at 1080×1920;
3. a tool like ffmpeg assembles the frames and the audio into the final video.

That is how our own engine works too. Drawing frames this way keeps text perfectly sharp, which generated video still struggles with.

A workflow that works

1. Start from a format, not from a blank page

Before writing anything, pick a structure that already worked: a guess-the-number, a minute-by-minute, a line race. You’ll know where the hook goes, how many beats you need and how it ends. (See 10 viral video formats.)

2. Write the script to the beats

One idea per video. The first sentence carries the hook and appears on screen from the very first frame. Each beat is a sentence or two, and each beat is a scene.

3. Ask for a time-driven animation

Ask Claude for a page with a render(t) function that draws the frame at time t, rather than animations that run on their own. That makes the render deterministic: the same time always gives the same frame. A prompt along these lines works well:

Build a 1080×1920 HTML page that exposes window.render(t) (t in seconds)
and draws this scene deterministically, with no timers.
Scene 1 (0–2.5 s): the title "Clouds are heavier than you think",
on screen from frame 0, a cloud drops onto a giant scale.
Scene 2 (2.5–6 s): three answer chips appear one by one…
Keep every important element above y=1500 and left of x=910.

4. Add the voice and captions

Generate the voice-over, then get word-level timestamps for it (a speech-to-text model like Whisper gives you those). Captions can then pop word by word in sync, and each scene can start exactly on the word that introduces it.

5. Render and check

Render at 30 fps, then watch it on a phone. Check three things: something moves within the first half second, no frame stays still for more than about three seconds, and nothing important sits under the platform’s buttons and caption at the bottom and right of the screen.

Why most of these videos don’t go viral

The code is rarely the problem. These are:

• No proven structure. Starting from a blank page means guessing the hook, the rhythm and the ending every time.
• The hook comes too late. An introduction, a logo, a slow fade-in: the viewer is gone before the point.
• Too many ideas. A video that explains five things lands none of them.
• Static stretches. A beautiful frame that holds for four seconds reads as a pause.
• A generic look. The default style of every AI-made explainer is recognisable, and people scroll past it.

We learned the hook lesson on our own reel: our first version opened on a setup sentence and only reached the punchline after four seconds. We rebuilt it so the punchline is on screen from frame zero and spoken first.