レンダリング、エクスポート、修正
projects/<name>/ の中から実行してください。最終承認ファイルはワークスペースルートの exports/ にもコピーされます。
チートシート
npx hyperframes render . -o renders/video.mp4 # デフォルト
npx hyperframes render . --fps 60 -o renders/video-60fps.mp4
npx hyperframes render . --resolution 4k -o renders/video-4k.mp4 # アスペクト比は一致させる必要あり;ポートレート → portrait-4k
npx hyperframes render . --resolution 4k --fps 120 -o renders/video-4k-120.mp4
npx hyperframes render . --fps 24 -o renders/video-24fps.mp4
npx hyperframes render . --format mov -o renders/video.mov # ProRes
npx hyperframes render . --format png-sequence -o renders/frames
npx hyperframes render . --crf 23 -o renders/smaller.mp4 # ファイルサイズ縮小
- グラフィックがユーザーの映像に重なっている場合は、特に指定がない限り映像のフレームレートを維持します。
- 参考タイミング(4コアi3ノートPC、RAM約12GB搭載。より高速なPCではより短時間):シンプルな1080pグラフィック 6 秒 ≈ 24 秒; 1080x1920 の映像 + Paper Cut 3 分 20 秒 ≈ 1.5 時間(約1.1 fps:
filter: drop-shadowはスクリーンショットキャプチャを強制し、高速キャプチャはmacOSでのみ動作します)。長時間のレンダリングの前にユーザーに警告し、最後に一度だけレンダリングしてください。 - 速度調整レバー:
--workers 3(Chrome 1つあたり約256 MB。デフォルトautoはここでは1を選択 — 最初に短いクリップでテスト)、レビュー用レンダリングでは--quality draft、または短いクリップを使用。レンダリングがメモリ不足またはタイムアウトした場合は、--low-memory-modeや--protocol-timeout 600000を追加してください。 - 音声のみの変更は再レンダリング不要:
node tools/sfx.mjs projects/<n> --mix in.mp4 out.mp4(ビデオストリームはコピー)。 npx hyperframes snapshot(高速)で反復し、フレームが適切に見えたらレンダリングします。
透明エクスポート(プロンプト14)
MOV/PNG は、背景が透明な場合のみ透明になります。
- 背景とすべての映像を削除し、カードのみを残します。その周囲はすべて透明になります。
- つや消しカードは背面に何もないとぼかしが失われるため、オーバーレイには ソリッド カードに切り替えます。
renders/card.mov(ProRes 4444 + アルファ、--format mov)とrenders/card-png内の PNG シーケンス(--format png-sequence)をエクスポートします。- チェッカーボード上でスナップショットを撮り、カードのみが表示されていることを確認します。(
--format webmも別の透明オプションです。)
何かおかしいとき
| 症状 | 修正方法 |
|---|---|
| フォントが間違っている / プレーンなフォールバック | fonts/ 内のファイルを @font-face で使用してください。WebフォントのURLは使用しないでください。lint が font_family_without_font_face を報告します。 |
| テキストがスマートフォンで切れる | すべてのテキストを幅の中央80%以内に収めてください。 |
| カードがキャプションを覆う | すべてのカードを下3分の1より上に移動してください。 |
| カードが少し早い / 遅い | 音声テキスト変換は約1秒ずれることがあります。正確な発話タイミングに合わせてください(周囲の音声を確認)。 |
| ファイルが巨大 | --crf 23 で再レンダリングしてください(特にグレインスタイル)。 |
| 無音レンダリング | すべての <audio> に id が必要です;<video> は muted にしてはならず、data-has-audio="true" が必要です。 |
ユーザーが問題を平易な言葉で説明した場合は、上記のいずれか、または mg-styles 内の設定に変換してください。 |