vid-product-launch
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".
npx skills add Varnan-Tech/opendirectory --skill vid-product-launch --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Generates a cinematic product launch video from a product description and launch context. It uses a 5-section narrative (Tease, Build, Reveal, Proof, CTA) rendered as HTML/CSS in a headless Chromium via Playwright, then assembled into an MP4 with FFmpeg. It supports 4 tone presets and durations of 30, 60, or 90 seconds. Activation triggers when the user says a set of phrases related to launching or revealing a product.
How it works
The skill describes a pipeline: HTML/CSS animations rendered frame-by-frame in a headless Chromium environment (via Playwright), then compiled into MP4 using FFmpeg. The HTML structure must follow a specific skeleton and reference external scene/style templates. It requires setting up exact timing constants for each section (TEASE, BUILD, REVEAL, PROOF, CTA) expressed in milliseconds and distributing per-scene timing accordingly. It uses a canvas for film grain, optional overlays (vignette, light-leak), and a dot-grid background on dark scenes. It embeds a window.__sfxTimeline with precise SFX events at millisecond offsets, to synthesize audio effects with FFmpeg instead of external audio files.
When to use it
Use when you need a cinematic product-launch MP4 generated from a textual product description and launch context. It is triggered by specific phrases like "product launch video" or "launch day video" and requires both product_name and product_description to proceed.
What it can touch
The pipeline relies on: HTML/CSS assets from references/scene-library.md and references/style-presets.md; a 16:9 or 9:16 canvas and DOM elements; a grain canvas 240×135; and a JavaScript-driven SFX timeline via window.__sfxTimeline. It uses Playwright for frame rendering and FFmpeg for assembly. It requires the tools claude-code, gemini-cli, and github-copilot as compatibility targets.
Caveats
The skill mandates strict HTML/CSS/JS structure and timing; it does not output raw video until the HTML is rendered and compiled with FFmpeg. It forbids using external video APIs or Python in the pipeline, and it specifies exact pixel dimensions and non-standard canvas sizing for film grain. It requires following the timeline and scene rules precisely, including the teaser dark baseline and the reveal timing to avoid premature product naming. The taglines and proofs are derived or constrained by the rules, not guaranteed to match every input exactly.
# 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 `w
- Critical Rules (read before every generation)
- Step 1: Intake
- Step 2: Internal Architecture (never shown to user)
- Step 3: HTML Generation
- Step 4: Self-QA (fix every failure before Step 5)
- Step 5: Export
- Step 6: Output Summary
- Prompt Tips (show when user asks for guidance)
mkdir -p launch/[slug] open launch/[slug]/product-launch.html bash [skill-root]/scripts/export-video.sh \
What does the vid-product-launch skill do?
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".
How do I install it?
Run `npx skills add Varnan-Tech/opendirectory --skill vid-product-launch --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Varnan-Tech/opendirectory, a repository with 571 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.