/vid-sizzle-reel

name: vid-sizzle-reel
description: '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 provided. Built on HyperFrames (GSAP + headless Chromium + FFmpeg). Trigger when user says "sizzle reel", "hype video", "highlight reel", "launch hype", "conference opener", "event promo video", "investor pitch video", or "brand video montage".'
compatibility: [claude-code, gemini-cli, github-copilot]
author: OpenDirectory
version: 1.0.0

vid-sizzle-reel

Generates a high-energy sizzle reel or hype video from brand assets and key messages. Pipeline: HyperFrames HTML composition (GSAP timelines) → headless Chromium → FFmpeg H.264 MP4. No Runway. No Pika. No AI video APIs. Zero runtime cost beyond Node.js + FFmpeg.

**Differentiation from `vid-product-launch`:**

• `vid-product-launch` tells a narrative story — one earned reveal, five sections, tension arc
• `vid-sizzle-reel` creates energy and excitement — fast cuts, music-first, no single story beat

---

Critical Rules (read before every generation)

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.

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.

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.

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.

5. **`class="clip"` on every timed element.** Required by HyperFrames. Without it, the element is invisible to the player.

6. **`data-start`, `data-duration`, `data-track-index` on every clip.** No exceptions. Same-track clips cannot overlap — use different track indices.

7. **No `Math.random()`.** HyperFrames requires deterministic compositions. Use seeded PRNG (mulberry32) for any pseudo-random values.

8. **All GSAP timelines start `{ paused: true }` and register to `window.__timelines["comp-id"]`.** The HyperFrames player controls playback — never call `tl.play()`.

9. **Never `position: absolute` on `.scene-content` containers.** Use `width:100%; height:100%; padding:Npx; display:flex`. Reserve `position:absolute` for decorative elements only.

10. **Music: separate `<audio>` element with `data-track-index`.** Video must be `muted playsinline`. Never put audio in a `<video>` element.

11. **Read `references/cut-patterns.md` AND `references/tone-presets.md` before generating any HTML.**

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

---

Step 1: Intake

**Required:**

• `key_messages` — 3-5 punchy lines to flash on screen (user must write these)

**Optional parameters and defaults:**

| Parameter | Default | Description | |---|---|---| | brand_assets | none | Logo URL/path, brand colors (hex), key screenshots | | tone | energetic | energetic / cinematic / emotional / professional | | music | none | File path, or BPM/genre string (e.g. "128bpm electronic") | | duration | 60 | 30 / 60 / 90 seconds | | aspect_ratio | 9:16 | 9:16 (1080x1920) / 16:9 (1920x1080) | | cut_style | auto | fast (1-2s) / cinematic (3-5s) — auto derives from tone | | end_card | auto | Logo + tagline + CTA URL for Land section |

`cut_style` auto-defaults: energetic → `fast`; professional → `fast` (2s); cinematic → `cinematic`; emotional → `mixed`

**If `key_messages` is missing, ask exactly:**

> "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. > > Examples: 'Used by 500+ growth teams' / 'From days to minutes' / 'Works with Claude, Codex, Gemini' > > Also useful: tone (energetic/cinematic/emotional/professional), duration (30/60/90s), any brand colors or logo URL."

If key_messages are present → proceed to Step 2 immediately.

---

Step 2: Install HyperFrames

Install HyperFrames skills (first time only — skip if already installed):

npx skills add heygen-com/hyperframes

Verify environment:

node --version   # must be >= 22
ffmpeg -version  # must be present

Scaffold the project:

npx hyperframes init sizzle-[slug] --example kinetic-type --non-interactive
cd sizzle-[slug]

Slug: kebab-case from end_card brand name or first key_message, max 25 chars.

---

Step 3: Internal Architecture (never shown to user)

**1. Derive cut-point timing from `duration` + `cut_style`:**

| Section | 30s | 60s | 90s | |---|---|---|---| | Cold Open | 0-5s | 0-5s | 0-8s | | Build | 5-25s | 5-40s | 8-65s | | Peak | 25-28s | 40-55s | 65-80s | | Land | 28-30s | 55-60s | 80-90s |

Convert every boundary to milliseconds. Calculate per-scene duration from `cut_style`:

• `fast`: 1.2s-1.8s per message (use 1.5s default)
• `cinematic`: 3.5s-5.0s per message (use 4.0s default)
• `mixed`: 2.0s-4.0s varying by section energy

**2. Map key_messages to scenes:**

• Cold Open (1 scene): one impact stat or question — NO brand name, builds intrigue
• Build: one scene per key_message
• Peak: repeat the strongest message at double scale, or combine 2 messages in rapid flash
• Land: brand name + tagline + CTA URL

**3. Detect beat sync if music provided:**

npx hyperframes tts --analyze-beats [music-file]

If unavailable, calculate from BPM: `beat_ms = 60000 / BP