How to make an explainer video with code and an AI agent

An explainer video answers one question: how does this work? This guide shows how to make an explainer video the code route, with an AI coding agent and a video skill, and is plain about where that route is weaker than an online explainer video maker. The steps are the same either way: script, storyboard, style, render, sound, checks.

Code and an agent, or an explainer video maker?

Search for “explainer video maker” and you get browser tools. Adobe Express, for example, offers free explainer templates, stock soundtracks and recording your own voice-over in its online editor. Animaker offers characters designed to match your brand and AI voices from a text-to-speech engine. If that is what your video needs, use one of them.

Step 1: write the explainer script in scenes

Don’t start with a script of paragraphs. Start with scenes, because every explainer style below is built from them, and each scene gets one line on screen.

• Make the step titles carry the story on their own. A viewer who reads only the titles should still get it.
• Keep steps concrete. “Signed and encrypted”, not “Security”.
• Use only real numbers, and mark made-up ones as illustrative. The film presents every number as fact.
• If you will add a voice-over, write one spoken line per scene and read it aloud against a timer. When it runs long, cut words, not the scene.

Step 2: storyboard it

A storyboard is one still per scene: what is on screen, which line, where the eye goes. With a skill you don’t draw it. The agent writes the scenes into a brief.json, a checker lists every line that is too long for its space, and a snapshot command renders stills from the real composition. You approve the stills, not a sketch.

Step 3: pick an explainer video style

Step 4: how an agent renders an explainer from HTML

A coding agent is good at writing HTML and CSS, so the explainer is written as a web page. Each scene is a layout, a GSAP timeline moves it, and HyperFrames, an open-source renderer under the Apache 2.0 license, seeks every frame in a headless Chrome and encodes the frames with FFmpeg. Nothing is generated by a video model, so the same brief renders the same film every time. For other renderers, including Remotion, see Remotion alternatives.

1. 1

   Step 1: Install the skill

   TerminalCopy Terminal

   curl -fsSL https://lookbk.dev/cli.js | node - add isometric-explainer-film

   Or paste the install prompt from the skill’s page; see Install a skill in any agent. The explainer films need Node.js 22 or newer, FFmpeg and Chrome.

2. 2

   Step 2: Hand over your scene list

   Your agentCopy Your agent

   Make an Isometric Explainer Film answering "How does Relay deliver a
   message?" in four steps: app sends it, encrypted, routed at the edge,
   delivered everywhere. End on relay.example/docs.

3. 3

   Step 3: Let it check and render

   The agent writes the brief, picks an object from the kit for each step, and runs one command that builds the project, writes the soundtrack and renders the MP4:

   TerminalCopy Terminal

   node <skill>/scripts/make-film.mjs --brief brief.json --out my-film

Step 5: voice-over and music

Music. Isometric Explainer Film, Sketch Explainer Film, Radial Cycle Film and One-Take Type Film each write an original soundtrack on your machine, on the same beat sheet as the picture, so the whooshes and clicks land on the frames they belong to. The track it writes is yours to use. Each also takes your own track in the brief ("music": "track.wav") or renders silent with --no-music. Paper-Cut Explainer ships silent; its scenes change at 6, 12, 18, 24, 30 and 36 seconds, which helps when you cut a track to it.

Voice-over. No Lookbk skill records or generates a voice. Record one yourself or use a text-to-speech tool, then lay it over the render with FFmpeg, which the skills already need. Over a silent film:

ffmpeg -i renders/explainer.mp4 -i voice.wav -map 0:v -map 1:a -c:v copy -c:a aac -shortest explainer-vo.mp4

Over a film with its own soundtrack, turn the music down under the voice:

ffmpeg -i renders/explainer.mp4 -i voice.wav \
  -filter_complex "[0:a]volume=0.3[m];[m][1:a]amix=inputs=2:duration=first:normalize=0[a]" \
  -map 0:v -map "[a]" -c:v copy -c:a aac explainer-vo.mp4

Step 6: checks before publishing

Look at stills from the middle of each scene, not only where it settles. Mid-move is where a card covers its picture or a line is still sliding in. Each skill prints the moments worth checking; for the isometric film:

cd my-film && npx --yes hyperframes@0.8.192 snapshot . --at 3,6,12,20,30,36

• A title or line looks smaller than the others

  It was shrunk to fit its card. Shorten the line in the brief rather than editing the template.

• The checker lists several problems at once

  Each names the field and its limit. Fix them all in the brief and run it again.

• Text is hard to read on a phone

  Watch the draft on a phone, not just on your monitor. Cut words until each card reads at a glance.

• The voice-over runs past a scene change

  Cut words from that line, or record it faster. The picture won’t wait for it.

• Plain fonts, or the render hangs before the first frame

  The fonts and GSAP load from the web while rendering. Allow fonts.googleapis.com and cdn.jsdelivr.net; each skill’s Troubleshooting section says how to point it at a local copy of GSAP.

video

Isometric Explainer FilmClaude CodeCodexCursor+3 more agents

video

Paper-Cut ExplainerClaude CodeCodexCursor+3 more agents

video

Sketch Explainer FilmClaude CodeCodexCursor+3 more agents

video

Radial Cycle FilmClaude CodeCodexCursor+3 more agents

video

One-Take Type FilmClaude CodeCodexCursor+3 more agents

Free

video

Kinetic Title DropClaude CodeCodexCursor+3 more agents

If the explainer is really a walkthrough of your interface, it is a demo: see Product demo video: how to make one with an AI agent. For explainers built on numbers, see animated chart videos.