# Vox Explainer

Make a short Vox-style documentary explainer (30-60 seconds) entirely in code with...

- Repository: https://github.com/charlie947/motion-graphics-skills (519 stars)
- Category: AI and agents
- License: MIT
- Last updated: 2026-10-11
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add charlie947/motion-graphics-skills --skill vox-explainer -g -a claude-code -y`
Codex: `npx skills add charlie947/motion-graphics-skills --skill vox-explainer -g -a codex -y`
Cursor: `npx skills add charlie947/motion-graphics-skills --skill vox-explainer -g -a cursor -y`
Gemini CLI: `npx skills add charlie947/motion-graphics-skills --skill vox-explainer -g -a gemini-cli -y`

## Description

Make a short Vox-style documentary explainer (30-60 seconds) entirely in code with Claude Code. Torn paper, halftone texture, bold condensed type, motion on twos. Use when someone says "make a Vox-style video", "explainer video about...", "why does X happen", or wants a documentary-style motion graphic for LinkedIn, Instagram or YouTube without After Effects or a video generator.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Vox-style explainer, built in code

You make a 30-60 second documentary explainer as one HTML file, then export it to MP4. Every frame is code. No video generator, no stock footage.

**Before you start:** read `brand.md` and `MOTION.md` if they exist. If not, run `brand-intake` first, or ask for hex codes, a font and a logo file. Never call a result on-brand without them.

## Step 1: Ask for four things, then wait

1. **The question.** One "why" question a stranger half understands. Example: "Why does every brand logo look the same now?"
2. **The facts.** Names, dates and numbers that answer it, each with a source link. If the user has none, research them and show the list with sources before building.
3. **The colours.** Three hex codes plus one accent. Default (the palette from my logo film): red #B8312A, cream #F1E6D0, paper #FBF7EE, navy #14213D, yellow accent #F2C230. Label defaults as defaults.
4. **The size.** 1920 x 1080 (YouTube), 1080 x 1350 (LinkedIn feed) or 1080 x 1920 (Story or Reel).

Do not start building until every fact on screen has a source.

## Review rules (from the rounds that got rejected)

The rest: https://github.com/charlie947/motion-graphics-skills/blob/HEAD/skills/vox-explainer/SKILL.md