---
name: Product Demo
slug: product-demo
category: Automation
description: Product Demo creates polished app demo videos with smooth cursor movement, zooms, step captions, and a brand end card. Use it when you need a walkthrough clip or product demo recording for an app.
github: "https://github.com/ucsandman/marketing-studio/tree/main/skills/product-demo"
language: JavaScript
stars: 225
forks: 31
install: "npx degit https://github.com/ucsandman/marketing-studio/tree/main/skills/product-demo ~/.claude/skills/product-demo"
installs_to: ~/.claude/skills/product-demo
source_path: skills/product-demo/SKILL.md
collection_size: 15
category_size: 1754
collection_url: "https://dirskills.com/collections/ucsandman/marketing-studio"
added: 2026-09-03T06:05:20.399Z
last_synced: 2026-09-03T06:05:20.399Z
canonical_url: "https://dirskills.com/skills/product-demo"
---

# Product Demo

Product Demo creates polished app demo videos with smooth cursor movement, zooms, step captions, and a brand end card. Use it when you need a walkthrough clip or product demo recording for an app.

**Install:**

```bash
npx degit https://github.com/ucsandman/marketing-studio/tree/main/skills/product-demo ~/.claude/skills/product-demo
```

## README

# Product Demo

**REQUIRED BACKGROUND:** marketing-studio skill. Work in `${CLAUDE_SKILL_DIR}/../..`.

Produces: `out/<brand>/demo.mp4` — real app footage with synthetic smooth cursor,
focus-driven camera zooms, and step captions, plus a brand end card.

## Recipe

1. Toolchain + brand check per marketing-studio. The product's app must be RUNNING
   (ask the user to start it; never start their stack yourself).
2. Capture script: `feeders/capture/record-<brand>-demo.mjs`. For a new product copy
   `record-noban-demo.mjs`: viewport wide enough for the app, `deviceScaleFactor: 2`,
   proven ready-locators per view, a step caption per view. Read the PLAYBOOK's
   capture gotchas FIRST — especially: camera focus rects are MEASURED from raw
   footage frames, never derived from click points, and must end before any app-side
   clipped edge.
3. Run the capture; verify `capture OK` + the props JSON it writes.
4. Measure/tune focus rects: extract raw frames
   (`npx remotion ffmpeg -ss <t> -i studio/public/<brand>/demo.webm -frames:v 1 f.png`),
   Read them, set focus {x,y,w,h} centers/sizes in the capture script, re-capture (~20s).
5. Proof stills of the `ProductDemo` composition at one frame per view; check camera
   framing, cursor plausibility, captions, brightness.
6. Render, deliver per marketing-studio. Known accepted aesthetic: cursor may leave
   frame during zoom holds (see PLAYBOOK for the redline options if the user objects).