# Explainer video, made with code. > An explainer video teaches one topic with visuals that build on screen and sell nothing. Scene by scene, the timing, the exact vawe commands, and examples. Canonical: https://vawe.dev/explainer-video Last updated: 2026-11-03 An explainer video teaches one topic, paper or process with visuals that build on screen, and it sells nothing. With vawe you list the facts first, plan one idea per scene, and write one HTML page that renders to an mp4. Captions can carry the words, or you can add a voice. ## What an explainer contains. Two lists come before any picture, and you check both. Then the scenes follow the lists. 1. A facts list. Every claim the film makes, with its source. Copy formulas, dates, numbers and names exactly. Check the list before you draw anything. 2. A scene list. For each scene: its time, the one sentence the viewer takes away, what builds on screen, and how it ends. 3. One idea per scene, and one thing that changes in it: a diagram builds, a number counts, or a process fills from empty to complete. 4. Short captions, one line each. Text is for labels and one sentence per scene, never paragraphs. 5. One palette for the whole film, and one accent for the thing you explain right now. Avoid a slide with bullets, a stock icon grid, and any scene where nothing moves. ## Timing: 9 seconds to 3 minutes. An explainer runs from 9 seconds to 3 minutes. The default is 30 seconds in 16:9, with three takeaways and one scene for each. For a film over 60 seconds, or one that takes more than one working session, use the long-film brief instead. Under 15 seconds, a process that fills from empty to complete is one continuous action. If there is a voice, every scene starts on a word boundary from a timings file, not on a guess. A viewer does not see a diagram that finishes building in 300 ms, so give it time. ## Examples. Explainers from our inspiration wall. Each links to the creator’s post on X. - [A recipe motion graphic, rendered in HTML from one image](https://x.com/Ror_Fly/status/2102853258582880547) by @Ror_Fly - [An interactive lens lab that explains camera focus](https://x.com/RyanSael/status/2102591147927654847) by @RyanSael - [An interactive Raptor 3 you can take apart](https://x.com/konstantinsaifo/status/2104094723887501736) by @konstantinsaifo - [什么是 Transformer](https://x.com/dotey/status/2103683057689522564) by @dotey - [All motion video inspiration](https://vawe.dev/inspiration) ## The video components an explainer is built from. A chart that builds, a number that counts to its sourced value, captions that replace each other line by line, a before and after. Open one for its clip, code and notes. - [chart-build](https://vawe.dev/video-components/chart-build) - [count-up](https://vawe.dev/video-components/count-up) - [caption-editorial](https://vawe.dev/video-components/caption-editorial) - [before-after-wipe](https://vawe.dev/video-components/before-after-wipe) ## Make one with vawe. Start from the explainer template. Diagrams are SVG inside the page, and CSS animation builds them, so a line can draw itself. Numbers count from a table of values over time, so the count is the same on every render. 1. Write the facts list and stop. Then write the scene list and stop. Then write the page. 2. `bin/vawe dev ` renders a half-size draft with sound. 3. `bin/vawe critique --fresh` asks a separate session to review the draft, then you fix the seconds it names. 4. You approve the full draft. Then `bin/vawe ship ` renders the final film. Terminal: ``` bin/vawe new how-it-works \ --from prompts/story-explainer.md --length 30 bin/vawe dev films/how-it-works/page.html ``` ## Questions ### How long should an explainer video be? From 9 seconds to 3 minutes. The default is 30 seconds. Over 60 seconds, use the long-film brief. ### Do I need a voiceover? No. The default is captions only. You can add a voice from a recorded file or a text-to-speech voice with a timings file. An agent cannot hear the voice it made, so listen once yourself for pronunciation. ### How do I keep the facts right? Write the facts list first, with a source for each claim, and check it before you draw. A number that counts up ends on the sourced value, not a rounded one. ### Is this the same as a product launch video? No. An explainer teaches and sells nothing. If you want to market a real product, make a launch video. See [product launch videos](https://vawe.dev/launch-video). ### Can an AI agent make it? Yes. A film is one HTML page, so any coding agent can write it, and vawe ships skills for each step. See [vawe for AI agents](https://vawe.dev/ai-agents). ## Make your explainer. Run `bin/vawe new` with the explainer template, then write the facts list first. ## Related - [Get vawe on GitHub](https://github.com/vawe-hq/vawe) - [Product launch videos](https://vawe.dev/launch-video) - [Product showcase videos](https://vawe.dev/product-showcase-video) - [Every video component, with its clip](https://vawe.dev/video-components)