HTML Explainer Video

HTML scenes · Fil's video editor over MCP · Playwright · ffmpeg. A scene engine without a framework is in scripts/explainer.js.

An explainer is a voice with pictures cut to it. This skill writes the voice, then draws every picture in HTML from one number: the film's seconds. Each thing on screen lands on the word that names it, because its time is that word's time (T.clock is when the voice says "clock"). It looks like motion design and it's a web page, so its look, its shape and its camera are settings, not rebuilds.

Boundary. Use html-demo for a live app window on a web page (no video file). Use html-reel to turn an existing post, video or page into a 9:16 reel in that source's look. Use website-to-motion-design for a short piece with no voice. Use this skill when the deliverable is a finished explainer film, about one minute, that explains something.

Provenance. Extracted from seven one-minute onboarding films for Fil, 31 October to 1 November 2026. Each had a hook, a benefit, a quick tutorial with numbered headings and an ask, with scenes rendered at 2× and 60 fps and assembled in Fil's video editor. Those were locked to one dark look, one shape (4:3) and a camera slot, and built on Fil's own demo components. Here all three are inputs and nothing depends on Fil's components. The film in demo/ is this skill's own explainer, made with it: one script, in four looks and four shapes, with the camera off or on, and no change to a scene. The rules below are what those films cost to learn.

The mechanism

Every frame is a pure function of one number, and every time is a word. A scene sets everything from t, the film's seconds. HTMLExplainer.times(WORDS) names each word of the voice (T.clock, T.clockEnd, a word said again T.look2). A renderer calls window.__frame(t) once a frame and screenshots; nothing reads a clock.