How to Make Animated Videos with AI and Code (2026)

You can make a one-minute animated video without filming anything and without a video-generation model, and this guide shows how to make animated videos with AI and code. Claude writes the script and the storyboard, then writes the animation as code in Remotion or Three.js, and a renderer exports a vertical MP4. It takes a few hours the first time, and the second video reuses most of the work.

How to make animated videos: three routes

There are three ways to get an animated video today. Each one trades control against effort, so pick the route before you write a single prompt.

Route 1: Template tools

Browser-based editors with ready-made scenes, characters and music are the quickest start. You drag, drop and edit text. They are a good fit for a first explainer or a social post. The limits are that every video starts from someone else's template, a repeatable look across many episodes takes manual work, and your files live inside the tool.

Route 2: AI animation video from a generation model

A video-generation model turns a text prompt into a clip. It can produce scenes that are hard to draw, but each clip is generated fresh, so characters, text and small details can change from one clip to the next, and you cannot fix one word without regenerating. It also uses paid generation credits on most services. For a faceless series that must look identical every episode, that unpredictability is the main problem.

Route 3: Write code that renders the animation

In the third route, the animation is a program. Claude writes the script and storyboard, Claude Code writes the shots as components, and a renderer draws every frame from the frame number. Text never warps, characters never drift, and a change is a text edit. This is the route the rest of this guide follows, because a code project is something you own and can reuse for every episode.

Claude Motion or code: which one do you need?

Claude Motion is Anthropic's built-in feature for animation. Everything below comes from Anthropic's own help page, Get started with Claude Motion, and I add nothing beyond it:

• It builds each animation as code that animates text, charts, shapes and images. It does not use a video generation model, so it cannot create realistic footage or people.
• It is available in beta on Team and Enterprise plans. It is on by default for Team plans, and off by default for Enterprise plans until an owner turns it on in Organization settings.
• You export the result as MP4.
• It counts toward your plan's usage limits, and longer or more complex animations use more of that limit than a typical message.

Anthropic's page does not state a maximum animation length or specific usage numbers, so check it for current details. If you are on a Team or Enterprise plan and want an animation from a chat, Claude Motion is the direct path. If you want a project that you own, run on your own computer and reuse for a series, ask Claude (or Claude Code) to write ordinary Remotion or Three.js code instead. That second option is what the rest of this guide covers.

The full workflow at a glance

If you are wondering how to make animation that you can repeat every week, the loop is short:

1. Write a style file once (character, colors, camera).
2. Ask Claude for a 60-second script as a scene table.
3. Ask Claude Code to turn the table into shot components, a few at a time.
4. Generate voiceover per shot and set the shot lengths from the audio.
5. Render the MP4, check it, and upload.

The sections below follow those steps.

Script and storyboard prompt for a 60-second short

Good code starts with a good scene table. Ask Claude for the table first, read it, fix it, and only then ask for code. Paste this prompt and fill in the brackets:

You are a short-form video writer. Write a 60-second vertical (9:16) animated short.

Topic: [one-sentence idea]
Audience: [who watches, and what they already know]
Tone: [for example curious, funny, calm]
Style file: [paste your style file here]

Rules:
- Total narration is about 150 words, so it fits 60 seconds when read aloud.
- Open with a question or a surprising claim in the first 3 seconds.
- 10 to 14 shots. No shot longer than 7 seconds.
- Every visual must be something that can be drawn with shapes, text, simple characters and camera moves. No photos, no real people, no logos.
- Do not invent statistics, quotes or sources. If a fact is uncertain, say "scientists think".

Output only a table with these columns:
shot | duration | visual | narration
Durations are in seconds and must add up to 60.

Claude returns a table such as 1 | 3s | Black screen, a glowing circle appears | What if the Moon vanished tonight? and so on. Check three things before you move on: the durations add up to 60, the narration is short enough to say in the time, and every visual is actually drawable.

Story animation: write for what you can draw

The biggest mistake in story animation is writing a script for footage you cannot make. A line like "a crowded city street at rush hour" is easy for stock video and hard for code. Rewrite it as something the engine can do: "five small figures walk across the screen, one stops". Keep one idea per shot, keep text on screen to a few words, and let the camera move (zoom, pan, slide) carry the energy. The tighter the visuals, the better the code Claude writes.

Build it with code: Claude + Remotion or Three.js

Claude Code animation works best in small steps. Once the table is right, give it to Claude Code (or to Claude chat if you prefer to paste files yourself) and ask for one thing at a time. A reliable order is: first the project skeleton at 1080 by 1920, then one shot, then the rest of the shots in groups of three or four. Ask Claude Code to run the render after each step and to fix any error it sees. Reviewing a three-second render is much faster than reading code.

A prompt that works well:

Here is the scene table and the style file. Create a Remotion project for a 1080x1920, 30 fps short. Build shots 1 to 3 as separate components, driven only by the current frame number. Use the palette and character rules from the style file. Then run the render for those frames and tell me if anything fails.

Because the animation is code, a change is cheap. If the second shot needs to be 1.5 seconds longer, you change one number rather than re-generating a clip.

Code animation versus video AI

Code animation (animation written as code and rendered frame by frame) behaves differently from video AI, and it is worth knowing the trade. Code gives you exact timing, perfectly consistent characters and text that never warps, and every change is a text edit. It cannot give you realistic footage, and complex character motion takes real effort. If your format is explainers, stick figures, charts, maps, story cards or simple cartoons, code is a strong fit. If you need realistic scenes, it is not.

Remotion video: a minimal vertical example

Remotion lets you write a video as React components. A composition declares the size, frame rate and length, and each frame is a pure function of the frame number. The example below uses 1080 by 1920 pixels, 30 frames per second and two 3-second shots. It was rendered and checked before publishing with Remotion 4.0.540.

Create a project folder, then install the packages:

npm init -y
npm i remotion @remotion/cli @remotion/media react react-dom

src/index.ts:

import {registerRoot} from 'remotion';
import {Root} from './Root';

registerRoot(Root);

src/Root.tsx:

import {Composition} from 'remotion';
import {Short} from './Short';

export const Root = () => (
  <Composition
    id="Short"
    component={Short}
    width={1080}
    height={1920}
    fps={30}
    durationInFrames={30 * 6} // two 3-second shots; use 30 * 60 for a full minute
  />
);

src/Short.tsx:

import {AbsoluteFill, Sequence, interpolate, useCurrentFrame} from 'remotion';

const shots = [
  {text: 'What if the Moon vanished?', seconds: 3},
  {text: 'Tides would nearly disappear.', seconds: 3},
];

const Shot = ({text}: {text: string}) => {
  const frame = useCurrentFrame(); // restarts at 0 inside each <Sequence>
  const opacity = interpolate(frame, [0, 15], [0, 1], {extrapolateRight: 'clamp'});
  const y = interpolate(frame, [0, 15], [60, 0], {extrapolateRight: 'clamp'});
  return (
    <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center', background: '#0b1020'}}>
      <h1 style={{color: '#fff', fontSize: 96, fontFamily: 'sans-serif', textAlign: 'center', padding: 80, opacity, transform: `translateY(${y}px)`}}>
        {text}
      </h1>
    </AbsoluteFill>
  );
};

export const Short = () => {
  let start = 0;
  return (
    <AbsoluteFill>
      {shots.map((shot) => {
        const from = start;
        start += shot.seconds * 30;
        return (
          <Sequence key={shot.text} from={from} durationInFrames={shot.seconds * 30}>
            <Shot text={shot.text} />
          </Sequence>
        );
      })}
    </AbsoluteFill>
  );
};

Preview it with npx remotion studio src/index.ts, and export the MP4 with:

npx remotion render src/index.ts Short out/short.mp4

Remotion encodes H.264 by default, which is what you want for uploads to YouTube Shorts, TikTok and Instagram Reels. In our test this produced a 1080 by 1920, 30 fps MP4 with 180 frames. Add more objects to the shots array to fill the minute, and change durationInFrames to match.

Code animation in Three.js: a minimal vertical example

Three.js suits 3D scenes: a spinning object, a camera flying through a simple world, a planet. It runs in the browser, so the export step is different. The example below draws into a 1080 by 1920 canvas at 30 fps, records the canvas with the browser's MediaRecorder, downloads a WebM file, and you convert that to MP4 with ffmpeg. It was run in Chromium with three 0.187.0 and Vite before publishing.

npm init -y
npm i three vite

index.html:

<!doctype html>
<html><body style="margin:0;background:#000">
<canvas id="c" width="1080" height="1920" style="height:100vh;aspect-ratio:9/16"></canvas>
<script type="module" src="/main.js"></script>
</body></html>

main.js:

import * as THREE from 'three';

const W = 1080, H = 1920, FPS = 30;
const SECONDS = Number(new URLSearchParams(location.search).get('s') ?? 60);
const canvas = document.getElementById('c');
const renderer = new THREE.WebGLRenderer({canvas, antialias: true, preserveDrawingBuffer: true});
renderer.setSize(W, H, false);

const scene = new THREE.Scene();
scene.background = new THREE.Color('#0b1020');
const camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 100);
camera.position.z = 6;
scene.add(new THREE.DirectionalLight('#ffffff', 3).translateZ(5));
scene.add(new THREE.AmbientLight('#ffffff', 0.6));
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(2, 2, 2),
  new THREE.MeshStandardMaterial({color: '#4f8cff'})
);
scene.add(cube);

// A pure function of time, so every export looks the same.
function drawFrame(t) {
  cube.rotation.set(t * 0.8, t * 1.2, 0);
  cube.position.y = Math.sin(t * 2) * 0.5;
  renderer.render(scene, camera);
}

// Record the canvas in real time. Chrome records WebM; ffmpeg converts it.
const stream = canvas.captureStream(FPS);
const recorder = new MediaRecorder(stream, {mimeType: 'video/webm;codecs=vp9', videoBitsPerSecond: 8_000_000});
const chunks = [];
recorder.ondataavailable = (e) => chunks.push(e.data);
recorder.onstop = () => {
  const a = document.createElement('a');
  a.href = URL.createObjectURL(new Blob(chunks, {type: 'video/webm'}));
  a.download = 'short.webm';
  a.click();
};

const start = performance.now();
recorder.start();
(function tick() {
  const t = (performance.now() - start) / 1000;
  drawFrame(Math.min(t, SECONDS));
  if (t >= SECONDS) return recorder.stop();
  requestAnimationFrame(tick);
})();

Run npx vite, open the page (add ?s=5 to the address for a 5-second test, the default is 60), wait for the download, then export:

ffmpeg -i short.webm -c:v libx264 -pix_fmt yuv420p -r 30 short.mp4

One honest limit: this records in real time, so a slow computer can drop frames. In our software-rendered test, a 4-second capture came out slightly shorter than 4 seconds. If you need frame-exact output, Remotion is the safer renderer; if you want a 3D look, use Three.js for the scene and check the exported length.

How to make animated videos for free

Can this workflow cost nothing? Partly. Remotion, Three.js, Vite and ffmpeg are tools you install yourself, and rendering happens on your own computer, so there is no per-video render fee. But "free" has conditions you need to check: Claude itself needs a plan or API access that fits your usage, Remotion has license terms that depend on who you are and how you use it, and voice and font tools have their own terms. Read each license before you publish a monetized video. The cost you cannot avoid is time: the first project takes the longest, and a saved style file and shot library make every later video faster.

How to make a cartoon video: lock the style and character

A single short is a demo. A series needs every episode to look like the same show. The way to get that with Claude is a reusable style file that you paste into every prompt. Claude then only has to swap the script. Keep it short and concrete:

STYLE FILE v1
Character: "Pip", a white stick figure, round head, 8 px black outline, two dot eyes, no mouth. Never changes size or outline.
Palette: background #0b1020, text #ffffff, accent #4f8cff, warning #ff5c5c. Use no other colors.
Typography: one bold sans-serif font, 96 px for headlines, never more than 8 words on screen.
Camera rules: 1080x1920. Slow zoom in on every shot (about 5 percent). Cut, never fade, between shots. Keep the character in the lower third.
Motion: ease-out for entrances, 0.5 seconds. No bouncing.
Never: photos, logos, real people, drop shadows, more than three objects at once.

Keep the cartoon consistent across episodes

Anyone can make one good-looking cartoon. The hard part is the second and the tenth. Treat the style file like source code: version it (v1, v2), keep it in the same folder as the project, and change it on purpose rather than by accident. When you start a new episode, paste the style file, paste the new script, and ask Claude Code to reuse the existing components rather than write new ones. Over time you build a small library of shots (title card, character walking, data bar) that every episode reuses.

Add AI voiceover, align the timing and export

Voiceover is where a silent animation becomes a short people can watch. The simplest workflow that stays accurate:

1. Generate one audio file per shot from the narration column, using any text-to-speech tool you have the right to use commercially. Check the terms of the voice service for monetized channels.
2. Measure each file's length (for example with ffprobe -v error -show_entries format=duration -of csv=p=0 shot1.mp3).
3. Set each shot's duration to its audio length plus a short pause, instead of the other way around. Narration that is cut off is far worse than a half-second of extra picture.
4. Put the audio in the same shot component, so sound and picture always move together.

In Remotion, put the files in a public/ folder and add an Audio component from @remotion/media inside each shot, using staticFile to point at it:

import {Audio} from '@remotion/media';
import {staticFile} from 'remotion';

// inside the Shot component, next to the headline
<Audio src={staticFile('shot1.mp3')} />

We rendered this with two test tones and the output MP4 contained one H.264 video stream and one AAC audio stream, six seconds long. Remotion's render command exports the sound with the picture, so there is no separate mixing step. If you used Three.js, add the voiceover afterwards in ffmpeg, for example ffmpeg -i short.mp4 -i voice.mp3 -c:v copy -c:a aac -shortest final.mp4.

For export, check the basics before you upload: 1080 by 1920, H.264 video, AAC audio, under the length limit of the platform, and the important text kept away from the very top and bottom edges where app buttons sit.

How to make animated video for YouTube

For YouTube Shorts, use the vertical settings in this guide: 1080 by 1920, 30 fps, H.264 video and AAC audio. Check YouTube's current Shorts length limit before you plan a script, because limits change. Keep your key text away from the top and bottom edges, write a title that states the idea, and upload the finished MP4 as it is. For a regular horizontal YouTube video, change the composition to 1920 by 1080 and rewrite the layout; nothing else in the workflow changes.

Two complete 60-second example scripts

Use these as test inputs for your first project. The first is a science idea, the second is fiction. Both are written to total 60 seconds and about 150 words.

Example 1: What if the Moon vanished?

Fact check before you publish: this script keeps claims general on purpose. If you add numbers, take them from a reliable source and cite it.

Example 2: The meeting that could have been an email (fiction)

This is an invented story for the format, not a real event. If you adapt a real story, change names and details so no one can be identified.

Common pitfalls

Long outputs get truncated. If you ask Claude for a whole 60-second project in one reply, the answer can be cut off mid-file, and a missing closing bracket wastes an hour. Ask for the project in pieces: skeleton first, then shots in groups, one file at a time. In Claude Code, let it write files directly and run the build, so errors show up immediately.

Remotion render time. Every frame is rendered by a headless browser, so a 60-second video at 30 fps is 1,800 frames. Heavy scenes take longer than simple text and shapes. Render a few seconds first (for example with the --frames=0-89 option, which renders the first three seconds), time it, and extrapolate. Keep images small, avoid expensive effects on every frame, and reuse components.

Font licensing. A font that looks free is not always licensed for commercial video. Use fonts whose license explicitly allows commercial use and embedding, keep the license text in your project folder, and record where each font came from. Fonts are also part of your style file, so fixing the font once protects every episode.

Hallucinated facts. A smooth script is not a true script. For science, history or news topics, verify every claim against a reliable source before you voice it, and keep a list of sources next to the project.

Inconsistent characters. If episodes drift, the style file is too vague. Add exact colors, sizes and outline widths, and ask Claude to reuse existing components.

Where to go next

Once you can render one animated video, the question becomes which format to build a channel around. These live pages show how each format works:

• Start with stick figure animation, which fits the Pip-style character in this guide.
• History videos suit map, timeline and illustrated story shots.
• Mystery cartoon stories fit short serial scripts in a fixed look.
• Scary stories work well with a dark palette and simple scenes.
• Reddit stories are close to the workplace story above, told as text and narration.

To see which faceless channels are breaking out right now, open Faceless Radar, and browse every format on the niches page. Back to the Academy for more guides.