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".
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Instruções da origem · Visualização somente leitura
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)
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.
Brand name appears ONLY in the Land section. Cold Open and Build create tension without naming the brand. The Land section is the payoff.
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.
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.
class="clip" on every timed element. Required by HyperFrames. Without it, the element is invisible to the player.
data-start, data-duration, data-track-index on every clip. No exceptions. Same-track clips cannot overlap — use different track indices.
No Math.random(). HyperFrames requires deterministic compositions. Use seeded PRNG (mulberry32) for any pseudo-random values.
All GSAP timelines start { paused: true } and register to window.__timelines["comp-id"]. The HyperFrames player controls playback — never call tl.play().
Never position: absolute on .scene-content containers. Use width:100%; height:100%; padding:Npx; display:flex. Reserve position:absolute for decorative elements only.
Music: separate <audio> element with data-track-index. Video must be muted playsinline. Never put audio in a <video> element.
Read references/cut-patterns.md AND references/tone-presets.md before generating any HTML.
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 / BPM. Align cuts to every 2nd beat.
4. Select tone preset — read references/tone-presets.md for CSS tokens.
5. Declare rhythm pattern — write comment at top of script:
// RHYTHM: flash-sequence// Cold Open [0-5000ms]: stat// Build [5000-40000ms]: msg-1(1500ms)|flash|msg-2(1500ms)|flash|msg-3(1500ms)|flash|msg-4(1500ms)|flash|build-accum(10000ms)// Peak [40000-55000ms]: msg-strongest(1200ms)|flash|msg-2nd(1200ms)|flash|HOLD(5600ms)// Land [55000-60000ms]: logo+tagline+cta
Compute all ms values from declared section timing constants. Never hardcode.
Prompt Tips (show when user asks for guidance)
"Write the key messages yourself. They are the entire content of this video. 3 sharp lines beats 10 vague ones every time."
"Choose music before choosing visuals. The BPM determines the cut style. The cut style determines every timing decision."
"Cold open: one number. Not a sentence, not a tagline — one specific, surprising number. It earns 5 seconds of attention."
"The Land section is not a credits page. Logo + one line + one URL. Anything more dilutes the CTA."
"Match tone to channel. Energetic for social and Product Hunt. Cinematic for B2C premium and investor decks. Professional for enterprise conferences. Emotional for crowdfunding."
Good:
Sizzle reel, 60 seconds. Tone: energetic. Key messages: ['AI skills, ready to install' /
'52+ skills across GTM, content, research' / 'Works with Claude, Codex, Gemini' /
'Zero setup. Instant value.']. Music: 128bpm electronic. Cut style: fast.
End card: OpenDirectory + 'AI skills, ready to install' + 'opendirectory.dev'. Aspect: 9:16.
Bad:
hype video for our company
timeline
paused
true
// ── COLD OPEN ───────────────────────────────────────────────────────────────
