ccvideo

Claude-style product promo videos, generated from ground truth.

A Claude Code skill that turns a real API run or a real coding session into a polished 20–45 s launch video — the warm terracotta terminal aesthetic of Anthropic's Claude demos, rebuilt frame-perfect in Remotion, with every number, path, and output line traceable to something that actually ran.

Terracotta theme — an install-then-prompt Claude Code session, every number fetched live at capture time. (mp4)

Dark theme — the same capture rendered as a chaptered CLI demo. (mp4)

Install

npx skills add AmazingAng/ccvideo

Or copy this repository into your project's skill directory manually (.claude/skills/ccvideo/). Then, in Claude Code, just ask:

make a promo video for my CLI

What makes it different

Ground truth, enforced. Video content is never hand-written into scene components. A capture script runs the real thing (an API call, a CLI install, a whole Claude Code session), archives the raw output, and builds the video's script (props.json) from it deterministically. verify-props.mjs rebuilds props from the raw artifacts and fails on any hand-edited number. Placeholder captures fail verification by default.

Zero text drift. Terminal text only fades in place; transient rows live in fixed-height slots; the only camera motion is a brief eased push between locked framings. These rules were distilled from pixel-diffing renders (settled frames are byte-identical) and are baked into the components.

Two grammars, one capture:

• Terracotta — a replayed Claude Code session: pixel-logo welcome header (real claude --version), typed prompt, live spinner, tool bullets with real output, cut-zoom into the payoff.
• Dark — an ant-style chaptered CLI demo: pixel wordmark, serif interstitial claims, shell beats typing real commands.

Session replay. scripts/transcript-to-props.mjs converts any real Claude Code session turn (JSONL transcript) into a video — with built-in secret scrubbing, path redaction, and minimal storage so captures are safe to commit (review them anyway).

Quickstart

1. Have (or scaffold) a Remotion project; install @remotion/google-fonts, @remotion/transitions, zod.
2. Copy templates/ → src/ccvideo/ and scripts/ → scripts/.
3. Capture: adapt scripts/capture-xapi-cli.mjs to your data source (fetch reality → save raw → build props), or replay a session with scripts/transcript-to-props.mjs.
4. Register a <Composition> with GroundedVideo (or DarkVideo) and defaultProps from your captures/<name>/props.json.
5. node scripts/verify-props.mjs captures/<name> → npx remotion render <CompId> out/<CompId>.mp4 (--scale=2 for 4K).

Full workflow, style rules, component API, and timing recipes: see SKILL.md — that file is the skill; Claude Code reads it and does the above for you.

Requirements

• Node.js 18+, a Remotion project (the skill can scaffold one)
• For the bundled X-data example: an xapi.to key or an official X API bearer token — or write a capture script for your own data source (the pattern is ~60 lines)

Disclaimer

Not affiliated with or endorsed by Anthropic. "Claude" and "Claude Code" are trademarks of Anthropic, PBC. This skill recreates a visual style for product demo purposes; the videos it produces replay real captured runs and are only as honest as the captures you feed them — keep them honest.

License

MIT