vid-sizzle-reel

vid-sizzle-reel

ブランドアセットと主要メッセージから、ハイエネルギーなシズルリールまたはハイプ動画を生成します。 パイプライン：HyperFrames HTML コンポジション（GSAP タイムライン）→ ヘッドレス Chromium → FFmpeg H.264 MP4。 Runway も Pika も AI 動画 API も使用しません。Node.js と FFmpeg 以外の実行コストはゼロです。

vid-product-launch との違い：

• vid-product-launch は物語を描きます。心に響くリビールが1つ、5つのセクション、緊張感のある展開があります
• vid-sizzle-reel はエネルギーと高揚感を生み出します。テンポの速いカット、音楽優先、単一のストーリーの節目はありません

---

重要なルール（生成の前に毎回お読みください）

1. 主要メッセージは自分で作成するか、ユーザーに作成を依頼してください。 これらは画面に表示する正確なフレーズです。「AI will figure it out」では中身のない文章になります。切れ味のある3〜5行が、シズルリールのコンテンツ全体です。

2. ブランド名を表示するのは Land セクションのみです。 Cold Open と Build では、ブランド名を出さずに緊張感を高めます。Land セクションが報酬となります。

3. HTMLを書く前に、スクリプトの先頭にコメントでリズムパターンを宣言してください。 形式：// RHYTHM: flash-sequence | Cold[0-5s]: stat | Build[5-40s]: msg(1.5s)|flash|... | Peak[40-55s]: ... | Land[55-60s]: logo+CTA。タイミングを決める際は必ずこの宣言を確認してください。

4. まず CSS で最終状態のレイアウトを作り、GSAP はまだ使わないでください。 各要素が最もよく見える状態で静的 CSS に配置します。その後、gsap.from() で登場アニメーションを、gsap.to() で退出アニメーションを追加します。アニメーション開始時の状態に配置してはいけません。

5. 時間指定されたすべての要素に class="clip" を指定してください。 HyperFrames で必須です。指定しないと、プレーヤーがその要素を認識できません。

6. すべてのクリップに data-start、data-duration、data-track-index を指定してください。 例外はありません。同じトラックのクリップは重ねられません。異なるトラックインデックスを使用してください。

7. Math.random() は使用しないでください。 HyperFrames では決定論的なコンポジションが必要です。疑似乱数値には、シード付き PRNG（mulberry32）を使用してください。

8. すべての GSAP タイムラインは { paused: true } で開始し、window.__timelines["comp-id"] に登録してください。 再生は HyperFrames プレーヤーが制御します。tl.play() を呼び出してはいけません。

9. .scene-content コンテナーに position: absolute を指定してはいけません。 width:100%; height:100%; padding:Npx; display:flex を使用してください。position:absolute は装飾要素のみに使用します。

10. 音楽には data-track-index を指定した独立した <audio> 要素を使用してください。 動画は muted playsinline にする必要があります。<video> 要素に音声を入れてはいけません。

11. HTML を生成する前に、references/cut-patterns.md と references/tone-presets.md の両方を読んでください。

12. HTML をチャットに貼り付けてはいけません。 ファイルに保存してください。表示するのは概要のみです。

---

ステップ 1：情報の確認

必須：

• key_messages — 画面に表示する、印象的な3〜5行（ユーザーが作成する必要があります）

任意のパラメーターとデフォルト値：

パラメーター	デフォルト値	説明
brand_assets	none	ロゴの URL／パス、ブランドカラー（hex）、主要なスクリーンショット
tone	energetic	energetic / cinematic / emotional / professional
music	none	ファイルパス、または BPM／ジャンル文字列（例："128bpm electronic"）
duration	60	30 / 60 / 90 秒
aspect_ratio	9:16	9:16 (1080x1920) / 16:9 (1920x1080)
cut_style	auto	fast (1-2s) / cinematic (3-5s) — auto は tone から導出
end_card	auto	Land セクション用のロゴ + タグライン + CTA URL

cut_style の自動デフォルト：energetic → fast、professional → fast（2s）、cinematic → cinematic、emotional → mixed

key_messages が指定されていない場合は、以下をそのまま尋ねてください：

「シズルリールを生成するには、主要メッセージが必要です。画面に表示する正確なフレーズを、印象的なものから3〜5行教えてください。動画のために作成する内容の中で、最も重要なものです。

例：「500以上のグロースチームが導入」／「数日から数分へ」／「Claude、Codex、Gemini に対応」

こちらもあると便利です：トーン（energetic/cinematic/emotional/professional）、長さ（30/60/90s）、ブランドカラーやロゴ URL。」

key_messages が指定されている場合は、すぐにステップ 2 に進んでください。

---

ステップ 2：HyperFrames をインストールする

HyperFrames のスキルをインストールします（初回のみ。すでにインストール済みの場合はスキップしてください）。

npx skills add heygen-com/hyperframes

環境を確認します。

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

プロジェクトのひな形を作成します。

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

Slug：end_card のブランド名、または最初の key_message からケバブケースで作成します。最大 25 文字です。

---

ステップ 3：内部アーキテクチャ（ユーザーには表示しない）

1. duration と cut_style からカットポイントのタイミングを導き出します。

セクション	30s	60s	90s
コールドオープン	0-5s	0-5s	0-8s
ビルド	5-25s	5-40s	8-65s
ピーク	25-28s	40-55s	65-80s
ランド	28-30s	55-60s	80-90s

すべての境界をミリ秒に変換します。cut_style に基づいてシーンごとの長さを計算します。

• fast：メッセージごとに 1.2s-1.8s（デフォルトは 1.5s）
• cinematic：メッセージごとに 3.5s-5.0s（デフォルトは 4.0s）
• mixed：セクションのエネルギーに応じて 2.0s-4.0s の範囲で変化

2. key_messages をシーンに割り当てます。

• コールドオープン（1 シーン）：インパクトのある統計情報または問いかけを 1 つ。ブランド名は使用せず、興味を引きます
• ビルド：key_message ごとに 1 シーン
• ピーク：最も強いメッセージを 2 倍のスケールで繰り返すか、メッセージ 2 つを高速フラッシュで組み合わせます
• ランド：ブランド名 + タグライン + CTA URL

3. 音楽が指定されている場合は、ビート同期を検出します。

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

利用できない場合は、BPM から計算します：beat_ms = 60000 / BPM。2 拍ごとにカットを合わせます。

4. トーンプリセットを選択します — CSS トークンについては references/tone-presets.md を読みます。

5. リズムパターンを宣言します — スクリプトの先頭にコメントを記述します。

// 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

6. ピクセル寸法を決定します。

• 9:16 → W=1080, H=1920（デフォルト — Instagram Reels、TikTok、YouTube Shorts）
• 16:9 → W=1920, H=1080

---

ステップ 4：HyperFrames HTML コンポジション

コードを書く前に、references/cut-patterns.md と HyperFrames スキル（/hyperframes）を読みます。

必須の HTML 骨組み：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
[font CDN link from tone preset]
<style>
:root {
  [all CSS tokens from tone preset]
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
</style>
</head>
<body>
<div
  data-composition-id="sizzle-[slug]"
  data-width="[W]"
  data-height="[H]"
  style="position:relative;width:[W]px;height:[H]px;overflow:hidden;background:var(--bg)"
>

  [if cut-flash: true]
  <div id="cut-flash"
    style="position:absolute;inset:0;background:var(--cut-flash-bg);opacity:0;pointer-events:none;z-index:200"></div>
  [end if]

  [if film-grain: true]
  <canvas id="grain-overlay"
    width="240" height="135"
    style="position:absolute;inset:0;width:[W]px;height:[H]px;pointer-events:none;opacity:0.022;mix-blend-mode:overlay;z-index:50"></canvas>
  [end if]

  [if vignette: true]
  <div id="vignette-overlay"
    style="position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,0.65) 100%);pointer-events:none;z-index:51"></div>
  [end if]

  
  <div id="scene-cold"
    class="clip"
    data-start="0"
    data-duration="5"
    data-track-index="0"
    style="position:absolute;inset:0;opacity:0"
  >
    <div class="scene-content" style="width:100%;height:100%;padding:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box">
      [cold open content — one stat or impact phrase, no brand name]
    </div>
  </div>

  [one div per Build scene, data-start increments by cut duration]
  [Peak scene(s)]
  [Land scene — brand name + tagline + CTA]

  [if music provided]
  <audio id="music"
    class="clip"
    data-start="0"
    data-duration="[total_duration]"
    data-track-index="10"
    data-volume="0.85"
    src="[music_path]"
  ></audio>
  [end if]

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
  <script>
  // ── RHYTHM DECLARATION ──────────────────────────────────────────────────────
  // RHYTHM: [flash-sequence | cinematic-hold | beat-sync | mixed]
  // Cold Open [0-Nms]: ...
  // Build [N-Nms]: ...
  // Peak [N-Nms]: ...
  // Land [N-Nms]: ...

  // ── SEEDED PRNG (for grain only — no other random values) ───────────────────
  function mulberry32(seed) {
    return function() {
      seed |= 0; seed = seed + 0x6D2B79F5 | 0;
      let t = Math.imul(seed ^ seed >>> 15, 1 | seed);
      t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
      return ((t ^ t >>> 14) >>> 0) / 4294967296;
    };
  }

  [if film-grain: true]
  // ── FILM GRAIN (cinematic/emotional only) ───────────────────────────────────
  const grainCanvas = document.getElementById('grain-overlay');
  const grainCtx = grainCanvas ? grainCanvas.getContext('2d') : null;
  // Grain updated by GSAP ticker (not per-frame capture — HyperFrames handles this)
  [end if]

  // ── GSAP TIMELINE ───────────────────────────────────────────────────────────
  const tl = gsap.timeline({ paused: true });

  // ── COLD OPEN ───────────────────────────────────────────────────────────────
  [cold open entrance and exit tweens — see cut-patterns.md for exact pattern]

  // ── BUILD SECTION ───────────────────────────────────────────────────────────
  [per-message tweens — flash-sequence or cinematic-hold from cut-patterns.md]

  // ── PEAK SECTION ─────────────────────────────────────────────────────────────
  [peak tweens — same pattern as build but tighter timing]

  // ── LAND SECTION ─────────────────────────────────────────────────────────────
  [land entrances — logo, tagline, CTA. No exit — holds to end]

  // ── TIMELINE REGISTRATION ────────────────────────────────────────────────────
  window.__timelines = window.__timelines || {};
  window.__timelines["sizzle-[slug]"] = tl;
  </script>
</div>
</body>
</html>

デザイン品質のルール：

• コールドオープンの統計情報：16:9 はフォントサイズ 160px 以上、9:16 は 100px 以上
• キーメッセージ：フォントサイズ 80px 以上。一目で読めること
• ランドセクションのブランド名：16:9 は 120px 以上
• すべての色にプリセットのトークン変数を使用します。canvas の fillStyle 内のリテラルな var(--accent) のみ、例外として自由な hex 値を使用できます
• scene-content では常に padding + flex を使用し、コンテンツコンテナに position:absolute を使用しないでください
• data-start を持つすべての要素に class="clip" を指定します

---

ステップ 5：セルフ QA（ステップ 6 の前にすべての失敗を修正）

コンテンツ：

• key_messages — 各フレーズが重複せず、正確に 1 回ずつ登場する
• ブランド名がランドセクションのみに登場する（コールドオープン、ビルド、ピークには登場しない）
• コールドオープンにはブランド名も製品名も含めず、統計情報またはインパクトのあるフレーズのみを使用する
• ランドセクションにブランド名 + タグライン + CTA URL がある（最低 3 要素）
• 最終フレームに end_card の CTA URL がある

HyperFrames の仕様：

• data-start を持つすべての要素に class="clip" がある
• すべてのクリップに data-start、data-duration、data-track-index がある
• ルートのコンポジション div に data-composition-id がある
• window.__timelines["sizzle-[slug]"] = tl が登録されている
• すべてのタイムラインが { paused: true } で開始する
• Math.random() を使用しない — シード付き PRNG のみ使用する
• tl.play() や tl.resume() の呼び出しがない

GSAP / レイアウト：

• すべての登場に gsap.from() を使用する（画面外から CSS の位置へ）
• すべての退場に gsap.to() を使用する（CSS の位置から画面外へ）
• .scene-content コンテナに position:absolute を使用しない
• スクリプトの先頭のコメントでリズムパターンを宣言する

カットのタイミング：

• fast トーン：カットの平均時間が 2.0s 以下
• cinematic トーン：カットの平均時間が 3.0s 以上
• energetic トーンでは、すべてのカット境界でカットフラッシュが発生する（60ms、opacity 0→1→0）
• 同じトラック上のクリップは重ならない（すべての data-track-index グループを確認）

SFX：

• window.__sfxTimeline が存在し、タイムライン登録より前に配置されている
• 各キーメッセージに word-hit イベントがある
• ビルドからピークへの遷移境界に whoosh がある
• ランド開始時に cta-chime がある
• 500ms より前に SFX が再生されない

---

ステップ 6：Lint、レンダリング、出力

npx hyperframes lint
npx hyperframes inspect --json

すべての lint エラーを修正します。すべての inspect エラー（テキストのはみ出し、コンテナからのクリップの逸脱）を修正してから、レンダリングします。

npx hyperframes render --output sizzle/[slug]/sizzle-reel.mp4

出力：

## Sizzle Reel: [brand name from end_card]
Tone: [tone] | Duration: [N]s | Cut style: [cut_style] | Aspect: [ratio]
Rhythm: [declared pattern]

Sections
  Cold Open [0-Ns]:  [impact stat or phrase]
  Build     [N-Ns]:  [N key messages listed]
  Peak      [N-Ns]:  [strongest message at max scale]
  Land      [N-Ns]:  [brand name] + "[tagline]" + [CTA URL]

Files
  Source: sizzle/[slug]/index.html
  Output: sizzle/[slug]/sizzle-reel.mp4

---

SFX タイムライン（すべてのコンポジションに埋め込みます）

vid-product-launch と同じ、FFmpeg で合成する SFX システムです。GSAP タイムラインの登録直前に window.__sfxTimeline を配置します。

シズルリールの SFX タイプのリファレンス：

タイプ	サウンド	長さ	配置
word-hit	サブベースのパンチ（50Hz）＋トランジェントクリック（2.2kHz）＋ノイズバースト	180ms	各 key_message シーンの開始時に1回
whoosh	2バンドのノイズスイープ（1.1kHzのボディ＋4〜8kHzのエアー）	700ms	Build → Peak の境界
cta-chime	イ長調のコード（440+554+659+880Hz）＋エコーのベルシマー	1.2s	Land の開始と正確に一致

window.__sfxTimeline = [
  // one word-hit per key_message (computed from scene start times)
  { ms: MSG_1_START_MS,           sfx: 'word-hit',   vol: 0.50 },
  { ms: MSG_2_START_MS,           sfx: 'word-hit',   vol: 0.50 },
  { ms: MSG_3_START_MS,           sfx: 'word-hit',   vol: 0.50 },
  // ... repeat for each message
  { ms: PEAK_START_MS - 700,      sfx: 'whoosh',     vol: 0.55 },
  { ms: LAND_START_MS,            sfx: 'cta-chime',  vol: 0.65 },
];

すべての ms 値は、宣言済みのセクションタイミング定数から計算します。ハードコードしないでください。

---

プロンプトのヒント（ユーザーがガイダンスを求めた場合に表示）

「キーとなるメッセージはご自身で書いてください。これが動画のコンテンツ全体です。曖昧な10行より、鋭い3行がいつでも勝ります。」

「ビジュアルを選ぶ前に、音楽を選んでください。BPM がカットのスタイルを決めます。カットのスタイルが、すべてのタイミングを決めます。」

「コールドオープンは数字を1つ。文章でも、タグラインでもなく、具体的で意外性のある数字を1つ。これで5秒間の注目を集められます。」

「Land セクションはクレジットページではありません。ロゴ＋1行＋URLを1つ。それ以上は CTA の効果を薄めます。」

「チャンネルに合わせてトーンを選びましょう。ソーシャルや Product Hunt 向けにはエネルギッシュに。プレミアムな B2C や投資家向け資料にはシネマティックに。エンタープライズ向けカンファレンスにはプロフェッショナルに。クラウドファンディングには感情に訴えるトーンに。」

良い例：

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.

悪い例：

hype video for our company