rahulsaw13

Explainer Reel Skill — Development skill for Claude Code

Development community

Claude Code skill: build a self-playing animated explainer reel - one self-contained HTML file that plays like a 2-3 min product or architecture video, with synthesized audio and narration, for screen.

How to install Explainer Reel Skill

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

What Explainer Reel Skill does

Alternatives in Development

Google Tts — Text-to-speech narration and podcast generation using Google Cloud TTS 159 ★
15 — Build a Next.js 14 portfolio landing page with a full-screen hero section and an animated loading screen 152 ★
Better Statusline — A status line for Claude Code: the session's figures as dot-matrix rings, and the music you are playing beside 119 ★

README

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