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

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

A composition is a pure function of the frame number. useCurrentFrame() hands you N, you return what the screen looks like at frame N. Nothing is stateful and nothing animates on its own — if a value is not derived from the frame, it does not move.

That is why every clip starts with a beat sheet: a block of named constants for the frame each thing happens on. Look at the top of src/compositions/Demo.tsx — FIELD_CLICK = 20, RUN_CLICK = 88, TOAST_AT = 282. Decide those before you write any JSX, because every entrance, colour change and cursor move is anchored to one of them.

Elements are positioned in absolute pixels rather than with flexbox. A demo is choreography: you need to know where a button is in order to put a pointer on it at frame 214.

1. Copy the example

cp src/compositions/Demo.tsx src/compositions/MyClip.tsx

Rename the export Demo → MyClip and DEMO_LEN → MYCLIP_LEN.

2. Register it

src/Root.tsx currently returns a single <Composition>. Wrap it in a fragment and add yours next to it:

import { MyClip, MYCLIP_LEN } from "./compositions/MyClip";

return (
  <>
    <Composition id="demo" /* … */ />
    <Composition
      id="myclip"
      component={() => (
        <Clip body={<MyClip />} name="My Product" kicker="One line of promise" />
      )}
      durationInFrames={MYCLIP_LEN + TITLE_LEN}
      fps={FPS}
      width={WIDTH}
      height={HEIGHT}
    />
  </>
);

3. Watch it

npm run studio          # localhost:3000, pick "myclip", scrub the timeline

Scrubbing is where the work happens. Jump to a beat, look at it, adjust the constant, look again.

4. Look at it

sh scripts/preview.sh myclip

Reads the beat sheet out of your composition and shoots a still on each beat and again twelve frames later, then tiles them into out/myclip-preview/contact.jpg. Seconds, where a render is minutes.

Do this before every render. The gate that runs afterwards measures two numbers per frame and cannot see whether the picture is right — a panel over the header, a phase drawn empty, a pointer pressing the number above the button all sail through it. Looking is the only thing that catches those, and this makes looking cheap.

It cannot see time, though. Rhythm only exists in motion, so watch the mp4 when it comes out.

5. Render it

sh scripts/render.sh myclip 366     # 366 = which frame becomes the poster

npm run render is just this with demo. Output lands in out/.

The example runs 480 frames — 16 seconds. That is a default, not a ceiling.

Length follows your flow rather than a template. Budget one step, add 66 for the title and ~30 for the outro, and set MYCLIP_LEN to the total:

A three-step flow lands near 14 seconds; a five-movement product story runs past 40. Nothing in the pipeline cares which you pick — the render, the gate and the sound pass all read the length off the composition.

Working with an agent, you do not do this arithmetic: it derives the number from the flow you described and shows its working, so you can answer "punchy" in one word instead of counting frames.

6. Optionally, score it

bash scripts/add-sfx.sh myclip      # out/myclip-sound.mp4

A clip autoplaying in a page has to stay muted — browsers block autoplay with audio, and a scored file simply will not start. So for a page loop the silent mp4 is the deliverable and the scored one is an extra.

For a launch video nobody autoplays: sound can be the point, and the scored file is the one you ship. Either way the pass writes a new file and the silent original is never overwritten.

The pass runs over the already-rendered mp4 and copies the video stream byte for byte (-c:v copy), so no frame is redrawn and the gate does not need re-running. Beats live in scripts/beats/<id>.txt, written against the beat-sheet constants at the top of your composition. Nine sounds, chosen by level of motion rather than by element — the palette and the rules are in scripts/add-sfx.sh and in the skill.

Then make it yours

Run this first, before you draw anything:

npm run adopt                          # finds your stylesheet
npm run adopt ../src/app/globals.css   # or name it
npm run adopt ../app/globals.css --curves --dry-run

It reads your stylesheet and rewrites src/theme.css with your tokens — --primary becomes the kit's --brand, a --poster/--backdrop becomes --ground, and anything with no counterpart is derived from what did match rather than left as a stranger's purple. --curves also copies your cubic-bezier easings into src/motion.ts, so the film moves the way your product moves. --dry-run reports and writes nothing.

It prints what it matched and what it could not, so a half-adopted palette is visible instead of silent:

  ✓ --brand              --primary                taken
  ~ --brand-soft         —                        derived from --brand
  ! --ground             —                        PLACEHOLDER — no match

Handles Tailwind 3 and 4, :root / .dark / [data-theme] / prefers-color-scheme, and one level of var() indirection. It takes the dark palette by default — the title card, the ground and the loop seam all sit on a dark stage — so pass --mode=light for a light demo.

It copies, it does not link. Remotion cannot import an app stylesheet: that pulls Tailwind plugins and font files that live on the app's own serving path. So these are snapshots, the written file records its source and date, and a token you change in the app afterwards needs a rerun. Hand-edits to src/theme.css do not survive the next run — put a deliberate override in a composition, or add your name to ALIASES in the script.

Then, by hand:

1. src/fonts.ts — swap the face. The script tells you which one your stylesheet asks for, but cannot swap it for you: the family has to exist in @remotion/google-fonts or be wired up as a local file. A fontFamily string alone loads nothing; skip loadFont() and every frame silently renders in a system fallback.
2. MyClip.tsx — replace the flow with the real steps of your product, in the real order, with copy taken from the live UI. A demo that walks a flow the product doesn't have proves nothing, however good it looks.

The palette is the cheap half. The copy is what makes a frame recognisable as your software — t