oyi77/1ai-skills — 製品ローンチ動画生成スキル

概要

このスキルは、製品ローンチ動画（ヒーローショット、機能コールアウト、タイミング）をHyperFramesコンポジションとして作成します。新リリースにタイトでブランド化された告知クリップが必要な場合に使用します。提供された製品アセットから最終的なMP4をレンダリングします。

HyperFrames — 製品ローンチ動画

HTMLコンポジションを作成して、HyperFramesが決定論的なMP4にレンダリングする製品ローンチ動画を生成します。エージェントネイティブな動画パイプライン：LLM がHTML（彼らの第一言語）を書き、HyperFramesがヘッドレスChrome + FFmpegでフレーム精度の動画をレンダリングします。

使用するタイミング

• ユーザーが製品ローンチ動画をURL、概要、またはスクリプトから欲しい場合
• ユーザーが製品のビジュアルを使用したサイトツアー/ショーケースを希望する場合
• ユーザーがキネティックキャプションとブランディング付きのソーシャルクリップ（TikTok/Reels/Shorts）を希望する場合
• ユーザーがアニメーションオーバーレイと音楽付きのマーケティング/プロモーション動画を希望する場合
• ユーザーが「動画を作って」と言い、製品のURLや説明を提供した場合

使用してはいけないタイミング

• ユーザーが実写 / UGC / スタジオコンテンツを希望する場合（HTMLではなくカメラが必要）
• ユーザーがライブストリーミング / ライブコマースを希望する場合（RTMP取り込みが必要）
• ユーザーがトーキングヘッドのインタビューを希望する場合（hyperframes-embedded-captions または hyperframes-talking-head-recut を使用）
• ユーザーが製品やURLなしの純粋な説明動画を希望する場合（hyperframes-faceless-explainer を使用）
• ユーザーがプレゼンテーション/スライドを希望する場合（hyperframes-slideshow を使用）

ワークフロー

0 · プロジェクトのブートストラップ

npx hyperframes init my-launch-video
cd my-launch-video

これにより、index.html、package.json、およびHyperFrames CLIが設定されたプロジェクトスキャフォールドが作成されます。

1 · 動画の計画

• 入力: 製品URL、概要、またはスクリプト
• 出力: 3〜6シーンのストーリーボードとタイミング（合計30〜90秒推奨）
• 予算: タイトル ≤2秒、アウトロ ≤3秒、中間シーン 各約8〜12秒
• デザイン言語の選択: hyperframes.heygen.com/design でframe.mdテンプレートを参照

2 · コンポジションHTMLの作成

コンポジションの契約:

<!doctype html>
<html lang="en">
  <body>
    <div
      id="main"
      data-composition-id="intro"
      data-start="0"
      data-duration="15"
      data-width="1080"
      data-height="1920"
      data-fps="30"
    >
      <div
        class="clip"
        data-start="0"
        data-duration="5"
        data-track-index="0"
      >
        <!-- シーンコンテンツ -->
      </div>
    </div>
  </body>
</html>

主要な属性:

• data-composition-id: コンポジションの一意のID
• data-start / data-duration: 秒単位のタイミング
• data-width / data-height: ビューポート寸法（9:16の場合は1080×1920）
• data-fps: フレームレート（標準30）
• class="clip": タイミング要素を示す
• data-track-index: レイヤー順序（大きいほど手前に表示）

3 · シーク可能なアニメーションの設定

GSAP（推奨）、CSSキーフレーム、またはWAAPIを使用します。すべてのアニメーションはシーク可能（決定論的 — 同じフレームが同じ時刻に、毎回同じようにレンダリングされる）である必要があります。

GSAPパターン（推奨）:

const tl = gsap.timeline({ paused: true });
tl.to("#title", { opacity: 1, y: 0, duration: 0.8, ease: "power4.out" }, 0.5);
tl.to("#image", { scale: 1, opacity: 1, duration: 1.2, ease: "power3.out" }, 1.0);
window.__timelines = { main: tl };

CSSキーフレームパターン:

@keyframes fadeInUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.animate-in {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

4 · メディアの追加

• 画像: public/ ディレクトリにダウンロードし、staticFile() または相対パスで参照
• 動画背景: assets/ に配置し、data-loop でループ
• オーディオ/BGM: <audio data-start="0" data-duration="15" src="./bgm.mp3"> で追加
• ナレーション: TTSで生成し、キャプションを単語のタイムスタンプに合わせる

5 · リントとチェック

npx hyperframes check        # コンポジション契約の検証
npx hyperframes lint         # 一般的なエラーのチェック

先に進む前にすべてのエラーを修正してください。警告は許容されますが、確認する必要があります。

6 · プレビュー

npx hyperframes preview      # HMR付きのHyperframes Studioを開く

生のコンポジションページで __player.seek(time) を使用して3〜4箇所のタイミングをスポットチェック。確認事項:

• アニメーションが適切なタイミングで開始されること
• カット部に白いフラッシュがないこと（不透明なステージの背景）
• キャプションが表示され、読みやすいこと
• オーディオレベルがバランスしていること

7 · レンダリング

npx hyperframes render --output launch-video.mp4

出力を確認:

ffmpeg -ss 3 -i launch-video.mp4 -frames:v 1 frame-3s.png  # キャプション確認
ffmpeg -ss 15 -i launch-video.mp4 -frames:v 1 frame-15s.png # シーン確認

アンチ・ラショナリゼーションテーブル

合理化	現実
「動画エディタを使えばいい」	GUIエディタはエージェントネイティブではない；HTMLはLLMが最も得意とするもの
「リント手順はスキップしよう」	リントはレンダリングを壊すコンポジション契約エラーをキャッチする
「Remotionを使おう」	RemotionはReactの推論が必要；HTMLはエージェントにとってよりシンプル
「時間を埋めるためにアイドルアニメーションを追加しよう」	アイドル揺れは禁止 — すべてのフェーズがパフォーマンスを発揮しなければならない（hyperframes-cut-the-curve参照）
「キャプションのスペースを確保するため、コンテンツを42%に中央揃えしよう」	キャプションはオーバーレイ — 真の中心（y = H/2）に中央揃えする
「シーン間にクロスフェードを使おう」	クロスフェードにはキャリアがない — デフォルトの境界にはcut-the-curveを使用する
「シーンなしで1つの大きなHTMLファイルを書こう」	シーンはコンポジションの単位 — それぞれが独自のクリップラッパーを持つ
「プレビューをスキップしてそのままレンダリングしよう」	プレビューはレンダリング時間を無駄にするタイミングエラーをキャッチする

コード例

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0a; }
      #main {
        position: relative;
        width: 1080px;
        height: 1920px;
        overflow: hidden;
      }
      .scene {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.5s ease;
      }
      .scene.active { opacity: 1; }
      .hook-bg {
        background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 80px;
        text-align: center;
        color: white;
        font-family: system-ui, sans-serif;
      }
      .hook-text {
        font-size: 72px;
        font-weight: 800;
        line-height: 1.1;
        transform: translateY(40px);
        opacity: 0;
      }
      .animate-in {
        animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }
      @keyframes fadeInUp {
        from { transform: translateY(40px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
    </style>
  </head>
  <body>
    <div
      id="main"
      data-composition-id="product-ad"
      data-start="0"
      data-duration="15"
      data-width="1080"
      data-height="1920"
      data-fps="30"
    >
      <div class="scene hook-bg" data-start="0" data-duration="5" data-track-index="0">
        <h1 class="hook-text animate-in" data-start="0.5" data-duration="4">
          製品名
        </h1>
      </div>
    </div>
    <script>
      // IntersectionObserverまたは手動タイミングによるシーンアクティベーション
      const scenes = document.querySelectorAll('.scene');
      scenes.forEach(scene => {
        const start = parseFloat(scene.dataset.start);
        const duration = parseFloat(scene.dataset.duration);
        setTimeout(() => scene.classList.add('active'), start * 1000);
        setTimeout(() => scene.classList.remove('active'), (start + duration) * 1000);
      });
    </script>
  </body>
</html>

検証チェックリスト

• コンポジションが npx hyperframes check をエラー0で通過すること
• すべてのシーンに data-start、data-duration、data-track-index があること
• アニメーションがシーク可能であること（決定論的で、ウォールクロックに依存しない）
• プレビューで3箇所以上のスポットチェックで正しいタイミングが確認できること
• レンダリングされたMP4に白いフラッシュ、フリーズフレーム、欠落キャプションがないこと
• オーディオレベルがバランスしていること（必要に応じてナレーションカーブが適用されていること）
• 出力解像度がターゲットと一致していること（9:16の場合は1080×1920、16:9の場合は1920×1080）