AI & IT ยท AI News ยท

Create AI Videos with Claude: Animation Base Setup to MP4 Export

You can use Claude and Animation Base to plan short, hand-drawn-style animations and render them as MP4 files. Animation Base is not a one-click text-to-video website: it is an open-source starter project designed to work with coding agents such as Claude Code. Here is how to set it up, create a scene, and export a video.

๐Ÿ“Œ Key takeaways

  • Animation Base uses p5.js and p5.brush to create code-driven character animation.

  • Node.js, Google Chrome, and FFmpeg are needed for local rendering.

  • After downloading the project, install dependencies with npm install.

  • Render the included demo using node render.mjs --clip --out=out/video.mp4.

๐ŸŽฌ What kinds of videos can Animation Base make?

The project is particularly suited to illustrated 2D cartoons, expressive character movements, and short animated stories. Its starter files include a character called Clawd, emotion and pose references, and utilities for timing, movement, and camera effects.

Unlike a photorealistic AI video generator, this workflow produces animation through code. Claude can help plan shots and write the scenes, while software on your computer renders the final frames into a video file.

๐Ÿ’ป What do you need before installing it?

Install Node.js, Google Chrome, and FFmpeg first. Git is useful for cloning the repository, although you can also download the project as a ZIP archive. Claude Code makes it easier to request changes in plain language, but the starter project can be used with other coding agents as well.

Open a terminal and run:

git clone https://github.com/JohnHeibel/ClaudeAnimationBase.git
cd ClaudeAnimationBase
npm install

If setup fails, check that Node.js is installed and your terminal is inside the project directory. Some systems may require an explicit Chrome or FFmpeg path during rendering.

โœ๏ธ How do you prompt Claude to create a scene?

Open the project folder in Claude Code and ask it to read ANIMATION_GUIDE.md before writing any scene code. Provide a character, a clear action, a visual style, and a desired duration.

For example: โ€œRead ANIMATION_GUIDE.md, then create a 15-second hand-drawn animation of Clawd chasing a butterfly. Show me the storyboard before writing code.โ€ This is a sample creative brief, not a fixed duration or requirement.

Start with one simple scene instead of a long film. Reviewing the storyboard and motion early can save time when adjusting pacing, expressions, or transitions.

๐Ÿ–ผ๏ธ Preview your animation and export an MP4

๐Ÿ“ Projectโ†’๐ŸŽž๏ธ Scenesโ†’๐Ÿ’ป Previewโ†’โ–ถ๏ธ MP4

To preview the starter project, open studio.html in Chrome. To render the included demo, run:

node render.mjs --clip --out=out/video.mp4

Once rendering finishes successfully, check the file at out/video.mp4. For custom animations, make sure your new scene is connected to the project's timeline and rendering configuration. Watch the exported file from start to finish to catch missing frames, awkward transitions, or timing problems.

โš ๏ธ Common limitations and useful tips

Watercolor-style fills can render slowly without a dedicated GPU. If performance is an issue, ask Claude to simplify the artwork or replace watercolor effects with flatter colors. Also check the usage rights for any external images, sound, or character assets before publishing the result.

Your first step is to download the Animation Base project, run npm install, and confirm that the included demo works on your computer.