Explainer Reel Skill

explainer-reel

A [Claude Code](https://claude.com/claude-code) skill that builds a **self-playing animated "explainer reel"** — one self-contained HTML file that plays like a 2–3 minute product or architecture video, designed to be screen-recorded for a demo or pitch.

Each reel has:

• a fixed 16:9 stage for clean 1080p capture
• a pipeline rail of 3–7 nodes with a glowing packet that advances stage by stage
• cross-fading scenes (title → problem → each stage → payoff → stack recap → close)
• a caption bar, timeline, and clock
• audio synthesized in the browser — an ambient pad, per-scene ticks, a payoff chime, and speech-synthesis narration, one spoken line per scene
• controls: prev / play / next / restart / Voice / Sound / scene dots (Space = play-pause, ← → = step)
• prefers-reduced-motion support

The animation engine is fixed. Authoring a reel means writing three arrays (`SCENES`, `SAY`, `NODES`) and a few labels.

Install

Copy the skill folder into your Claude Code skills directory:

git clone https://github.com/rahulsaw13/explainer-reel-skill.git
cp -r explainer-reel-skill/explainer-reel ~/.claude/skills/explainer-reel

(or `.claude/skills/explainer-reel` inside a single project). Restart Claude Code; it will list `explainer-reel` among available skills.

Use

"Make an animated explainer video for <your system>." "Turn this architecture into a 2-minute reel." "/explainer-reel"

Claude pins the subject, defines the pipeline stages, storyboards the scenes, fills in the template, and publishes the result as an Artifact with recording instructions.

Layout

explainer-reel/
  SKILL.md                       instructions Claude follows
  assets/template.html           the engine + an editable placeholder reel
  reference/scene-components.md   the styled scene building blocks
  reference/authoring.md          arc, caption/narration, timing, recording
  examples/
    always-on-cod