junjie721

Canvas Explainer Videos — Testing skill for Claude Code

Testing community

How to install Canvas Explainer Videos

This entry records only its repository, not the path inside it, so there is no exact command to give. Open junjie721/canvas-explainer-videos and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Canvas Explainer Videos does

Generate narrated explainer videos purely from code - one Canvas HTML file draws every frame, Web Audio synthesizes the music, TTS narrates, Playwright exports frames and ffmpeg encodes an MP4. An Agent Skill for Codex, Claude Code and any SKILL.md agent. 用纯代码生成带解说的科普动画视频，不需要任何图片或音频素材。

Alternatives in Testing

PR Visual Diff — Post before/after stills + GIFs on a visual PR, captured headlessly with Playwright + ffmpeg 324 ★
Claude Code Video Toolkit — AI-native video production workspace for Claude Code with Remotion, ElevenLabs, FFmpeg, and Playwright skills 133 ★
Ig Stories Drop — Generate a 17-day Instagram Stories drop cycle (Whisper → Tease → Shout) 39 ★

README

Canvas Explainer Videos — an Agent Skill

[![CI](https://github.com/junjie721/canvas-explainer-videos/actions/workflows/ci.yml/badge.svg)](https://github.com/junjie721/canvas-explainer-videos/actions/workflows/ci.yml) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

**In one sentence:** write one self-contained HTML + Canvas file and get a narrated explainer video as an MP4 — no image assets, no audio files, no video editor.

![Demo: the TCP three-way handshake](docs/demo.gif)

The clip above is a 40-second export ([examples/tcp-handshake/tcp-handshake.mp4](examples/tcp-handshake/tcp-handshake.mp4), source in [examples/tcp-handshake/page.html](examples/tcp-handshake/page.html)). The bundled example is narrated in Chinese; the template's built-in example and the default voice follow the language of your narration text.

What it does

15–90 second concept explainers: algorithms, math, AI agents, system flows, network protocols, anything
The picture and the background music are generated from code — no assets, no licensing questions, reproducible renders
Optional TTS narration: the timing adapts to the visuals, and a line that does not fit is reported instead of being silently sped up or cut off
Frame-by-frame export → ffmpeg mixing (music ducks under the voice) → MP4; horizontal or vertical, any resolution
The picture is a pure function of the frame number (renderFrame(n)), so the live preview and the export match exactly

Quick start

1. Install the skill

git clone https://github.com/junjie721/canvas-explainer-videos.git
cd canvas-explainer-videos
node install.mjs                 # Codex: ~/.codex/skills

`install.mjs` can target other agents and projects too:

node install.mjs --target claude    # Claude Code: ~/.claude/skills
node install.mjs --target agents    # generic: ~/.agents/skills
node install.mjs --target all       # all three user-level directories
node install.mjs --targ