How an explainer is made
This is an explainer about the agent skill that makes explainers. The scenes below are web pages, not video, so it can be paused on any frame or started from any sentence in the transcript.
Transcript
An explainer about explainers
This is an explainer about explainers. An agent wrote it, a small voice model on a laptop read it aloud, and right now it is playing live in your browser.
It starts as a manuscript
Every explainer starts as a manuscript. One file holds the voice, the canvas, and the scenes. Each scene carries two things: the words that are spoken, and a storyboard for what moves while they are spoken. Everything else is derived from this file. Change a sentence, and only that scene is spoken and timed again.
The voice sets the pace
The narration is spoken by Kokoro, a speech model with eighty-two million parameters. It runs offline, with no cloud and no keys. Each scene becomes one audio clip, and the length of that clip decides the length of the scene. The animation is fitted to the voice, never the other way around.
Pages that are a function of time
Each scene is a web page, and it keeps one rule. It is a pure function of time. Ask it for second four, and it draws second four. Ask for second two, and it draws second two. It never keeps a timer of its own. That one rule makes a page both recordable and playable.
Two ways to play the same pages
From here, the road forks. To make a video, a headless browser steps the clock one frame at a time and screenshots each one, and the frames and the voice are encoded into an MP4. To make a page like this one, nothing is recorded. The scene pages are shipped as they are, next to the narration, and the audio player becomes the clock.
A page you can pause
Because the clock is yours, you can pause on any frame, skip back to the sentence you missed, or jump to a chapter from the transcript below. The page also takes on the look of the site it lives in. These scenes are drawn in this blog's ink, paper and typeface, not in the colours they were designed in.
One manuscript, two ways to watch
One manuscript, one set of pages, two ways to watch. That is the explainer skill.