動画エンジン（Hyperframes v0.8.77 & Brag）
HyperFrames は HTML から動画をレンダリング します。コンポジションは、data-* 属性（data-start、data-duration）を使用して DOM がタイミングを宣言する HTML ドキュメントであり、アニメーションのランタイムはシーク可能で、メディアの再生はフレームワークによって管理されます。
1. プロジェクト状態の検出
アクションを実行する前に、プロジェクトの状態を順に評価します。
| 状態 | アクション |
|---|---|
| Remotion を HyperFrames に移植する | workflows/remotion-to-hyperframes/SKILL.md を読み込み、直接実行します。インテントレイヤーはスキップします。 |
| 検査、診断、プレビュー、またはレンダリング | 対応する CLI コマンド（npx hyperframes check、preview、render）を実行します。インテークを再実行しないでください。 |
| 既存のプロジェクトを編集する | npx hyperframes timeline [--json] を実行してトラック、クリップ、タイミングを検査し、対象を絞った編集を行います。 |
BRIEF.md が存在する | ブリーフから workflow と flow を読み取り、そのワークフローを直ちに実行します。 |
hyperframes.json または STORYBOARD.md が存在する | 既存のプロジェクトファイルと記録された設定から再開します。 |
| 新規作成リクエスト | インテントインテークを実行し、以下のルーティングマトリックスを使用してルーティングします。 |
CLI バージョン管理
package.json で依存関係が固定されている既存のプロジェクトを再開する場合：
npx hyperframes@latest upgrade --project . --check
アップデートが利用可能で検証された場合は、npx hyperframes@latest upgrade --project . を適用し、npx hyperframes check を実行します。
2. インテントルーティングマトリックス
新規作成リクエストは、最初に一致するワークフローにルーティングします。
| 優先度 | リクエストタイプ | 対象ワークフロー |
|---|---|---|
| 1 | Remotion コードの明示的な移植 | workflows/remotion-to-hyperframes |
| 2 | プレゼンテーション、ピッチデッキ、またはインタラクティブなスライドデッキ | workflows/slideshow |
| 3 | フッテージ上のプレーンなワードタイミングのキャプションまたは字幕 | workflows/embedded-captions |
| 4 | トーキングヘッド、インタビュー、ポッドキャストへのグラフィックオーバーレイ | workflows/talking-head-recut |
| 5 | 音楽トラックに合わせたビートシンクモーション（音声なし） | workflows/music-to-video |
| 6 | 短い、モーションファーストのキネティックビジュアル（10秒未満） | workflows/motion-graphics |
| 7 | GitHub プルリクエストまたはコード変更の説明 | workflows/pr-to-video |
| 8 | プロダクトローンチ、ウェブサイトショーケース、SaaS プロモーション、/brag | workflows/product-launch-video（またはモード1） |
| 9 | 概念的なトピックまたはドキュメントの説明 | workflows/faceless-explainer |
| 10 | その他のカスタム動画またはマルチトラックコンポジション | workflows/general-video |
3. 操作モード
モード 1: プロダクトローンチ & ショーケース（/brag & product-launch-video）
ウェブサイトのローンチ、プロダクトショーケース、SaaS プロモーション、/brag に使用します。
- インテーク & 検査:
- オプションを解析:
--tone（デフォルト、polished、yc-parody、chaotic、cinematic、deadpan、app-storereferences/brag/tones.md内）、--format（16:9、9:16、1:1）、--duration（15–25秒）。 - URL が提供された場合、ライブサイトのアセットをキャプチャ:
npx hyperframes capture "<URL>" -o ./capture --json
- オプションを解析:
- デザインシステム & プリセット:
references/creative/frame-presets/からデザインプリセットを選択し（capsule、cobalt-grid、daisy-days など）、ブランドトークンをリミックス:node workflows/product-launch-video/scripts/build-frame.mjs --preset <preset-name> --hyperframes .
- ストーリーボード & オーディオミックス:
STORYBOARD.mdとSCRIPT.mdを作成。- オーディオ:
assets/music/からミュージックトラックを選択するか、/media-useを使用してトラックと TTS ナレーションを解決（references/audio/）。 - ビートキュー分析を実行:
python3 scripts/analyze_music_cues.py --audio <path> --output audio_cues.json。
- 検証 & 出力:
- レイアウトとタイミングを検証:
npx hyperframes check。 - 最終動画をコンパイル:
npx hyperframes render --output brag.mp4。 - ポスターフレーム0を
brag.jpgに保存し、リリースコピーをshare-copy.txtに保存。
- レイアウトとタイミングを検証:
モード 2: ナラティブ & テクニカル解説（faceless-explainer、pr-to-video）
コード差分、エンジニアリングドキュメント、または複雑なトピックを明確な動画ナラティブに変換するために使用します。
- ストーリースパイン:
references/creative/references/story-spine.mdに従います（フック、問題提起、アーキテクチャ/解決策、インパクト）。 - ショットシェイプ:
references/animation/blueprints-index.mdからブループリントを選択します（code-editor、split-comparison、stat-callout、flow-diagram）。 - フレームワーカーパケット:
workflows/faceless-explainer/scripts/frame-packets.mjsを使用して、境界化されたサブエージェントパケットを生成します。各フレームは分離して構築されます（compositions/frames/NN-*.html）。 - アセンブリ & オーディオ: フレームをルートの
index.htmlにリンクし、ナレーショントラックをダッキングエンベロープでミックスし、レンダリングします。
モード 3: キネティックモーショングラフィックス & ランタイム（motion-graphics、music-to-video）
スタンドアロンのモーショングラフィックス、アニメーション化された UI コンポーネント、ビートグリッド、ループに使用します。
- ランタイムアダプター（
references/animation/adapters/）:- GSAP: 高精度なマルチプロパティトゥイーンとシークセーフなタイムライン。
- Three.js: 3D 空間ビューポート、パーティクルシステム、モデル（
references/animation/adapters/three.md）。 - Lottie: ベクターアニメーションプレーヤー（
references/animation/adapters/lottie.md）。 - Anime.js / WAAPI: コンパクトな DOM モーフとキーフレーム。
- CSS キーフレーム: ハードウェアアクセラレーションされたトランスフォーム。
- カメラトランジション & モーフ（
references/keyframes/）:- ケンバーンズパン、パンチインズーム、SVG パスモーフ、デプスエフェクト。
- レジストリブロック & シェーダー（
references/registry/）:- ビルトインエフェクトブロック（CRTスキャンライン、グリッチ、フィルムグレイン、シャイマースイープ、コンフェッティ）の検索とインストール。
モード 4: カスタムコンポジション & マルチトラック編集（general-video、slideshow）
インタラクティブなピッチデッキ、マルチトラックタイムライン編集、カスタム HTML 動画に使用します。
- スタジオ規約（
references/studio/studio-conventions.md）:- すべてのシーンはサブコンポジションです（
data-composition-src）。 - 1つのキャプショントラック（
data-track-kind="captions"）。 - トラックごとに1つの要素種別（動画、グラフィックス、キャプション、オーディオ）。
- セーフゾーン準拠（Premiere のタイトル/アクションセーフボックス）。
- すべてのシーンはサブコンポジションです（
- クロスドメインクリエイターレシピ:
- トリム & カット:
data-start、data-duration、data-media-startを更新します（references/core/tracks-and-clips.md）。 - スムーズズーム: クリップのタイミングを一定に保ちながら、内側のクロップラッパーを CSS/GSAP でアニメーションします（
references/keyframes/）。 - オーディオゲイン & ダッキング: ボリュームエンベロープとバス圧縮を適用します（
references/audio/）。
- トリム & カット:
4. 検証 & CLI ツールチェーン
デリバリー前に必ず検証ゲートを実行します。
# 新しい Hyperframes プロジェクトをワークフロースキャフォールドで初期化
npx hyperframes init "videos/<project>" --skill=<workflow-name>
# ライブウェブアセット、スクリーンショット、ブランドトークンをキャプチャ
npx hyperframes capture "<URL>" -o ./capture --json
# コンポジションのタイムライン、トラック、クリップを検査
npx hyperframes timeline [--json]
# タイミング属性、セーフゾーン、欠落アセットを検証
npx hyperframes check
# インタラクティブなローカルプレイヤーを起動
npx hyperframes preview
# 最終 MP4 出力をレンダリング
npx hyperframes render --output output.mp4
5. ディレクトリマップ
| パス | 目的 |
|---|---|
workflows/ | 全11のアップストリームワークフロー（product-launch-video、faceless-explainer、pr-to-video、motion-graphics など） |
engine/ | 正規の Hyperframes v0.8.77 アップストリームパッケージスイート |
references/core/ | タイミング属性、決定論ルール、トラックモデル、サブコンポジション |
references/animation/ | GSAP、Three.js、Lottie、Anime.js、CSS アダプター、ブループリント、モーションブラー |
references/keyframes/ | 2D/3D カメラトランジション、ズーム、SVG モーフ、デプスエフェクト |
references/audio/ | EQ、ダッキング、コンプレッション、サブミックスバス自動化エンベロープ |
references/creative/ | デザイン仕様、タイポグラフィ、パレット、フレームプリセット、ストーリースパイン |
references/registry/ | ビジュアルブロック、シェーダーコンポーネント、インストールと配線 |
references/studio/ | スタジオタイムラインレイアウト、キャプショントラック、セーフゾーン |
references/brag/ | キュレーションされた /brag ステップバイステップガイド、トーン、音楽キュー |
assets/music/ | シネマティック、ハイプ、インディー、カームジャンルにわたる厳選されたミュージックトラック |
scripts/ | analyze_music_cues.py、フレームパケットコア、オーディオ抽出ツール |