explain-with-video

Explain with Video

A short, concise animated explainer, about 60 seconds, played in a large video-like player. By default it is a live HTML/SVG animation, not a video file: it follows the theme, its text can be searched and copied, and editing it needs no re-render.

Use this skill when

• The user asks for a visual explanation of changes with video.
• Used by an orchestrator to explain changes visually with video.

The video

• About 60 seconds, brisk pacing. 4–7 chapters, each one takeaway with one moving visual.
• Large stage: the full content width, 16:9 on desktop; switch to a taller layout and larger text on phones.
• Captions as real text in a strip under the stage.
• Keep the stage clean: no chapter labels, timestamps or tooltips inside the video or on the scrubber.
• Player controls: play/pause (Space), scrubber, speed, captions toggle, fullscreen.
• Before playing, show a meaningful poster frame (the strongest frame), not an empty stage. Pausing always leaves a clean, readable frame.

Below the player

• One row of chapter names directly under the player: click to jump, the current one highlighted while playing.
• Then a compact details area: a few ev-more toggles that name their contents, with visual content (highlighted code, chips, compact tables). Keep it small.

Building it

• Build it with the explainer-kit skill (theme tokens, ev-more, code blocks).
• Draw every frame with one function render(t) that sets the whole picture from the time alone, driven by requestAnimationFrame. Seeking, speed changes and the poster frame then come for free.
• Only render a real video file (e.g. frames with Python PIL piped to ffmpeg) when the user needs a file to share outside the page.