Explainer

Make a film that explains a topic, an article or a process with invented visuals, facts first and nothing sold.

At the end of this page you have an explainer filmA film is the mp4 file that the renderer makes from one page. of 9 s to 3 min. Each beatA beat is one part of the story with one idea, such as the hook, a feature or the end. shows one idea, and a facts list that you checked backs every claim.

You need a source: a link, a paper, a recipe or an outline.

What this film needs

An explainer teaches. It has no product to sell and no capture to show, so the agent invents the visuals. The picture is the explanation: a diagram that builds, a number that counts, or a process that fills from empty to complete. Type is for labels and one sentence for each beat, never for paragraphs.

The length is 9 s to 3 min (prompts/story-explainer.md). Over 60 s, use the director’s brief (prompts/directors-brief-long-form.md) and one chapter file for each agent. A common length is 30 s in 16:9.

Plan the beat count from the length. The scene-budget rule gives 5 to 7 beats of 3 to 6 s for 30 s, and 8 to 12 beats of 4 to 7 s for 60 s. Beat length varies, and the payoff holds longest.

The hook-payoff rule puts the question in the first 3 s and the payoff, the beat where the idea becomes clear, at 77 to 90 percent of the length. Do not spend the best fact in the hook.

Two lists come before any code. Each list is a stop.

Steps

Write the brief

bin/vawe new fsync --from prompts/story-explainer.md --length 30 --aspect 16:9

The template asks for the source, the audience in one line, the three things the viewer must be able to explain afterwards, the length, the aspect, and the narration. A skipped question takes its default. Read Write the brief.

Write the facts list and stop

Before any visual, list every claim the film makes, with its source and the line it comes from. Mark anything you could not verify. Copy formulas, dates, numbers and names. Never paraphrase them. The owner checks this list before you draw.

Write the beat list and stop

One row for each beat: the time, the one sentence the viewer takes away, what builds on screen, and the cut out. Each beat has one thing that changes. If narration exists, each beat start is a word boundary from the timings, not a guess.

Build the page and draft

Draw diagrams as SVG in the page and build them with CSS @keyframes or element.animate() (a line draws itself with stroke-dashoffset). Count numbers with a [[f, v]] table and kf(t, table, ease) from core/motion/springs.js, so the count is a pure function of time.

bin/vawe dev films/fsync/page.html

Narration and captions

Narration is an <audio src="vo.mp3" data-at="0" data-role="vo"> tag that you supply. data-role="vo" ducks the bedA bed is a music track that plays under the whole film, marked by the loop attribute on an <audio> tag.. Put music under it at a lower gain. Read Audio.

Captions are one <p> for each line, timed with the same table as the narration. The caption-karaoke and caption-editorial moves are built versions. Do not write an em dash on screen.

The agent cannot hear the narration it rendered. Write “pronunciation not checked by the model” in the hand-off, and have a person listen once.

Pitfalls from the taste digest

  • Show real things working (show-real-thing). The viewer watches the thing work. A value changes and the output updates. A word in a box is not a beat.
  • Text breathing (text-breathing). Readable text fills at most 84 percent of a film. Leave one or two beats with no words.
  • Read lines (readable-hold). A caption of 4 words or more holds 0.6 s a word. A diagram that finishes building in 300 ms was not seen.
  • Every claim is backed (claim-backed). Show each number in the same beat that states it.
  • One thread (thread). Keep one palette and one accent, for the thing explained right now.

A formula with a glyph the font lacks renders a box, so check the glyphs. A count that ends on a rounded number lies: count to the sourced value. Captions and diagram must not share the caption band.

Common mistakes

What you seeWhyWhat to do
A bullet slideThe beat says the thing instead of showing itDraw the mechanism
A diagram appears at onceNo build, or a build of 300 msBuild it in steps the viewer can follow, then hold it
The voice and the picture driftBeat starts were guessedTake each start from the timings file

On this page