AIエージェントが動画ファイルを丸ごと生成する環境が、今週から誰でも使えます。

この記事でわかること：

  • HyperFramesの仕組みと解決する課題
  • HTML+GSAPで動画を定義する方法
  • Claude CodeやCursorとの具体的な連携手順
  • RemotionとHyperFramesの違い
  • インストールから最初の動画出力まで

HTMLで定義して、MP4を出力する

https://github.com/heygen-com/hyperframes

HeyGenが2026年4月17日にオープンソース公開した HyperFrames は、HTMLファイルをMP4動画に変換するフレームワークです。GitHubのスター数は公開から1週間で10,000を突破しています。

動画制作ツールの多くはAfter EffectsやFinal Cut Proのようなタイムライン型GUIが前提です。AIエージェントはマウス操作を得意とせず、こうしたツールとの連携が難しい状況でした。

HyperFramesはこの問題をHTMLで解決します。data-*属性でクリップの開始時刻・長さ・トラックを定義し、npx hyperframes renderを実行するとMP4が出力されます。

<div id="stage" data-composition-id="my-video" data-width="1920" data-height="1080">
  <video data-start="0" data-duration="5" data-track-index="0" src="intro.mp4" muted playsinline></video>
  <img data-start="2" data-duration="3" data-track-index="1" src="logo.png" />
</div>

内部ではheadless PuppeteerがフレームをキャプチャしてFFmpegでエンコードします。同じHTMLからは常に同じ動画が生成される「決定論的レンダリング」により、CI/CDパイプラインや自動生成ワークフローへ安定して組み込めます。

対応アニメーションと50種以上のコンポーネント

アニメーションランタイムとしてGSAP 3、Lottie JSON、CSSトランジション、Three.js、WebGLシェーダーをサポートしています。ブラウザ上で動くアニメーションであれば、フレーム単位でキャプチャして動画にできます。

50種類以上の既製コンポーネントをカタログから1コマンドで追加できます。

npx hyperframes add flash-through-white   # シェーダートランジション
npx hyperframes add instagram-follow      # SNS向けオーバーレイ
npx hyperframes add data-chart            # アニメーションチャート

カタログの全一覧は hyperframes.heygen.com/catalog で確認できます。

Claude CodeでHTMLを書いてMP4を出力する

HyperFramesはClaude Code、Cursor、Gemini CLI、OpenAI Codexにスキルとして登録できます。

npx skills add heygen-com/hyperframes

Claude Codeに登録すると/hyperframesスラッシュコマンドが使えるようになります。テキストプロンプトを渡すだけで、HTMLの構成・アニメーションの実装・MP4の出力を一連でこなします。

「10秒のプロダクト紹介動画を作って。タイトルはフェードインで、背景に動画と音楽を入れて。」

こうした一文で、エージェントがHTMLを書き、npx hyperframes renderを実行して完成したMP4を渡します。自動化パイプラインでは--non-interactiveフラグで非対話モードで実行でき、テキストプロンプトからMP4まで人の手を介さずに完結します。

RemotionとHyperFramesの違い

HTML→動画というアプローチの先行事例として Remotion があります。HeyGenも本番環境でRemotionを利用してきたと公式ドキュメントで言及しています。

両者の最大の違いは「何を書くか」です。RemotionはReactコンポーネント（TSX）で動画を定義します。HyperFramesはHTMLで定義するため、ReactもTypeScriptのビルドステップも不要です。既存のHTMLアニメーションをそのまま貼り付けて動画にできます。

ライセンス面でも差があります。HyperFramesはApache 2.0のフルオープンソースで、商用利用に人数・規模の制限がありません。RemotionはGitHubでソースを公開していますが、小規模チームを超えると有料ライセンスが必要です。

始め方

必要な環境はNode.js 22以上とFFmpegです。

npx hyperframes init my-video
cd my-video
npx hyperframes preview   # ブラウザでプレビュー（ライブリロード）
npx hyperframes render    # MP4を出力

hyperframes initを実行するとAIエージェント向けスキルも自動でインストールされます。Claude Codeなどへすぐに引き渡せる状態から始められます。ドキュメントは hyperframes.heygen.com にあります。

HTMLが動画の記述言語になる

HyperFramesが示しているのは、動画制作における「GUIの必要性」が崩れ始めているという現実です。HTMLとCSSを扱えるAIエージェントはそのままHyperFramesの制作者として機能します。テキストから動画を自動生成するパイプラインの構築が、今日から手の届く範囲に入りました。