AIエージェントが動画を自律生成する手段として、HTMLが選ばれました。
2026年5月5日、Nous ResearchはHermes AgentにHeyGenのHyperFrames公式スキルが追加されたと発表しました。これにより、Hermes Agentはテキストの指示だけでHTML形式の動画コードを書き、そのままMP4として書き出せます。
この記事でわかること
- HyperFramesがHTMLを動画に変換する仕組み
- AIエージェントにとってHTML-nativeが重要な理由
- Hermes AgentへのHyperFrames統合が意味すること
- インストールと基本的な使い方
- RemotionなどReactベースのアプローチとの違い
https://github.com/heygen-com/hyperframes
HyperFramesとは何か
HyperFramesは、HeyGenが2026年4月17日に公開したオープンソースの動画レンダリングフレームワークです。HTMLファイルに data-start や data-duration などの属性を付けるだけで、アニメーション付きの動画をMP4に書き出せます。内部ではヘッドレスPuppeteerでフレームをキャプチャし、FFmpegでエンコードしています。
ライセンスはApache 2.0で、社内・商用利用ともに制限なく使えます。公開後数日でGitHubスターが6,600件を超えました。
なぜHTMLで動画を作るのか
HyperFramesの設計の核心は「AIエージェントがすでにHTMLを話せる」という事実にあります。LLMの学習データにはHTMLが大量に含まれているため、エージェントはHTMLを書く際に自然な制御ができます。一方でReactコンポーネントとして動画を記述するアプローチでは、フレームワーク固有の制約を改めて学習させる必要があります。
HyperFramesのアニメーション記述も既存の技術をそのまま使えます。GSAP 3のタイムライン、Lottie JSON、CSSトランジション、Three.jsシーン、WebGLシェーダートランジションをサポートしており、新しいDSLを覚える必要はありません。
レンダリング結果が決定論的（deterministic）な点も重要です。同じ入力から常に同じMP4が生成されるため、自動化パイプラインやCI環境での利用に適しています。
Hermes Agentとの統合
Nous Researchが開発するHermes Agentは、スキルシステムを通じて機能を拡張できるAIエージェントフレームワークです。今回のHyperFrames公式スキル追加により、エージェントはHyperFramesの動画生成をワークフローに直接組み込めるようになりました。
Nous ResearchのXポスト（2026年5月5日）では、Hermes AgentがHyperFramesスキルを使って生成したサンプル動画を公開しています。「HTMLネイティブであるためエージェントが最終出力を完全にコントロールできる」と説明されています。
Hermes Agentにはすでにマルチエージェントで動画を制作するKanban Video Orchestratorスキルがあります。HyperFramesスキルはその構成要素のひとつとして機能します。ComfyUI、Manim、Three.jsといった既存の描画スキルに加え、HTML-native動画という選択肢が加わった形です。
インストールと基本的な使い方
HyperFramesはClaude Code、Cursor、Gemini CLI、Codexなど主要なAIコーディングエージェントに対応するスキルを提供しています。以下のコマンドでスキルをインストールすると、エージェントはHyperFramesの書き方を習得します。
npx skills add heygen-com/hyperframes
インストール後、エージェントへの指示はシンプルです。
Using
/hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music.
エージェントはHTMLファイルを生成し、以下のコマンドでプレビューとレンダリングを実行します。
npx hyperframes preview # ブラウザでライブプレビュー
npx hyperframes render # MP4に書き出し
動作にはNode.js 22以上とFFmpegが必要です。50種類以上の既製コンポーネントも用意されており、npx hyperframes add コマンドで追加できます。シェーダートランジション、SNS風オーバーレイ、データビジュアライゼーションなど、即戦力になるブロックが揃っています。
RemotionなどReactベースとの違い
HTMLで動画を作るアプローチの先行例として、ReactコンポーネントでMP4を生成するRemotionがあります。両者の最大の違いは記述形式です。
RemotionはReact（TSX）でコンポーネントを書き、ビルドステップが必要です。HyperFramesはHTMLファイルをそのまま書け、ビルド不要でブラウザでもプレビューできます。GSAPなどのライブラリも、HyperFramesでは既存の書き方のままフレーム単位でシーキングできます。Remotionでは壁時計（wall-clock）ベースの動作になるため、同等の制御が難しくなります。
ライセンス面でもHyperFramesはApache 2.0で完全オープンソースです。Remotionは一定規模以上の商用利用に有料ライセンスが必要なソース公開（source-available）モデルです。
AIエージェントと組み合わせる場合、チームのスキルセットがHTMLとJavaScriptに寄っているならHyperFramesが向いています。ReactエコシステムとLambdaによる分散レンダリングが必要ならRemotionに優位性があります。
まとめ
HyperFramesはHTMLという既存の言語で動画制作をエージェントに委ねるフレームワークです。Nous ResearchのHermes AgentがHyperFrames公式スキルを採用したことで、AIエージェントが動画を生成するパイプラインの実運用が現実的になりました。
HTMLが書ければ動画になるという発想はシンプルですが、決定論的なレンダリングとエージェント親和性の組み合わせは、自動化の文脈で見ると強力な特性です。