What This Is
Most of the work in a good explainer video is not the talking. It is the graphics that carry the proof — the number, the comparison, the actual pricing page you are describing. That work is slow, and it is why most videos end up as a face talking over nothing.
This is the skill I use to do that part. It is a folder of instructions plus a kit of templates. You point a coding agent at it, paste your script, and it behaves like a motion designer: it reads the whole script, decides where a visual earns its place, and leaves the emotional beats alone on your face.
It is built on Remotion, which renders video from code. You never open Remotion yourself.
What It Actually Does
Four things, in order:
- Reads your script like a designer. Numbers, lists, offers, comparisons and named tools get a graphic. Personal stories, honesty beats and transitions stay on your face, because a graphic would step on the moment.
- Fetches the real thing. If your script says "Supabase", it pulls the official Supabase mark. If it says "the docs say it's free", it screenshots that actual page and puts a ring around the sentence. Never a generic pictogram when the real asset exists.
- Shows you a shot list first. One row per proposed graphic: the script line, the template, what appears on screen, which assets, roughly how long. You approve or edit before anything renders.
- Renders the clips. 1920×1080 ProRes with a transparent background, so overlays drop straight onto your timeline over your footage.
What's Inside
- 35 templates — stat cards, comparisons, funnels, checklists, step flows, line and bar charts, quotes, pricing stacks, screen frames, plus overlays that sit beside your face: captions, side notes, lower thirds, progress trackers and highlight rings.
- Asset fetchers — official brand logos, Lucide icons, free Mixkit footage, full-page screenshots, and a screen recorder that scrolls and clicks a real page so you can show it instead of describing it.
- A coordinate prober — so a highlight ring lands exactly on the sentence or the number, measured rather than eyeballed.
- A render pipeline — batch rendering, plus a frame linter that flags clipped text, content sitting on the frame edge, and frozen holds.
- The instruction file —
SKILL.md, which is what makes an agent behave like a director instead of guessing.
What You'll Need
- An agentic tool — Claude Code, Codex or Cursor. This is the only part that matters.
- Node and ffmpeg — the agent installs what it needs on the first run. If you do not have them, ask it to set them up and it will.
- A Mac, ideally. The look is designed around SF Pro, which the setup script copies from your system fonts. On Windows or Linux it still renders; swap in a similar font such as Inter.
- No API keys. Nothing here calls a paid service. There is nothing to sign up for.
No keys, no tokens, no accounts, and none of my own brand or business data. The sound system is wired but the audio folder ships empty — the library it was built with is a commercial pack I cannot legally pass on. Everything renders fine silently, and a README inside shows you how to add your own sounds and rebuild the index with one command.
How to Use It — Just Open It and Ask
You do not install anything in the usual sense. You give the folder to your agent and talk to it.
- Download and unzip. You get one folder called
motion-director. - Open that folder in your agent. In Claude Code, Codex or Cursor, open the folder as your project. That is the whole setup.
- Ask it to install itself:
"Read motion-director/SKILL.md and set this up as a skill I can use." - Then paste your script and ask for the graphics:
"Here's my video script. Which parts need motion graphics? Give me a shot list first." - Approve the shot list, then say: "Looks good, render them." Your clips land in an
outfolder.
You never write code, never open a video editor, and never touch a template file. You talk to the agent in plain English and it does the work. If something looks wrong in a preview, you say what looks wrong — "the number is touching the line", "put the overlay on the other side" — and it fixes it and re-renders.
Prefer to run things yourself? (for technical users)
The kit is a standard Remotion project. scripts/setup.sh scaffolds a working project and copies fonts, npx remotion studio opens the live preview, and scripts/render-batch.sh takes a list of shots and renders them. Templates are plain React components in kit/src/templates, and each shot's content is a JSON file, so you can edit props by hand and re-render without touching the components.
How It Works Behind the Scenes
The skill's real value is not the templates, it is the judgement encoded in SKILL.md: rules for where a graphic helps and where it intrudes, roughly six to twelve graphics per ten minutes, on-screen text as a headline of three to six words rather than a transcript, and never two consecutive shots using the same entrance.
When no template fits, it is expected to design a new one rather than force a bad fit — roughly one shot in three on a real script ends up bespoke. It writes the design brief into the shot list so you approve the idea before it gets built.
Before rendering anything long it renders single frames and inspects them for clipped text, a number sitting on a line, or a ring that missed its target. That check is why the output looks deliberate rather than generated.
Example Prompts You Can Paste
- "Read SKILL.md. Here's my script — which moments need a graphic and which should stay on my face?"
- "Make a comparison graphic for the pricing section, and pull the real logos for every tool I mention."
- "Screenshot that pricing page and put a ring on the free tier line."
- "My face is on the left in this footage, so put all overlays on the right."
- "Render everything we approved and give me the previews."
Graphics carry information and proof. Your face carries trust and emotion. Never let one compete with the other.