/vid-product-launch

name: vid-product-launch
description: Generates a cinematic product launch video (MP4) from a product description and launch context. 5-section narrative arc — Tease, Build, Reveal, Proof, CTA — rendered as HTML/CSS in headless Chromium via Playwright, assembled with FFmpeg. 4 tone presets. 30/60/90 second durations. Trigger when user says "product launch video", "launch video", "product reveal video", "cinematic product video", "product announcement video", or "launch day video".
compatibility: [claude-code, gemini-cli, github-copilot]
author: OpenDirectory
version: 1.2.0

vid-product-launch

Generates a narrative MP4 product launch video from a product description and launch context. Pipeline: HTML/CSS animations → headless Chromium (Playwright, frame-by-frame) → FFmpeg (H.264 MP4). No React. No AI video APIs. No Python. Zero runtime cost beyond Playwright + FFmpeg.

---

Critical Rules (read before every generation)

1. **The tagline is not optional. Do not skip it.** It is the product's entire promise in 4–6 words. If the user did not provide it, derive one from the description — a sharp, active-voice distillation. Never write "[tagline here]" or leave it blank.

2. **The reveal moment must feel earned.** The tease and build sections exist to create tension. If the product name appears in the first 20% of the video, the narrative collapses. Never reveal the product name before the Reveal section.

3. **product_name font size: minimum 120px for 16:9, minimum 80px for 9:16.** The name must be the largest element at the reveal moment. If it isn't dominant, the reveal fails.

4. **One proof stat. Not a list.** If the user provides multiple stats, pick the strongest one. A list of 5 numbers destroys the punch. One oversized number creates it.

5. **Use `window.renderFrame(t)` — no CSS `@keyframes` for scene transitions.** CSS `currentTime` seeking is silently ignored for backward seeks in Chromium. The renderFrame function computes element styles directly from milliseconds. Playwright calls it once per frame.

6. **No `animation-delay` on ANY element.** Not needed with renderFrame. If you write `animation-delay`, stop — you are using the wrong architecture.

7. **`window.__videoReady = true` only inside `document.fonts.ready.then(...)`.** Never set synchronously.

8. **Expose `window.__stopPreview()`.** The rAF preview loop races with Playwright's evaluate/screenshot calls. The capture script calls `__stopPreview()` before the frame loop.

9. **Use `t < startMs` (not `t <= startMs`) in scene boundary checks.** `t <= 0` at frame 0 makes scene 1 black.

10. **Body = exact pixel dimensions.** Width and height are integers. No `%`, `vw/vh`, `rem`.

11. **Read `references/scene-library.md` AND `references/style-presets.md` before generating ANY HTML.**

12. **Never dump HTML in chat.** Save to file. Show summary only.

13. **Film grain canvas MUST be 240×135, not W×H.** Set `width="240" height="135"` on the canvas element, then stretch with `style="width:[W]px;height:[H]px"`. Full-resolution grain at 1920×1080 is 64× slower — 8MB of ImageData per frame — and will make 1800-frame exports take hours.

14. **The tease section MUST be dark (#000 or near-black), regardless of tone.** White backgrounds in the tease section read as demo slides, not product launch videos. The dark-to-light narrative arc (dark tease → dark build → product reveal) is how launch videos create drama. Even the `minimal` and `energetic` presets should use `background: #000` for tease-problem and tension-build scenes.

15. **Each tease word must be its own beat at 200px+ font size.** Word-by-word on a single line is not punchy enough. Each problem word (e.g. "Research." / "Write." / "Outreach." / "Repeat.") gets 1500–1800ms of screen time at `font-size: 200px; font-weight: 900` centered, one at a time. See scene-library.md `tease-words` pattern.

16. **Build section must show content that narrates the problem — not just particles.** Use the `terminal-card` pattern: 3 cards appear sequentially with a typewriter animation showing the manual work being done. Cards have `border: 1px solid rgba(255,255,255,0.07)`, blue dot accent, monospace text. Particles alone for 20 seconds is empty screen time.

17. **Dot-grid CSS background on dark scenes.** Add `background-image: radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 60px 60px;` to build, reveal, proof, and CTA scenes. It costs zero compute and adds depth.

---

Step 1: Intake

**Required:**

• `product_name` — the name of the product or feature being launched
• `product_description` — 2–3 sentences: what it does, who it's for, key benefit

**Optional parameters and defaults:**

| Parameter | Default | Description | |---|---|---| | tagline | auto | 4–6 words — the product's core promise | | problem_statement | auto-inferred | 1 sentence for tease section (the pain the product solves) | | proof_stat | auto-inferred | Single metric (e.g. "500+ teams", "10× faster", "$2M saved") | | cta | auto | URL or action phrase (e.g. "opendirectory.dev", "Join the waitlist") | | launch_date | — | ISO date string (enables countdown-card scene) | | tone | cinematic | cinematic / energetic / minimal / emotional | | duration | 60 | 30 / 60 / 90 (seconds) | | aspect_ratio | 16:9 | 16:9 (1920×1080) / 9:16 (1080×1920) | | letterbox | false | Cinematic 2.35:1 black bars — 16:9 only | | music | — | Path to audio file (mp3/m4a/wav) | | fps | 30 | Frames per second (24, 30, or 60) |

**If `product_name` or `product_description` is missing, ask exactly:**

> "To create the launch video, I need two things: > > 1. **Product name** — what is the product called? > 2. **Product description** — 2–3 sentences: what does it do, who is it for, what is the key benefit? > > Optional: tagline (4–6 words), proof stat (one number), CTA (URL or action phrase), tone (cinematic / energetic / minimal / emotional), duration (30 / 60 / 90s)."

If both are present → proceed