Motion HyperFrames: ビルドモジュール
motion-director（進行、スタイル、批評）と、HeyGen公式のHyperFramesスキル（技術）との橋渡しを行います。進行管理はmotion-directorが担当します。 HyperFramesのワークフロー（/hyperframes、product-launch-video、motion-graphics …）には独自のブリーフィングループがありますが、それらはDirectorプロセスで置き換えられます。HyperFramesの技術ルールは完全に適用されます。
セットアップ（プロジェクトごと）
claude plugin marketplace add heygen-com/hyperframes # 公式スキル（1回のみ）
claude plugin install hyperframes@hyperframes # 代替：プラグイン未使用の場合は npx hyperframes skills update
cd projects/<name>
export HYPERFRAMES_NO_TELEMETRY=1
npx -y hyperframes@<version> init hf --non-interactive # バージョンを固定し、プロジェクト途中で @latest は使用しない
どのHyperFramesスキルをいつ読むか
| タスク | スキル |
|---|---|
コンポジション契約: data-*、クリップ、トラック、サブコンポジション、決定論 | hyperframes-core（最初のHTMLの前に） |
モーション、GSAP、トランジション；Three.js（adapters/three.md）；モーションブラー | hyperframes-animation |
| カメラ、ズーム、パンチイン、マッチ/ホイップ、マスク、SVG描画 | hyperframes-keyframes |
| コマンド、レンダリングオプション、トラブルシューティング | hyperframes-cli |
| ビルディングブロックの検索 | hyperframes-registry |
音声はHyperFrames内では作成しません：ミックスは motion-sound から作成され、最後に追加されます。
独自コンポーネントを優先
映画ごとに独自のデザインを採用し、コンポーネントは自分でビルドします（hf/components/<name>.html）。カタログ（npx hyperframes catalog --query "<動き、英語>"）は宝庫です：ソースコードを読み、技術を理解し、独自のデザインに翻訳してください。カタログの見た目を1:1で決してコピーしないでください。それはまさにすべてのAIビデオが持つルックです。
確認
npx hyperframes lint # 素早く、各大きなステップの後に
npx hyperframes check # 実行時、レイアウト/オーバーフロー、コントラスト（WCAG）
npx hyperframes snapshot --at 1.2,4.0,9.5 --describe false # フレーム画像；--describe false を付けないと有料画像モデルが呼ばれる
npx hyperframes render --quality draft --output ../renders/draft.mp4 # アニマティック、素早い
その後、motion-director/references/rules.md のチェックを行います。
レンダリング + マスタリング（バンディング対策）
通常のMP4 = 8ビット：グラデーションやグローにバンディングが発生します。そのため、ロスレスでレンダリングし、10ビット＋微細グレインでマスタリングします：
npx hyperframes render --format mov --quality delivery --output ../renders/master.mov
bash scripts/master_10bit.sh ../renders/master.mov ../renders/film.mp4 0.35 ../renders/mix.wav
このスクリプトは、カラーマトリックスを補正し（BT.601（タグなし）→ BT.709）、輝度に微細な10ビットグレインを適用し、音声を追加し、透明な画像がある場合は警告します。注意：10ビットH.264はQuickTimeで再生できません（VLC、mpv、ffplay、ブラウザでは再生可能）。配信用に8ビットコピー（-pix_fmt yuv420p -crf 18）を別途作成してください。
メモリ
3D、ガラス、または大きなレイヤーを使用したレンダリングには多くのRAMが必要です。そのため：一度に1つのレンダリング、バックグラウンドでのレンダリングループは禁止、まず1フレームをレンダリングしてメモリを監視、各辺4096ピクセルを超えるレイヤーは使用禁止。
モーションブラー
| 方法 | いつ | 制限 |
|---|---|---|
レジストリビルディングブロック motion-blur（中間フレーム、シャッター角） | 高速な単一要素 | transform のみ；大きなコンテナ上では負荷が高い |
| エンジンモーションブラー | 画像全体 | Producer API経由のみ；シェーダートランジションでは使用不可 |
読み取り動作（テキスト/ページ）では決して使用せず、目が読もうとしない場所でのみ使用します。
落とし穴（測定済み、またはIssueより、2026年10月時点）
- 背景を
<body>ではなくルートの[data-composition-id]に設定：MOVでは透明、MP4では黒くなる。 z-index: -1はレンダリングされない。スクリプトがランタイムロード前に作成したアニメーションは1フレームずれる可能性がある；Shadow Root / 疑似要素内のCSSアニメーションも同様。- サイレントフォールバックで遅いスクリーンショットキャプチャに切り替わる：レンダリングサマリーを確認すること。
Math.random/Date.nowはlintでブロックされる：乱数は常にシードする。無限repeatは禁止。- 大きなCSSブラーはパフォーマンスを著しく低下させる。アセットは再ビルド後、新しいファイル名で配置する（キャッシュはパスで管理）。