mcpField
E
explain-with-video

explain-with-video

github.com/kjetilhartveitCreative & media278 installsUpdated 6d ago
Repository

About explain-with-video

A skill for creating short animated explainers about changes, intended for visual explanations in a project workflow. It defaults to editable, searchable HTML/SVG animation rather than a video file.

Key features

  1. 01About 60-second animated explainers
  2. 024–7 chapters with moving visuals
  3. 03Searchable and copyable text
  4. 04Player controls and captions
  5. 05Optional rendered video output

Use cases

  1. 01Showing project changes visually
  2. 02Explaining a change through a short animation

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/kjetilhartveit/kjetils-skills --skill explain-with-video

After installing, type/explain-with-videoin Claude Code to confirm it loaded.

Details

From the project README

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.

Comments

Markdown supported