HyperFramesとは？HTMLで動画を作るAIエージェント時代の動画フレームワーク

本記事には広告（PR）が含まれています。

「HyperFramesって結局なに？」
「Remotionとどう違う？AIエージェントとの相性は？」

HyperFrames は、2026年4月17日に HeyGen が Apache 2.0 ライセンスで公開した、オープンソースの動画フレームワークです。React コンポーネントではなく HTML / CSS / JavaScript だけで動画を組み立て、ヘッドレス Chrome 経由で MP4 にレンダリングできる——しかも AIエージェントが直接書ける設計 になっているのが特徴です。

「Remotion と何が違うのか」「Claude Code や Cursor からどう動かすのか」「データ可視化や月次レポート動画に使えるのか」——本記事では、データエンジニアが業務でコンテンツ動画を扱う前提で、HyperFrames の全体像と使いどころをまとめます。

HyperFrames とは何か

HyperFrames は、動画のタイムラインを HTML タグとデータ属性 で記述するタイプの動画フレームワークです。HeyGen が公式サイト・GitHub で「Write HTML. Render video. Built for agents.」とうたっており、HTML で書いたシーンをそのまま MP4 に書き出せます（GitHub: heygen-com/hyperframes, HeyGen 公式: hyperframes.heygen.com）。

最大のポイントは、シーンの構造とタイムラインを data-start / data-duration / data-track-index の3つのデータ属性だけで表現できることです。

<hyperframes-root id="my-video" data-start="0" data-width="1920" data-height="1080">
  <video id="clip-1"
    data-start="0"
    data-duration="5"
    data-track-index="0"
    src="intro.mp4" muted playsinline />
  <img
    data-start="2"
    data-duration="3"
    data-track-index="1"
    src="logo.png" />
  <audio id="bg-music"
    data-start="0"
    data-duration="9"
    data-track-index="2"
    data-volume="0.5"
    src="music.wav" />
</hyperframes-root>

VirtualDOM もフックも要らず、「いつ・どのトラックで・何秒間流すか」が属性だけで読める——これが、後述する AIエージェント親和性の根拠になっています（Medium: HeyGen’s HyperFrames）。

ライセンスは Apache 2.0（OSI 承認）で、商用利用に当たっての規模制限・席数制限・レンダリング数の従量課金はありません。「企業導入時のリーガルチェックを通しやすいOSS」として設計されています。

なぜ AI エージェントを意識した設計なのか

HyperFrames の README は、設計思想を「AI agents already speak HTML」という1文に集約しています。LLM はすでに大量の HTML を学習していて、新しいDSLや独自フレームワークを覚えるよりも、慣れた HTML をそのまま書けたほうが破綻しにくい——という割り切りです（GitHub: README）。

CLI もデフォルトで非対話的（non-interactive）に動作するため、エージェントが手放しで実行できます。具体的に対応している主要エージェントは以下です。

• Claude Code
• Cursor
• Gemini CLI
• Codex（OpenAI）

npx skills add heygen-com/hyperframes を1回叩いておけば、これらのエージェントに HyperFrames 固有の書き方が「スキル」として注入されます。たとえば「タイトルを2倍に拡大して、ダークモードに切り替えて、最後にフェードアウトをかけて」と自然言語で指示するだけで、エージェントが HyperFrames が解釈できる HTML にきちんと落としてくれる、という体験になります（MindStudio: AI Video Editing with Claude Code and Hyperframes）。

「コードを書く動画編集 = Vibe Coding」というキャッチコピーが、HyperFrames 公式サイトのトップに置かれているのも象徴的です（hyperframes.heygen.com）。

Remotion との違い：HTML派 vs React派

データエンジニア向け媒体ではすでに Remotion を扱った記事があり、HyperFrames との比較は最頻出の論点です。実は HyperFrames 自身が README で Remotion との位置付けを明言しているので、比較しやすくなっています。

観点	HyperFrames	Remotion
第一の記述方式	HTML / CSS / JavaScript	React コンポーネント（JSX）
ライセンス	Apache 2.0（OSI 承認のOSS）	カスタム Remotion License（一定規模超で有償）
レンダリング	ヘッドレス Chrome、決定論的	同じくヘッドレス Chrome、決定論的
AIエージェント親和性	第一級（公式 Skills 同梱）	別途プロンプト・テンプレを整備する必要あり
学習コスト	HTML/CSS が書ければ最低限OK	React・JSX・フックの前提知識が必要
商用利用	規模・本数を問わず無償	小規模を超えると企業ライセンス（有償）が必要
提供元	HeyGen + コミュニティ	Remotion 社

両者とも「ヘッドレス Chrome を内部で叩いて、各フレームを順番にスクリーンショットしてから MP4 に詰める」という基本構造は共通しています。違いは結局のところ、「主に書くのが HTML か React コンポーネントか」、そして 「ライセンスがOSSか、規模で有償化するか」 の2点に集約されます（GitHub: README – HyperFrames vs Remotion）。

クイックスタート：3コマンドで動画化

公式の Quickstart は驚くほど短く、Node.js 22 以上と FFmpeg が入っていれば、実質3行で完結します（公式ドキュメント: Quickstart）。

npx hyperframes init my-video    # プロジェクト初期化（Skillsも自動インストール）
cd my-video
npx hyperframes preview          # ブラウザでライブプレビュー（リロード対応）
npx hyperframes render           # MP4 にレンダリング

hyperframes init の時点で AIエージェント向け Skills も自動インストールされる仕様なので、初期化以降の編集はそのままエージェントに引き継いでも破綻しない のが大きいポイントです。

要件は次の通り：

項目	バージョン・備考
Node.js	22 以上
FFmpeg	パッケージ管理経由（macOS: brew install ffmpeg、Ubuntu: apt install ffmpeg）
Git LFS	公式リポジトリのソース取得・Skills取得時に必要
OS	macOS / Linux / Windows いずれも可（Docker でも実行可能）

コンポーネントカタログとスキル

HyperFrames には 再利用可能な動画ブロック のカタログがあり、npx hyperframes add で必要なものだけ追加できます。

npx hyperframes add flash-through-white   # シェーダー系トランジション
npx hyperframes add instagram-follow      # SNS風オーバーレイ
npx hyperframes add data-chart            # アニメーション付きデータチャート

データエンジニア観点で特に効くのが data-chart のような データ駆動ブロック です。CSV / JSON を差し込むだけで「動くチャート動画」になるので、ダッシュボードのスクリーンレコーディングを撮らずに、数値の推移を動画レポートとして組めます。

エージェント向けスキル（抜粋）も理解しておくと、AIに丸投げしたときの挙動が読みやすくなります。

スキル	役割
hyperframes	コア。hyperframes add でブロック・コンポーネントを追加
gsap	GSAP タイムラインを HyperFrames から決定論的にシークさせる
animejs	Anime.js を window.__hfAnime 経由で同期
css-animations	CSS keyframes を一時停止・任意位置にシーク可能化
lottie	lottie-web の決定論的同期
three	Three.js シーンを hf-seek イベントで同期し、window.__hfThreeTime を時刻として使う
website-to-hyperframes	既存 Remotion（React）構成を HyperFrames HTML に変換

website-to-hyperframes は、Remotion で書かれた既存資産を HyperFrames に移行したいときの実務的な逃げ道として用意されています（GitHub: README – Skills）。

実務で気をつけるポイント

決定論的レンダリングの恩恵を活かす

HyperFrames は「同じ入力からは常に同じ動画が出る」ことを保証する設計で、ヘッドレス Chrome に対して時刻を制御しながら1フレームずつキャプチャしています。CIで動画生成パイプラインを回すときに、バイナリ比較で出力を検証できる のは大きな強みです。

WebGL / シェーダー対応

「Chrome で動くものは全部動画にできる」と公式が言い切る通り、WebGL・カスタムシェーダー・Three.js・Canvas2D・モダンCSSが利用できます。データ可視化として D3.js + Canvas、Plotly、deck.gl といったライブラリも問題なく載ります。

CLIは非対話前提、CIへの組み込みが容易

hyperframes render はノンインタラクティブで動くので、GitHub Actions や Cloud Build から呼び出して動画を自動レンダリングするのも素直です。BIダッシュボードのデータ更新後に、月次サマリ動画を自動生成して Slack に投稿する——といった運用が組めます。

Node.js / FFmpeg バージョンに注意

要件は Node.js 22 以上。レガシーな CI 環境では事前のアップデートが必要です。FFmpeg はOSパッケージマネージャ経由で入れる前提なので、コンテナを使う場合は Dockerfile に ffmpeg のインストールを忘れず明記します。

データエンジニア視点：何に使えるのか

最後に、データエンジニアの現場で HyperFrames が刺さる4ユースケースを整理します。

1. ダッシュボードの「動く要約」動画化——BIダッシュボードのスクショを貼る代わりに、data-chart や Three.js シーンで KPI の推移を動画化し、Slack や Notion に貼ってチームに共有。
2. データパイプライン説明動画——Mermaid や DOT で書いた DAG を静止画で並べるのではなく、エッジを順に光らせるアニメーションで「処理がどう流れているか」を説明する社内資料に。
3. 月次レポートの自動量産——dbt の集計結果や Snowflake のクエリ結果を JSON で渡し、テンプレートに差し込むだけで「今月のサマリ動画」を量産。コミュニケーションの帯域を広げる手段として機能する。
4. 時系列データの異常検知の補助——時系列の「滑らかさ」「歯抜け」を動画化して目視で確認することで、グラフだけでは気付きにくいパターンを拾える。

いずれのユースケースも、LLM に要件を自然言語で伝え、生成された HTML をそのまま npx hyperframes render する という筋に寄せることで、データエンジニア／アナリストの作業時間を大幅に圧縮できます。これは HyperFrames が AIエージェント前提で設計されている恩恵です（MindStudio）。

---

まとめ

• HyperFrames は HeyGen が 2026年4月17日に Apache 2.0 で公開した、HTML / CSS / JS で動画を書くオープンソース動画フレームワーク
• 動画タイムラインは data-start / data-duration / data-track-index という HTML データ属性だけで表現でき、AIエージェントがそのまま書ける
• Claude Code・Cursor・Gemini CLI・Codex などに 公式 Skills を1コマンドで注入できる
• Remotion との差は「主言語がHTMLかReactか」「ライセンスがOSSか商用ライセンスか」の2点に集約される
• npx hyperframes init → preview → render の3コマンドで MP4 化、Node.js 22 と FFmpeg さえあれば動く
• データエンジニア視点では ダッシュボード動画化 / パイプライン説明 / 月次レポート量産 / 時系列の異常検知補助 に有効

「動画はデザイナーが作るもの」から「データエンジニアやAIエージェントが書いて出すもの」へ——この移行を、HyperFrames はもっとも素直なインターフェースで体現したフレームワークと言えます。