Make a studio-look animated explainer with Claude Code from one prompt

One prompt and a 20-line brief get you a narrated explainer with colour fields, drawn app screens with their text and buttons in place, grain, camera moves and transitions that carry from scene to scene. Claude Code writes the script, makes the voice on your computer, draws and times every scene, checks its own frames, renders and sets the loudness for social video. HyperFrames (Apache-2.0) turns the HTML into video and its built-in Kokoro voice runs locally, so the voice and the render cost nothing. The Claude work is billed like any other Claude Code use; we used a paid Claude plan.

Watch it (1080p, 36 s, with sound):

The demo explains our own guides, using only the five facts in the brief in step 3.

What's in the kit

• The prompt template (prompts/explainer-prompt.md): the one big prompt, with five lines to fill in. Its Look section asks for colour fields, filled screens, grain and a camera move in every scene.
• The brief template: the facts Claude may use, what not to say, five colours, the voice. Our filled-in example is next to it.
• The /explainer skill file: the same flow as a Claude skill, with setup included.
• The scene checklist: what to look and listen for in the render, so each problem becomes a one-line note.
• Our demo project: 6 scene files, script and voice files. Render it as it is, or study how a scene is built.
• README and LICENSES.md.

How people do this, and what we changed

The Claude Code explainer tutorials we found use Remotion or HyperFrames: open Claude Code in a video project and describe the video. Two reports shaped our prompt. Kiln made their launch video in Claude Code and built the visuals before recording the voice, so the beats landed wrong. A post on r/ClaudeAI, "claude code wrote every line of our 50s launch video in remotion. it took ~100 prompts, not 1", shows how many rounds of notes a "one prompt" video can hide. So our prompt makes the voice first and times each scene from it, and step 6 shows every note we sent for the demo.

Our first version, made with the prompt before it had a Look section, got the timing right but drew thin outlines on an empty dark ground. The Look section asks for specific things instead: five colour roles with two accents, three layers in every frame, screens drawn with their content, at least one paper scene and one full colour field, type at 110 to 200 px, a camera move in every scene, and transitions caused by something on screen. Step 5 of the prompt then has Claude reject its own frames that are mostly empty or show an empty outline.

We used HyperFrames rather than Remotion because Remotion needs a paid company licence for for-profit companies with more than 3 people, and HyperFrames is Apache-2.0 with a local voice built in.

What you need

• Claude Code, with a Claude subscription or API billing. We used a paid plan and Claude Opus 5.5.
• Node.js 22 or newer (we had v22.23.4) and FFmpeg (we had 6.1.1).
• Python 3 for the voice (we had 3.12.3).
• Internet for setup. The first render downloads a headless Chrome (261 MB on our server) and the first voice downloads the Kokoro model (338 MB).

To check what you have, run node --version, ffmpeg -version and python3 --version in a terminal. No HeyGen account is needed. Claude Code still sends your prompt, brief and the files it reads to Claude, as it always does.

Step 1: Make the project

In the folder where you keep projects:

npx -y hyperframes@0.8.221 init leverage-explainer --non-interactive

It makes a blank 1920x1080 project and copies the HyperFrames skills for Claude into your skills folder (on our server, ~/.agents/skills). We pinned 0.8.221 so you get what we got; leave the @0.8.221 off to get the latest.