2026-11-07

Skip the Animation App: Build Videos from Web Pages

Make animated explainers on your PC with AI-written code and a browser. No app needed, no watermarks, free tools like FFmpeg and Playwright.

In short

AI can write animation code that runs in your browser and renders to video without expensive software.
One prompt builds a complete renderer on your computer in about thirteen minutes using Python, Playwright, and FFmpeg.
Claude produces usable animations reliably, while local AI models like Qwen struggle with accuracy but cost nothing to run.

The Problem with Motion Graphics Tools

Animation apps promise quick results but eat hours on simple tasks. You open the software, move one shape across the screen, and two hours vanish. Free AI video tools look tempting until you hit the credit limit halfway through, or the text renders as gibberish. The real friction is that each tool reinvents how video works, so you're always learning a new interface.

Most free motion graphics tools now restrict users through watermarks, short clip durations, daily credits, or lower resolution exports. Faster tools exist, but they still lock you into their ecosystem. The video above shows a better path.

How This Renderer Works

The trick is to skip the animation app entirely. Instead, you write animations as web pages: HTML, CSS, SVG, and JavaScript that move shapes and text. A small Python program steps through that page like a clock, one thirtieth of a second at a time, takes a picture of each moment with your browser, and glues the pictures into a video using FFmpeg, a free video tool that many other programs use behind the scenes.

Every computer already knows how to show a web page. Windows has a browser built in. So all you need is Python, Playwright to drive your browser, and FFmpeg to stitch frames together. One prompt builds the whole thing on your computer in about thirteen minutes. The renderer writes four files: the core program, scene rules that teach any AI how to write animations it can play, a voice-sync tool, and a read-me.

Setting Up Your First Renderer

Start by making an empty folder. Open Claude Code in it and paste Prompt One from the description. The prompt checks that Python is installed, creates a private Python environment for that folder alone, and installs Playwright and imageio-ffmpeg. The scene rules are the important part: they tell any AI how long the animation is, that every movement follows the renderer's clock, and that text stays big and inside the frame.

Once the files are written, run a quick check with render.py --check on the two test scenes. That opens each one and looks for errors before wasting time on a full video. Then render.py --preview saves six still frames on one picture for a quick look. A five-second animation took about twelve seconds to make. The whole setup takes roughly thirteen minutes on a second run.

python --version (verify Python is installed)
python -m venv .venv (create a private Python environment)
pip install playwright imageio-ffmpeg (add the tools you need)
render.py --check (test for errors)
render.py --preview (see six frames at once)
render.py (render the full video)

Making Animations with Claude

Prompt Three has four lines to fill in: the topic, the length, the style, and a voice-over if you have one. Ask for why your Wi-Fi is slow in the room farthest from the router, fifteen seconds, glass style. Claude first writes a plan: five beats, one idea each, with a picture, not just words. Then it checks its own work by rendering six still frames into one picture and looking at them.

When something looks wrong, Claude fixes it and checks again. The pack includes thirty-one style prompts: chalkboard, blueprint, film noir, synthwave, watercolour, a cut-paper diorama, and more. Each is a short paragraph describing the colours, fonts, what moves in the background, and how things enter. Change a colour code and it's your brand. If you have a voice-over, type python align.py and the name of your voice file. It writes down when every word is spoken, runs on your computer, and works offline after the first run. Then Prompt Three gets one more line: the word timings are in that file. Watch the drawing land on each word.

Running AI Locally: The Trade-offs

Ollama runs AI models on your own computer for free. The prompt pack includes a version that uses a local model instead of Claude. It builds a small helper that asks your local model for an animation, checks it, sends back the errors, and tries again. In testing, the local renderer worked on the first try, but the animations themselves had problems: no bars in the chart, missing underlines and icons in the title.

For the three real animations tested, Claude made five beats each and produced usable results after one to three fix rounds. The local model made one still picture for fifteen seconds, came out as an empty chalkboard, and a small grid in the corner with no words. Each local animation took about two to three minutes, while Claude's took four to seven minutes, but Claude's were done. The local model's own check said all three passed, so you cannot trust the check alone. Always look at the preview. If privacy matters most, this is a start, and local models improve every few months. If you just need a few titles, Canva is quicker. If you animate for a living, After Effects is still the tool.

Other Routes Worth Knowing

Claude Motion, in beta on Claude Team and Enterprise plans, makes short animated explainers right inside Claude. Remotion builds videos from code too, with more structure and more to learn. If you do not want to install anything, ask Claude in the chat and play the animation in its preview window. You would screen-record it, but you will not get a clean file with sound.

Canva is quicker if you just need a few titles. After Effects remains better for hand-crafted character animation, complex 3D, heavy compositing, or visual effects. The whole prompt pack is free: the renderer prompt, the scene prompt, all thirty-one styles, and the local version with every fix we hit. The prompts are in the description.

Watch "You Don't Need Motion Graphics, This Is Better" on YouTube