vid-product-launch

Name: vid-product-launch
Author: Varnan-Tech

21installs59forks

How to install vid-product-launch?

varnan-tech/opendirectory/vid-product-launch

$npx -y skills add Varnan-Tech/opendirectory --skill vid-product-launch

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# vid-product-launch
2
3	Generates a narrative MP4 product launch video from a product description and launch context.
4	Pipeline: HTML/CSS animations → headless Chromium (Playwright, frame-by-frame) → FFmpeg (H.264 MP4).
5	No React. No AI video APIs. No Python. Zero runtime cost beyond Playwright + FFmpeg.
6
7	---
8
9	## Critical Rules (read before every generation)
10
11	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.
12
13	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.
14
15	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.
16
17	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.
18
19	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.
20
21	6. No `animation-delay` on ANY element. Not needed with renderFrame. If you write `animation-delay`, stop — you are using the wrong architecture.
22
23	7. `window.__videoReady = true` only inside `document.fonts.ready.then(...)`. Never set synchronously.
24
25	8. Expose `window.__stopPreview()`. The rAF preview loop races with Playwright's evaluate/screenshot calls. The capture script calls `__stopPreview()` before the frame loop.
26
27	9. Use `t < startMs` (not `t <= startMs`) in scene boundary checks. `t <= 0` at frame 0 makes scene 1 black.
28
29	10. Body = exact pixel dimensions. Width and height are integers. No `%`, `vw/vh`, `rem`.
30
31	11. Read `references/scene-library.md` AND `references/style-presets.md` before generating ANY HTML.
32
33	12. Never dump HTML in chat. Save to file. Show summary only.
34
35	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.
36
37	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.
38
39	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.
40
41	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.
42
43	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.
44
45	---
46
47	## Step 1: Intake
48
49	Required:
50	- `product_name` — the name of the product or feature being launched
51	- `product_description` — 2–3 sentences: what it does, who it's for, key benefit
52
53	Optional parameters and defaults:
54
55	\| Parameter \| Default \| Description \|
56	\|---\|---\|---\|
57	\| tagline \| auto \| 4–6 words — the product's core promise \|
58	\| problem_statement \| auto-inferred \| 1 sentence for tease section (the pain the product solves) \|
59	\| proof_stat \| auto-inferred \| Single metric (e.g. "500+ team

People who liked this also viewed

6 picks

Type

vid-product-launch

21installs59forks

View on GitHub

How to install vid-product-launch?

varnan-tech/opendirectory/vid-product-launch

$npx -y skills add Varnan-Tech/opendirectory --skill vid-product-launch

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# vid-product-launch
2
3	Generates a narrative MP4 product launch video from a product description and launch context.
4	Pipeline: HTML/CSS animations → headless Chromium (Playwright, frame-by-frame) → FFmpeg (H.264 MP4).
5	No React. No AI video APIs. No Python. Zero runtime cost beyond Playwright + FFmpeg.
6
7	---
8
9	## Critical Rules (read before every generation)
10
11	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.
12
13	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.
14
15	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.
16
17	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.
18
19	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.
20
21	6. No `animation-delay` on ANY element. Not needed with renderFrame. If you write `animation-delay`, stop — you are using the wrong architecture.
22
23	7. `window.__videoReady = true` only inside `document.fonts.ready.then(...)`. Never set synchronously.
24
25	8. Expose `window.__stopPreview()`. The rAF preview loop races with Playwright's evaluate/screenshot calls. The capture script calls `__stopPreview()` before the frame loop.
26
27	9. Use `t < startMs` (not `t <= startMs`) in scene boundary checks. `t <= 0` at frame 0 makes scene 1 black.
28
29	10. Body = exact pixel dimensions. Width and height are integers. No `%`, `vw/vh`, `rem`.
30
31	11. Read `references/scene-library.md` AND `references/style-presets.md` before generating ANY HTML.
32
33	12. Never dump HTML in chat. Save to file. Show summary only.
34
35	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.
36
37	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.
38
39	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.
40
41	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.
42
43	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.
44
45	---
46
47	## Step 1: Intake
48
49	Required:
50	- `product_name` — the name of the product or feature being launched
51	- `product_description` — 2–3 sentences: what it does, who it's for, key benefit
52
53	Optional parameters and defaults:
54
55	\| Parameter \| Default \| Description \|
56	\|---\|---\|---\|
57	\| tagline \| auto \| 4–6 words — the product's core promise \|
58	\| problem_statement \| auto-inferred \| 1 sentence for tease section (the pain the product solves) \|
59	\| proof_stat \| auto-inferred \| Single metric (e.g. "500+ team

People who liked this also viewed

6 picks

Type