# Saas Product Demo Video > Produce a 20-45s SaaS product demo video in Remotion. Use whenever the user wants to make a product film, marketing reel, explainer, launch video, or LinkedIn/Instagram video of their app - including requests like "make a video of my product", "remotion video", "product demo reel", "launch film", "vertical reel", "9:16 ad", "explainer", or whenever screenshots + a soundtrack + brand colors are be… - **Type:** Skill - **Install:** `agentstack add skill-noamdorr-saas-product-demo-video-saas-product-demo-video` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [noamdorr](https://agentstack.voostack.com/s/noamdorr) - **Installs:** 0 - **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [noamdorr](https://github.com/noamdorr) - **Source:** https://github.com/noamdorr/saas-product-demo-video/tree/main/saas-product-demo-video - **Website:** https://github.com/noamdorr/saas-product-demo-video/releases/latest ## Install ```sh agentstack add skill-noamdorr-saas-product-demo-video-saas-product-demo-video ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # SaaS Product Demo Video End-to-end workflow for shipping a beat-synced SaaS product film in Remotion. Covers silent cinematic films, beat-locked horizontal demos, vertical reels, and films with collage b-roll layers. The skill is opinionated about three things: **assets**, **vibe**, **beats**. Skip any one and you produce a generic Canva-style motion graphics reel that looks like every other SaaS demo. The discipline is what makes the difference. These are *strong recommendations* rather than hard rules. Most productions follow them; some break them with intent (e.g. voice-over-driven films where beat-sync would fight the VO). When you break a rule, do it knowingly. --- ## Prerequisites Before starting, verify these are in place. The first one is genuinely required; the others are strong recommendations with documented fallbacks. 1. **Remotion installed** (required). `@remotion/cli` 4.0.x + `@remotion/google-fonts` + React 19. See `references/project-scaffold.md` for the exact minimal `package.json` / `tsconfig.json` / `remotion.config.ts` - never run `npx create-video` inside an existing git repo (it blocks on an arrow-key prompt). 2. **Super Powers plugin (strongly recommended, not required).** When available, this skill orchestrates `superpowers:using-superpowers`, `superpowers:brainstorming` (with visual companion), `superpowers:writing-plans`, and `superpowers:subagent-driven-development`. They give you HTML mockups in the browser for layout decisions, formal plan documents, and the implementer + reviewer subagent loop. **If superpowers isn't installed**, the skill still works - the workflow becomes more conversational and a bit slower. Brainstorming becomes inline dialogue (no browser companion); plans are written directly in the chat; scenes are implemented inline rather than via dispatched subagents. The three pillars (assets / vibe / beats) plus b-roll, schematic UI, click positioning, writing style, and the scripts in `scripts/` all work the same. Don't decline the work because of a missing plugin - adapt and proceed. 3. **Python 3 + librosa available.** Beat detection runs `scripts/detect-beats.py` which imports `librosa`. If not installed, run `pip install --break-system-packages librosa numpy soundfile` and tell the user - don't do it silently. 4. **For reference-video analysis (Pillar 2):** the skill supports three paths in priority order. Use the highest one that's available - see `references/reference-video-vibe.md` for full detection logic. 1. **`gemini` CLI on PATH** (official Google CLI, or community wrappers like `gemini-yt`). Run with the prompt + YouTube URL as args. 2. **`GEMINI_API_KEY` set** in env or `.env`. Use the skill's curl wrapper at `scripts/analyze-reference-video.sh`. 3. **None of the above** - fall back to manual Google AI Studio copy-paste. Awkward but always works; quality is comparable. Run `references/prereq-check.md` as your first move in a new session. --- ## The three pillars These are the high-leverage activities. Skipping one to "save time" almost always costs more time downstream. ### Pillar 1 - Asset intake onboarding Before anything else, run the structured questionnaire in `assets/prompt-templates/asset-intake-questionnaire.md`. It asks for: - Aspect ratio (16:9 horizontal, 9:16 vertical, or both in parallel - see `references/vertical-port.md` if both) - Duration in seconds (20-45s recommended) - Logo - SVG preferred. If PNG-only, capture native dimensions to prevent pixelation when scaled up. - Brand hex colors (primary accent + 3-6 supporting pastels) - Font stack (all must be on Google Fonts) - Copy / script - prefer a user-supplied draft over generating one. If they have no script, see `references/script-development.md`. - Voiceover (optional) - Soundtrack file - required for beat-sync. If user has none, pick from royalty-free stock. Reference `references/asset-intake.md` for the full intake flow including the partial-asset minimum-viable set, naming hygiene on copy-in, and the asset-upscaling pixelation check. ### Pillar 2 - Reference-video vibe workflow Before writing scenes, ask the user for **2-3 YouTube reference videos** whose vibe they want. Then produce a director's breakdown for each. Two paths supported (see `references/reference-video-vibe.md`): - **Automated (preferred when available)** - if the user has a `GEMINI_API_KEY` set, run `scripts/analyze-reference-video.sh ` for each video. Uses Gemini Pro Preview via curl. Takes ~30s per video. Outputs land at `references/gemini-.md`. - **Manual (always works)** - open `aistudio.google.com`, paste the prompt from `scripts/reference-video-prompt.md` along with the YouTube URL, copy the result back into a file. Awkward but produces equally usable output. Use this when the API isn't available. The **directorial verb vocabulary** (push-through, whip-pan, V-cut pull-back, ink-mask, match-cut zoom) is the most load-bearing output - it gives you specific motion primitives to build around. ### Pillar 3 - Soundtrack beat-sync Scene boundaries should land on snares (the rhetorical "drum hit" feel). Internal events (clicks, card landings, counter starts) should land on either kicks or snares within the scene. The pipeline: 1. Run `scripts/detect-beats.py --fps 30 --out beats.json`. Emits BPM, first-kick frame, snare timestamps + frames. 2. Ingest into a single timing constants object (see `assets/code-templates/theme-v2.ts`). Every scene `` pulls from this. 3. After Phase 6 (scenes built), run `scripts/align-internal-events.py` against beats.json + a list of in-scene events to nudge them onto nearest beats within ±6 frames. This is the second-highest-leverage iteration after the initial render - the audience feels off-beat internal events as "rhythm sometimes off" without being able to point at why. 4. Use `isSnare(n)` / `isKick(n)` helpers to assert in dev mode. 5. Run `scripts/check-typing-budget.py` against any TypedText/TypedChars to verify it fits within scene duration. Cuts off-screen typing before it ships. Full math, helpers, internal-event alignment, and the typing-budget check in `references/beat-sync.md`. --- ## Adjacent capabilities - when the basics aren't enough These cover situations beyond the standard "all-motion-graphics, just-record-a-screenshot" SaaS demo. Read the relevant reference when the user's situation needs it. ### Script development - when the user has no script Most users come in with a vague product idea, not a finished screen-by-screen. `references/script-development.md` walks through a structured dialogue flow that produces a 4-act outline + locked screen-by-screen + locked-copy reference page, ready to feed into the spec doc. ### B-roll integration - when the film uses live-action or collage layers If the user has stock footage, collage clips, or any video they want as a backdrop layer, use `references/b-roll-integration.md` and the `BRollLayer` template. B-roll can be a full-opacity backdrop or a low-opacity texture; the primitive handles trim, fade, blend modes, and fps-correct timing. (Previous versions of this skill recommended sending live-action work to Premiere/DaVinci. That's wrong when the b-roll is being used as a *layer* under motion graphics - Remotion handles this well and keeping the production in one tool is a productivity win.) ### Schematic UI fidelity - when the product has no real UI to record If the product is a Chrome extension, an API, or early-stage and there's no real product UI to screenshot, `references/schematic-ui-fidelity.md` covers how to invent schematic UIs that read as polished without infringing on real platforms (LinkedIn, Gmail, Slack). Three reference patterns: profile card, email composer, API panel - code templates in `assets/code-templates/Schematic*.tsx`. ### Click positioning - the #1 iteration churn pain point Cursor clicks missing buttons is the most common user complaint across productions. `references/click-positioning.md` covers three approaches (refs, computed-position constants, debug overlay) - pick one upfront. The cost of getting this wrong is multiple full re-render cycles per scene. ### Writing style - keep AI-tells out of user-facing copy Em-dashes, curly quotes, and certain phrasing tics scream "AI-generated." `references/writing-style.md` is the default style guide with a pre-render grep check that catches these. If the user has their own brand-voice guide, prefer that. --- ## Ideal sequence The full end-to-end flow. See `references/ideal-sequence.md` for the annotated version with rationale. 1. **Gather inputs first, write code last.** Run the asset intake questionnaire. 2. **Develop the script** if the user doesn't have one - `references/script-development.md`. 3. **Produce reference-video breakdowns** - automated via `scripts/analyze-reference-video.sh` or manual via AI Studio. 4. **Detect beats and write the timing constants object.** `scripts/detect-beats.py` → `theme-v2.ts`. Every scene start derives from beats. 5. **Scaffold Remotion manually.** Minimal `package.json` / `tsconfig.json` / `remotion.config.ts`. Never `npx create-video` inside a git repo. 6. **Register per-scene debug compositions in Root.tsx.** Essential speed-up. Scrubbing one 5-second scene is 30x faster than the full master. 7. **Load every font at `Root.tsx` top level** with `subsets: ["latin"]`. 8. **Use hyphens in composition IDs** (`v2-Scene06`, never `v2_Scene06`). 9. **Invoke `superpowers:brainstorming` with visual companion** for style/layout decisions. HTML mockups beat prose every time. 10. **Write the spec doc.** `docs/superpowers/specs/YYYY-MM-DD--design.md`. Include a schematic-UI fidelity section if any are needed. 11. **Self-review the spec, then user-approves it.** No code until green light. 12. **Invoke `superpowers:writing-plans`.** Plan-template hygiene check before dispatching (see `references/project-scaffold.md`). 13. **Build animation primitives first** (TypedText, MaskReveal, PopIn, Cursor, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack as needed). Then schematic UI cards. Then scenes. Then master. 14. **Invoke `superpowers:subagent-driven-development`.** Cap subagent batches at 3-4 files per dispatch - larger batches sometimes run out of context mid-task. See `references/iteration-playbook.md`. 15. **Spot-render Scene 1 alone.** Establish the style. Get user approval before the rest. 16. **Iterate in waves.** Cap each wave at 5-8 fixes. Run the internal-event alignment pass once after the baseline render - that single pass tightens the rhythm noticeably. 17. **Master-render at publish quality.** `--crf=14 --image-format=png` (HD) or `--crf=15 --image-format=png --scale=2` (4K). See `references/render-export.md`. 18. **Spot-check against the beat map at 0.5x speed.** --- ## References index The `references/` directory contains the depth. Load only what you need for the current phase. - `ideal-sequence.md` - the full annotated flow, with rationale - `prereq-check.md` - what to verify before starting - `asset-intake.md` - full intake flow, partial-asset fallback, asset upscaling check, naming hygiene - `script-development.md` - screen-by-screen methodology when the user has no script - `reference-video-vibe.md` - Gemini analysis protocol (API / CLI / AI Studio paths) - `beat-sync.md` - beat-grid math, scene-boundary rule, internal-event alignment, typing-budget check - `project-scaffold.md` - minimal Remotion setup, commit checklist, plan-template hygiene, .gitignore essentials - `animation-patterns.md` - TypedText, MaskReveal, PopIn, ZoomPunch, FloatingElements, plus extensions - `b-roll-integration.md` - `BRollLayer` patterns, opacity/blend treatments, render perf - `schematic-ui-fidelity.md` - designing fake UI that reads as polished - `click-positioning.md` - three approaches to keep cursor clicks landing on the right targets - `writing-style.md` - em-dashes and other AI-tells to avoid in on-screen copy - `cursor-math.md` - hotspot offset, keypoints, scale-ratio transform - `iteration-playbook.md` - wave structure, batch reviews, subagent batching, Studio hot-reload restarts - `render-export.md` - HD/4K render commands, CRF rationale - `gotchas.md` - composition ID underscores, font warnings, italic loading, MaskReveal scale footgun - `vertical-port.md` - 9:16 reel porting discipline ## Assets - `assets/prompt-templates/` - fill-in templates for asset intake, spec docs, beat sheets - `assets/code-templates/` - battle-tested components (theme constants, easings, Cursor, MaskReveal, TypedText, PopIn, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack, SchematicProfileCard, SchematicEmailComposer, SchematicApiPanel, Act2Master, Act2MasterVertical) ## Scripts - `scripts/detect-beats.py` - librosa-powered beat tracking. Emits BPM, first kick, snare/kick frames at target fps. - `scripts/analyze-reference-video.sh` + `scripts/reference-video-prompt.md` - Gemini Pro wrapper for YouTube directorial breakdowns. - `scripts/align-internal-events.py` - beat-align in-scene events within ±tolerance frames. - `scripts/check-typing-budget.py` - verify TypedText/TypedChars fits in scene duration before render. --- ## When the skill should NOT be used - **Existing Remotion project deep iteration.** If the user is 20+ commits into a film and asking for wave N+1 tweaks, don't re-run intake. Load `references/iteration-playbook.md` and `references/beat-sync.md` and go. - **Non-SaaS demos.** Event recap, testimonial montage, tutorial screencast - the beat-sync + product-UI-card patterns don't apply cleanly. - **Documentary or talking-head footage as the subject.** This skill handles b-roll as a *layer* under motion graphics. If live-action is the subject of the film (interviews, unboxing, walkthroughs), use a non-linear editor like Premiere, DaVinci, or Final Cut. - **Voiceover-first videos.** If the script drives pacing, the beat-grid system fights the VO. Skill will fall back to frame-budget mode without beat-sync - tell the user explicitly. --- ## Output contract A successful run produces: - A working Remotion project with a master composition and per-scene debug compositions registered. - `docs/superpowers/specs/YYYY-MM-DD--design.md` (spec) and `docs/superpowers/plans/YYYY-MM-DD-.md` (plan). - `references/gemini-.md` for each reference video (in the user's repo, not this skill's). - `beats.json` + `theme-v2.ts` timing constants wired into scenes (committed). - HD MP4 (1920x1080 or 1080x1920, CRF 14). - Optional 4K MP4 (`--scale=2`, CRF 15). - Thumbnail JPG at an expressive frame. The user should be able to re-render any scene independently, edit a single timing constant to re-flow the whole film, and confidently ship to LinkedIn / Instagram / YouTube Shorts without a second pass. ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [noamdorr](https://github.com/noamdorr) - **Source:** [noamdorr/saas-product-demo-video](https://github.com/noamdorr/saas-product-demo-video) - **License:** MIT - **Homepage:** https://github.com/noamdorr/saas-product-demo-video/releases/latest Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** yes - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** yes - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-noamdorr-saas-product-demo-video-saas-product-demo-video - Seller: https://agentstack.voostack.com/s/noamdorr - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.