vid-sizzle-reel

Name: vid-sizzle-reel
Author: Varnan-Tech

20installs59forks

How to install vid-sizzle-reel?

varnan-tech/opendirectory/vid-sizzle-reel

$npx -y skills add Varnan-Tech/opendirectory --skill vid-sizzle-reel

Installs into the current project.

Summary

Generates a high-energy sizzle reel or hype video (MP4) from brand assets and key messages. Fast-paced montage format with dynamic cuts, bold text overlays, and optional music. 4-section structure: Cold Open, Build, Peak, Land. 4 tone presets. Beat-sync cuts when music is provide

Files · 1

View on GitHub

SKILL.md

1	# vid-sizzle-reel
2
3	Generates a high-energy sizzle reel or hype video from brand assets and key messages.
4	Pipeline: HyperFrames HTML composition (GSAP timelines) → headless Chromium → FFmpeg H.264 MP4.
5	No Runway. No Pika. No AI video APIs. Zero runtime cost beyond Node.js + FFmpeg.
6
7	Differentiation from `vid-product-launch`:
8	- `vid-product-launch` tells a narrative story — one earned reveal, five sections, tension arc
9	- `vid-sizzle-reel` creates energy and excitement — fast cuts, music-first, no single story beat
10
11	---
12
13	## Critical Rules (read before every generation)
14
15	1. Write the key messages yourself — or ask the user to write them. These are the exact phrases that appear on screen. "AI will figure it out" produces filler. 3-5 sharp lines is the entire content of a sizzle reel.
16
17	2. Brand name appears ONLY in the Land section. Cold Open and Build create tension without naming the brand. The Land section is the payoff.
18
19	3. Declare the rhythm pattern in a comment at the top of the script before writing any HTML. Format: `// RHYTHM: flash-sequence \| Cold[0-5s]: stat \| Build[5-40s]: msg(1.5s)\|flash\|... \| Peak[40-55s]: ... \| Land[55-60s]: logo+CTA`. Every timing decision checks against this.
20
21	4. Build end-state layout in CSS first — no GSAP yet. Position every element at its most-visible moment in static CSS. Then add GSAP entrances with `gsap.from()` and exits with `gsap.to()`. Never position at animated start state.
22
23	5. `class="clip"` on every timed element. Required by HyperFrames. Without it, the element is invisible to the player.
24
25	6. `data-start`, `data-duration`, `data-track-index` on every clip. No exceptions. Same-track clips cannot overlap — use different track indices.
26
27	7. No `Math.random()`. HyperFrames requires deterministic compositions. Use seeded PRNG (mulberry32) for any pseudo-random values.
28
29	8. All GSAP timelines start `{ paused: true }` and register to `window.__timelines["comp-id"]`. The HyperFrames player controls playback — never call `tl.play()`.
30
31	9. Never `position: absolute` on `.scene-content` containers. Use `width:100%; height:100%; padding:Npx; display:flex`. Reserve `position:absolute` for decorative elements only.
32
33	10. Music: separate `<audio>` element with `data-track-index`. Video must be `muted playsinline`. Never put audio in a `<video>` element.
34
35	11. Read `references/cut-patterns.md` AND `references/tone-presets.md` before generating any HTML.
36
37	12. Never dump HTML in chat. Save to file. Show summary only.
38
39	---
40
41	## Step 1: Intake
42
43	Required:
44	- `key_messages` — 3-5 punchy lines to flash on screen (user must write these)
45
46	Optional parameters and defaults:
47
48	\| Parameter \| Default \| Description \|
49	\|---\|---\|---\|
50	\| brand_assets \| none \| Logo URL/path, brand colors (hex), key screenshots \|
51	\| tone \| energetic \| energetic / cinematic / emotional / professional \|
52	\| music \| none \| File path, or BPM/genre string (e.g. "128bpm electronic") \|
53	\| duration \| 60 \| 30 / 60 / 90 seconds \|
54	\| aspect_ratio \| 9:16 \| 9:16 (1080x1920) / 16:9 (1920x1080) \|
55	\| cut_style \| auto \| fast (1-2s) / cinematic (3-5s) — auto derives from tone \|
56	\| end_card \| auto \| Logo + tagline + CTA URL for Land section \|
57
58	`cut_style` auto-defaults: energetic → `fast`; professional → `fast` (2s); cinematic → `cinematic`; emotional → `mixed`
59
60	If `key_messages` is missing, ask exactly:
61
62	> "To generate the sizzle reel, I need your key messages — the exact phrases that will flash on screen. Give me 3-5 punchy lines. These are the most important thing you're writing for this video.
63	>
64	> Examples: 'Used by 500+ growth teams' / 'From days to minutes' / 'Works with Claude, Codex, Gemini'
65	>
66	> Also useful: tone (energetic/cinematic/emotional/professional), duration (30/60/90s), any brand colors or logo URL."
67
68	If key_messages are present → proceed to Step 2 immediately.
69
70	---
71
72	## Step 2: Install HyperFrames
73
74	Install HyperFrames skills (first time only — skip if already installed):
75
76	```bash
77	npx skills add heygen-com/hyperframes
78	```
79
80	Verify environment:
81	```bash
82	node --version # must be >= 22
83	ffmpeg -version # must be present
84	```
85
86	Scaffold the project:
87	```bash
88	npx hyperframes init sizzle-[slug] --example kinetic-type --non-interactive
89	cd sizzle-[slug]
90	```
91
92	Slug: kebab-case from end_card brand name or first key_message, max 25 chars.
93
94	--

People who liked this also viewed

6 picks

Type

vid-sizzle-reel

20installs59forks

View on GitHub

How to install vid-sizzle-reel?

varnan-tech/opendirectory/vid-sizzle-reel

$npx -y skills add Varnan-Tech/opendirectory --skill vid-sizzle-reel

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# vid-sizzle-reel
2
3	Generates a high-energy sizzle reel or hype video from brand assets and key messages.
4	Pipeline: HyperFrames HTML composition (GSAP timelines) → headless Chromium → FFmpeg H.264 MP4.
5	No Runway. No Pika. No AI video APIs. Zero runtime cost beyond Node.js + FFmpeg.
6
7	Differentiation from `vid-product-launch`:
8	- `vid-product-launch` tells a narrative story — one earned reveal, five sections, tension arc
9	- `vid-sizzle-reel` creates energy and excitement — fast cuts, music-first, no single story beat
10
11	---
12
13	## Critical Rules (read before every generation)
14
15	1. Write the key messages yourself — or ask the user to write them. These are the exact phrases that appear on screen. "AI will figure it out" produces filler. 3-5 sharp lines is the entire content of a sizzle reel.
16
17	2. Brand name appears ONLY in the Land section. Cold Open and Build create tension without naming the brand. The Land section is the payoff.
18
19	3. Declare the rhythm pattern in a comment at the top of the script before writing any HTML. Format: `// RHYTHM: flash-sequence \| Cold[0-5s]: stat \| Build[5-40s]: msg(1.5s)\|flash\|... \| Peak[40-55s]: ... \| Land[55-60s]: logo+CTA`. Every timing decision checks against this.
20
21	4. Build end-state layout in CSS first — no GSAP yet. Position every element at its most-visible moment in static CSS. Then add GSAP entrances with `gsap.from()` and exits with `gsap.to()`. Never position at animated start state.
22
23	5. `class="clip"` on every timed element. Required by HyperFrames. Without it, the element is invisible to the player.
24
25	6. `data-start`, `data-duration`, `data-track-index` on every clip. No exceptions. Same-track clips cannot overlap — use different track indices.
26
27	7. No `Math.random()`. HyperFrames requires deterministic compositions. Use seeded PRNG (mulberry32) for any pseudo-random values.
28
29	8. All GSAP timelines start `{ paused: true }` and register to `window.__timelines["comp-id"]`. The HyperFrames player controls playback — never call `tl.play()`.
30
31	9. Never `position: absolute` on `.scene-content` containers. Use `width:100%; height:100%; padding:Npx; display:flex`. Reserve `position:absolute` for decorative elements only.
32
33	10. Music: separate `<audio>` element with `data-track-index`. Video must be `muted playsinline`. Never put audio in a `<video>` element.
34
35	11. Read `references/cut-patterns.md` AND `references/tone-presets.md` before generating any HTML.
36
37	12. Never dump HTML in chat. Save to file. Show summary only.
38
39	---
40
41	## Step 1: Intake
42
43	Required:
44	- `key_messages` — 3-5 punchy lines to flash on screen (user must write these)
45
46	Optional parameters and defaults:
47
48	\| Parameter \| Default \| Description \|
49	\|---\|---\|---\|
50	\| brand_assets \| none \| Logo URL/path, brand colors (hex), key screenshots \|
51	\| tone \| energetic \| energetic / cinematic / emotional / professional \|
52	\| music \| none \| File path, or BPM/genre string (e.g. "128bpm electronic") \|
53	\| duration \| 60 \| 30 / 60 / 90 seconds \|
54	\| aspect_ratio \| 9:16 \| 9:16 (1080x1920) / 16:9 (1920x1080) \|
55	\| cut_style \| auto \| fast (1-2s) / cinematic (3-5s) — auto derives from tone \|
56	\| end_card \| auto \| Logo + tagline + CTA URL for Land section \|
57
58	`cut_style` auto-defaults: energetic → `fast`; professional → `fast` (2s); cinematic → `cinematic`; emotional → `mixed`
59
60	If `key_messages` is missing, ask exactly:
61
62	> "To generate the sizzle reel, I need your key messages — the exact phrases that will flash on screen. Give me 3-5 punchy lines. These are the most important thing you're writing for this video.
63	>
64	> Examples: 'Used by 500+ growth teams' / 'From days to minutes' / 'Works with Claude, Codex, Gemini'
65	>
66	> Also useful: tone (energetic/cinematic/emotional/professional), duration (30/60/90s), any brand colors or logo URL."
67
68	If key_messages are present → proceed to Step 2 immediately.
69
70	---
71
72	## Step 2: Install HyperFrames
73
74	Install HyperFrames skills (first time only — skip if already installed):
75
76	```bash
77	npx skills add heygen-com/hyperframes
78	```
79
80	Verify environment:
81	```bash
82	node --version # must be >= 22
83	ffmpeg -version # must be present
84	```
85
86	Scaffold the project:
87	```bash
88	npx hyperframes init sizzle-[slug] --example kinetic-type --non-interactive
89	cd sizzle-[slug]
90	```
91
92	Slug: kebab-case from end_card brand name or first key_message, max 25 chars.
93
94	--

People who liked this also viewed

6 picks

Type