SaaS Product Demo Video plugin

---
name: saas-product-demo-video
description: Build, refine or reskin a short SaaS product film in Remotion, cut to the beat of its soundtrack, from the product's real screens, brand and copy. Use when the user wants a product demo, launch video, explainer or social reel of their software made in code; wants an existing product film changed, reskinned or critiqued; or has a product with no interface to record and needs schematic UI. Covers 16:9 and 9:16, b-roll under motion graphics, sound effects and checked renders. Not a live-action editor and not a screencast tool.
license: MIT
compatibility: Needs Node 18+, Python 3 with librosa (and Pillow for the contact sheets), ffmpeg, and a shell; Playwright only for capturing a product's site. Renders locally with Remotion; the scaffold pins its versions. Works in any coding agent that can run commands and read image files.
---

# SaaS product demo video

Build a short product film in Remotion, cut to the beat of its soundtrack, in the product's own brand, from the product's real screens. The same flow covers horizontal demos, vertical reels, films with b-roll layers, products with no interface to record, and a film that already exists and needs a wave of changes.

A generic motion-graphics reel is easy to make and easy to ignore, and so is the AI-made one that owners now recognize on sight. What separates a film from those is gathered before any scene exists: the product's real assets and screens, a look borrowed from reference films the user likes, a timing grid taken from the soundtrack, and one visual argument the film makes. The rest of this skill is craft built on those.

## Start on the right branch

- **A new film.** Intake, look, scaffold, beats, brief, the checkpoint, the build: the flow below, with the reasoning in `references/workflow.md`.
- **An existing film.** Read `docs/video/notes.md` (every "decision" entry first), the brief and the latest handoff, inspect the accepted render and the source separately, and classify the ask before touching anything: a tweak goes behind a switch, a reskin keeps every timing and move, a rebuild gets a storyboard or test beds. `references/iteration-playbook.md`, "Classify the request first". Do not repeat intake or reopen the look for a small fix.
- **Critique or planning only.** Review the render (`references/self-check.md`, `references/taste-review.md`) and return a ranked list; build nothing. Say which evidence each finding rests on: a still, a measurement, or playback, which you cannot do.
- **Narration sets the pace.** The scaffold is music-led. A film cut to a voiceover places its events by hand (`BEAT_SYNCED = false` in the timing file) and the brief says the cuts will not sit on the music; say so before starting.

## Definition of done

- A Remotion project with a master composition and one debug composition per scene; every candidate change behind a switch whose default is the shipped look.
- `docs/video/brief.md`: the inputs, the look, the visual argument in one sentence, the script scene by scene, the assumptions.
- `beats.json` and a timing file that every scene reads its frames from, so changing one beat index re-flows the film.
- An HD MP4 (1920x1080 or 1080x1920), color-tagged, a thumbnail still, and a 4K render on the owner's acceptance that carries the HD's audio.
- Every scene checked by you in rendered stills before the user saw it; the words counted; the owner told what was measured and that nobody has watched it.
- `docs/video/notes.md` with every wave and every decision, and a handoff file when the session ends with work open.
- Optionally four to eight sound effects behind the master's `sfx` prop, measured onto their events, with a `Master-NoSfx` render beside the master so the user picks by ear.

## The flow

1. **Setup.** Check the tools and note what is missing. `references/setup.md`
2. **Intake.** Send the questionnaire as one message and record the answers; capture today's site, not memory. `references/asset-intake.md`, `references/product-ui-from-site.md`
3. **Look and argument.** Break down two or three reference videos into transition verbs, pacing and signature moves; write the one sentence the film argues and the one signature move. `references/reference-video-vibe.md`, `references/creative-direction.md`
4. **Scaffold.** Copy `assets/scaffold/` into the project and install. `references/project-scaffold.md`
5. **Beats.** Run `scripts/detect-beats.py` on the soundtrack, writing `beats.json` over the scaffold's placeholder, and act on its reliability verdict. `references/beat-sync.md`
6. **Brief and first scenes.** Write `docs/video/brief.md`, build scene 1 and the first scene that shows the product, check them in stills, then stop at the checkpoint below.
7. **Full build.** Build the remaining scenes and the master, checking each in stills, counting the words, running the attention pass. Then the sound layer, if the film gets one: `references/sound-effects.md`, before the first fix wave, so every cue sits on a frame that has stopped moving.
8. **Fix waves and ship.** Collect the user's notes in batches, fix behind switches, render with the master's flags, export. A scene the user wants rethought gets two to four directions as test beds with the music, shown side by side and at full size, and the user picks. A wave that rebuilds the story gets a storyboard first (every on-screen string and one line per frame), approved before any code. End a long session with a handoff file. `references/iteration-playbook.md`, `references/render-export.md`, `assets/prompt-templates/handoff.md`

## One checkpoint

Stop for the user's approval exactly once before the full build: when the opening scene and the first product scene are rendered, with the cut between them and the music, and the brief is written. Show that clip and the script from the brief together, and ask three things: is the look right, are the words right, and does it move well with the music.