Agentic Product Demo

Point your coding agent at your product and get a demo video back — built in React, not recorded off a screen.

What's in it · Your first clip · Motion rules · Working with an agent · The frame gate · Licensing

The hard part is not making a video. It is making one that does not look like a screen recording. This repo is the motion vocabulary, the render pipeline and the frame gate that got mine there, plus the skill file that makes an agent follow them instead of improvising.

src/compositions/Demo.tsx — sixteen seconds, exactly what npm run render gives you on a fresh clone. Nothing on screen snaps between frames: the counter counts, the rows stagger, the pointer stops before it presses. A screen recording of a real app shows every one of those as a teleport.

npm install
npm run adopt ../src/app/globals.css   # take your product's real tokens
npm run studio     # preview at localhost:3000
npm run preview    # stills on every beat + a contact sheet — seconds
npm run render     # renders, stitches, and gates the result

Node 20+. First render downloads a headless Chromium (~100 MB); if that fails see Troubleshooting.

Works with Claude Code, Cursor, or anything else that loads a skill file. It reads your product, puts up a shot list, and waits for you to correct it — what that looks like. Then it writes the composition, renders it, and refuses to pass a render it cannot verify.

The same pipeline, cut for Athana — five movements, one flow, no screen recorder. It runs on that product's own assets, which is why the composition that ships here is the generic one above.

---

What's in it

src/motion.ts	The vocabulary. Curves, durations, stagger, and the helpers that stop states teleporting. Imports nothing.
src/title-card.tsx	The cold open — words rising out of per-word masks.
src/chrome.tsx	The fake app window, the pointer, the click beats.
src/compositions/Demo.tsx	A worked example. Copy this, change the flow.
scripts/preview.sh	Stills on every beat, plus a contact sheet. What the gate cannot see.
scripts/render.sh	Sequence render → 1536×960 mp4 + poster → gate.
scripts/check-frames.mjs	The frame gate. See below.
scripts/add-sfx.sh	Optional sound pass over the finished mp4.
scripts/beats/	One beat file per clip — where the sound is scored.
.claude/skills/product-demo/	The skill: the playbook an agent reads before touching any of it.
AGENTS.md	What an agent needs on arrival — commands, and the rules it would otherwise break.

AGENTS.md at the root is read natively by Claude Code, Codex, Cursor, Aider, Copilot, Gemini CLI and Windsurf — an agent opening this folder is oriented before you say anything. CLAUDE.md points at it rather than repeating it.

Cursor users who want the skill loaded as a skill: copy .claude/skills/product-demo/ to .cursor/skills/. Same file either way.

---

Your first clip

The mental model