WebサイトからHyperFramesへ
Webサイトをキャプチャし、そこからプロフェッショナルな動画を生成します。
ユーザーは次のように指示します：
- 「https://... をキャプチャして、25秒の製品発表動画を作って」
- 「このWebサイトを15秒のInstagram向けソーシャル広告に変換して」
- 「https://... から30秒の製品ツアーを作成して」
ワークフローは7つのステップで構成されています。各ステップは成果物を生成し、それが次のステップのゲート（通過条件）となります。
ステップ1: キャプチャと理解
参照: references/step-1-capture.md
キャプチャを実行し、抽出されたデータを読み取り、「書き留めて忘れる」メソッドを使って作業用サマリーを作成します。
ゲート: サイトサマリー（名前、主要カラー、フォント、重要なアセット、一言で表す雰囲気）を出力すること。
ステップ2: DESIGN.mdの作成
参照: references/step-2-design.md
キャプチャしたWebサイトのシンプルなブランドリファレンスを作成します。6セクション、約90行です。これはチートシート（早見表）であり、クリエイティブプランではありません。クリエイティブプランはステップ4で作成します。
ゲート: DESIGN.mdがプロジェクトディレクトリに存在すること。
ステップ3: SCRIPTの作成
参照: references/step-3-script.md
ナレーションスクリプトを作成します。ストーリーの骨格です。シーンの長さはナレーションから決定され、推測ではありません。
ゲート: SCRIPT.mdがプロジェクトディレクトリに存在すること。
ステップ4: STORYBOARDの作成
参照: references/step-4-storyboard.md
ビートごとのクリエイティブディレクションを作成します：ムード、カメラ、アニメーション、トランジション、アセット、深度レイヤー、SFX。これはクリエイティブの北極星であり、エンジニアが各コンポジションを構築する際に参照するドキュメントです。
ゲート: STORYBOARD.mdが、ビートごとのディレクションとアセット監査テーブルを含んで存在すること。
ステップ5: VO生成とタイミングマッピング
TTSオーディオを生成し、文字起こしで単語レベルのタイムスタンプを取得し、タイムスタンプをビートにマッピングします。STORYBOARD.mdを実際の時間で更新します。
ゲート: narration.wav（または.mp3）とtranscript.jsonが存在すること。STORYBOARD.mdのビートタイミングが更新されていること。
ステップ6: コンポジションの構築
参照: hyperframesスキル（ロードしてください — すべてのルールが重要です）
参照: references/step-6-build.md
ストーリーボードに従って各コンポジションを構築します。各コンポジションの後：レイアウト、アセット配置、アニメーション品質についてセルフレビューを実施します。
ゲート: すべてのコンポジションがセルフレビュー済みであること。要素の重なり、アセットの誤配置、モーションのない静止画像がないこと。
ステップ7: 検証とデリバリー
参照: references/step-7-validate.md
Lint、検証、スナップショット、プレビューを実施します。最初にユーザーにローカルホストのStudioプロジェクトURL（http://localhost:<port>/#project/<project-name>）を提供します。MP4へのレンダリングは明示的なリクエストがあった場合のみ行います。index.htmlをプロジェクトの受け渡しリンクとして扱わないでください。これはソースコードのコンテキストのみです。
ゲート: npx hyperframes lintとnpx hyperframes validateがエラーゼロでパスし、最終レスポンスにアクティブなStudioプロジェクトURLが含まれていること。
クイックリファレンス
動画タイプ
| タイプ | 時間 | ビート数 | ナレーション |
|---|---|---|---|
| ソーシャル広告（IG/TikTok） | 10-15秒 | 3-4 | オプションのフック文 |
| プロダクトデモ | 30-60秒 | 5-8 | 完全なナレーション |
| 機能発表 | 15-30秒 | 3-5 | 完全なナレーション |
| ブランドリール | 20-45秒 | 4-6 | オプション、音楽重視 |
| ローンチティーザー | 10-20秒 | 2-4 | 最小限、高エネルギー |
フォーマット
- ランドスケープ: 1920x1080（デフォルト）
- ポートレート: 1080x1920（Instagramストーリーズ、TikTok）
- スクエア: 1080x1080（Instagramフィード）
参照ファイル
| ファイル | 読むタイミング |
|---|---|
| step-1-capture.md | ステップ1 — キャプチャデータの読み取り |
| step-2-design.md | ステップ2 — DESIGN.mdの作成 |
| step-3-script.md | ステップ3 — ナレーションスクリプトの作成 |
| step-4-storyboard.md | ステップ4 — ビートごとのクリエイティブディレクション |
| step-5-vo.md | ステップ5 — TTS、文字起こし、タイミング |
| step-6-build.md | ステップ6 — セルフレビュー付きコンポジション構築 |
| step-7-validate.md | ステップ7 — Lint、検証、スナップショット、プレビュー |
| techniques.md | ステップ4と6 — 10種類のビジュアルテクニックとコードパターン（SVG描画、Canvas 2D、3D、タイポグラフィ、Lottie、動画、タイピング、可変フォント、MotionPath、トランジション） |