概要
Hyperframes を使用すると、開発者は HTML と CSS で動画を作成し、ヘッドレス Chrome による決定論的レンダリングで MP4 をエクスポートできます。CLI を内蔵しており、プレビューとレンダリングをサポートします。また、スキルプラグインを提供し、AI コーディングエージェントと深く統合します。GSAP、Lottie などのアニメーションランタイムをサポートし、フレームアダプターパターンを採用しています。
README プレビュー
\n \n \n \n \n \n\n\n\n \n \n \n \n \n\n\nWrite HTML. Render video. Built for agents.\n\n\n \n\n\nHyperframes is an open-source video rendering framework that lets you create, preview, and render HTML-based video compositions — with first-class support for AI agents.\n\n## Quick Start\n\n### Option 1: With an AI coding agent (recommended)\n\nInstall the HyperFrames skills, then describe the video you want:\n\n```bash\nnpx skills add heygen-com/hyperframes\n```\n\nThis teaches your agent (Claude Code, Cursor, Gemini CLI, Codex) how to write correct compositions, GSAP timelines, Tailwind v4 browser-runtime styles, and first-party adapter animations. In Claude Code, the skills register as slash commands — invoke `/hyperframes` to author compositions, `/hyperframes-cli` for the dev-loop commands (init, lint, preview, render), `/hyperframes-media` for asset preprocessing (TTS, transcription, background removal), `/tailwind` for `init --tailwind` projects, `/gsap` for timeline animation help, or the adapter skills (`/animejs`, `/css-animations`, `/lottie`, `/three`, `/waapi`) when a composition uses those runtimes.\n\nFor Claude Design, open [`docs/guides/claude-design-hyperframes.md`](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-hyperframes.md) on GitHub and click the download button (↓) to save it, then attach the file to your Claude Design chat. It produces a valid first draft; refine in any AI coding agent. See the [Claude Design guide](https://hyperframes.heygen.com/guides/claude-design).\n\nFor Codex specifically, the same skills are also exposed as an [OpenAI Codex plugin](./.codex-plugin/plugin.json) — sparse-install just the plugin surface:\n\n```bash\ncodex plugin marketplace add heygen-com/hyperframes --sparse .codex-plugin --sparse skills --sparse assets\n```\n\nFor Claude Code, the repo also ships a [Claude Code plugin manifest](./.claude-plugin/plugin.json): test it locally with `claude --plugin-dir .`. The m
FAQ (5)
トラブル対応なぜハイパーフレームで1700秒後にレンダリングされたビデオにGSAPトゥイーンが表示されないのですか？
hyperframes 0.6.52 の既知のバグ: 開始時間が約1700秒（絶対時間）を超えるGSAPトゥイーンがレンダリング中に適用されません。回避策: トゥイーンが時間0で開始し、durationを使用して表示を制御するようにアニメーションを再構成するか、コンポジションを短いセグメントに分割してください。t=0からの連続トゥイーンは正しく動作します。恒久的な修正については issue #1107 を追跡してください。
トラブル対応HyperFramesをv0.6.11にアップグレードした後、レンダリングした動画の下部に白または黒のバーが表示されるのはなぜですか？
これはHyperFrames v0.6.11+（最新のv0.6.31を含む）における既知の回帰です。1080x1920のポートレートコンポジションの最初の約37秒間、下部の帯がビデオ要素で覆われません。現在の唯一の回避策は、正しくレンダリングされるv0.6.10にダウングレードすることです。次のコマンドを使用してください: npx --yes hyperframes@0.6.10 render --output out.mp4。恒久的な修正についてはissue #1009を追跡してください。
トラブル対応ルートタイムラインのデュレーションがゼロの場合、Hyperframesプレビューでtl.set()による変更が無視されるのはなぜですか？
これは Hyperframes CLI v0.8.107 より前のバージョンに影響します。set のみのルートタイムラインはデュレーションがゼロであるため、プレビューランタイムはそれを一時停止状態の duration-floor タイムラインでラップしますが、作成者のルートタイムラインを誤って一時停止したままにします。そのため、シークを実行しても tl.set() の値がレンダリングされません。
修正方法: Hyperframes CLI v0.8.107 以降にアップグレードしてください:
npx hyperframes@latest previewまたは、修正済みリリースに固定してください:
npx hyperframes@0.8.107 previewduration-floor ラッパーは、保持されているルートタイムラインをアクティブ化するようになり、既存のネストされたコンポジションの動作と一致するようになりました。
古いバージョンでの一時的な回避策: シークする前にルートタイムラインの一時停止を解除します。例:
window.__timelines.main.paused(false);
__player.seek(0.5);ゼロ以外のデュレーションを持つトゥイーンを追加しても、このフォールバックパスを回避できます。
トラブル対応サイズの大きなコンパイル済みHTMLファイルに対して hyperframes render を実行した際に発生する "Fatal JavaScript invalid size error 268435456" は、どうすれば修正できますか？
HyperFrames を v0.8.137 以降にアップグレードしてください。リリース v0.8.137 には PR #5098 が含まれており、HTML をサイズ制限されたチャンクで処理し、正規表現マッチ配列が V8 の 2^27 スロット制限を超えるのを防ぎます。
手順:
1. アップグレード:
npm install hyperframes@latest
または直接実行:
npx hyperframes@latest render --output out.mp4
2. すぐにアップグレードできない場合は、最後に正常動作が確認されているリリースに固定してください:
npx hyperframes@0.8.75 render --output out.mp4
3. プロジェクトレベルの回避策として、すべてのサブコンポジションで @font-face ルールを繰り返し宣言するのではなく、ルートコンポジションで一度だけ宣言することで、コンパイル後の HTML サイズを削減してください。繰り返されたローカルフォント宣言は base64 として個別にインライン化され、非常に大きな index.html ファイルが生成される可能性があります。
Node のヒープサイズを増やしてもこのクラッシュは防げません。V8 が内部の正規表現結果配列を構築している最中に中断するためであり、これは捕捉可能なメモリ不足例外ではありません。
トラブル対応Dockerでレンダリングした動画の色が、macOSでレンダリングしたものと比べてずれたり薄くなったりするのはなぜですか？
これは、DebianのFFmpeg 5.1.9が、出力をBT.709としてタグ付けしながらBT.601マトリックスで色をエンコードしていたことが原因です。Hyperframesをv0.8.81以降にアップグレードしてください。この修正はv0.8.143で確認されており、DockerとmacOSの出力が1〜2カラーレベル以内で一致しています。アップグレードできない場合は、Dockerイメージ内のDebian FFmpegを8.1などの最新の静的FFmpegビルドに置き換えるか、エンコードフィルターに明示的にout_color_matrix=bt709を追加してみてください。また別の問題として、レンダリング中にバックグラウンドアップデーターがグローバルパッケージを変更する場合は、HYPERFRAMES_NO_UPDATE_CHECK=1とHYPERFRAMES_NO_AUTO_INSTALL=1を設定してください。この問題はv0.8.83で修正されました。