HyperFramesは、AIアバター動画で有名な HeyGen社が2026年に公開したオープンソースの動画レンダリングフレームワーク。スローガンは "Write HTML. Render video. Built for agents."。
Remotionが「Reactで動画を書く」のに対し、HyperFramesは 「素のHTML/CSS/JSで動画を書く」。AIエージェントが書きやすい形式に振り切っているのが最大の特徴で、Claude CodeやCursorなどのコーディングエージェントが「複雑なGUI動画エディタは触れないが、HTMLは書ける」という現実から生まれた。Apache 2.0ライセンスで完全無料・商用OK。
| サービス名 | HyperFrames |
|---|---|
| 開発元 | HeyGen Inc.（heygen-com / GitHub） |
| カテゴリ | HTMLネイティブ動画レンダリングフレームワーク（OSS） |
| 公式サイト | hyperframes.lol / GitHub |
| 使用技術 | HTML / CSS / JavaScript + Puppeteer + FFmpeg + WebGL |
| 動作環境 | Node.js 22+ / FFmpegインストール必須 |
| 出力フォーマット | MP4（決定論的レンダリング・同一入力＝同一出力） |
| ライセンス | Apache 2.0（完全無料・商用利用無制限） |
Premiere ProやAfter Effectsのような タイムライン型GUIは、LLMが最も苦手とする領域。一方、HTML/CSS/JSは現代のLLMが最も得意とする出力。HyperFramesはこの非対称性に乗っかり、「AIが書きやすい形式 ＝ 動画フォーマット」と定義した。
RemotionはReactベースで強力だが、Reactを知らない人・JSXを書きたくないエージェントにはハードルがある。HyperFramesは 「素のHTML + データ属性」で構成を表現するため、Web入門レベルの知識でも書ける／生成できる。
"Same input, identical output" を徹底。CIパイプラインに組み込んだ際にレンダー結果がブレないため、自動化・量産・差分テストが可能。
Frame Adapterパターンで GSAP / Lottie / CSS / Three.js / Anime.js など好きな道具を選べる。「動きはWeb業界のベストプラクティスをそのまま流用」という思想。
| hyperframes (CLI) | 初期化・プレビュー・リント・レンダリングを担当する司令塔 |
|---|---|
| @hyperframes/core | 型定義・パーサー・ジェネレータ・ランタイム |
| @hyperframes/engine | Puppeteer（ヘッドレスChromium）+ FFmpegで「ページ → 動画」キャプチャ |
| @hyperframes/producer | キャプチャ・エンコード・音声ミックスを束ねるパイプライン |
| @hyperframes/studio | ブラウザベースのUI編集ツール（プレビュー＋ホットリロード） |
| @hyperframes/player | 埋め込み可能なWebコンポーネント（自サイトに動画ビューワーを組み込める） |
| @hyperframes/shader-transitions | WebGLシェーダーでトランジション（場面転換）を作るオプション |
動画の1シーンは1つのHTMLファイル。data-* 属性でタイムラインを表現する。タイムラインGUIは存在せず、属性が時間軸そのもの。
↑ これだけで「9秒・1080p・3トラック」の動画になる。
同じHTMLを入れれば、何度走らせても 1ビットも違わない同じMP4が出る。CIで差分テスト可能、レビュー時に「動画が変わった/変わってない」が機械的に判別できる。
動きの部分は別ライブラリに委ねる。GSAPでタイムライン制御、LottieでJSONアニメ、Three.jsで3D…と用途に応じて切り替え可能。
npx skills add heygen-com/hyperframes で Claude Code / Cursor / Gemini CLIに「HyperFramesルール」をスキルとしてインストールできる。エージェントは /hyperframes コマンドで一発呼び出し可能。
Node.js 22以上とFFmpegをインストール。FFmpegはパスを通す必要あり。
npx skills add heygen-com/hyperframes を1回叩いておけば、以後 /hyperframes でClaudeに動画コードを書かせられる。
HyperFramesは 「LLMが書く前提」で設計されているため、Claude Code連携が異常に滑らか。MindStudioの公開ガイドでは、3つの再利用スキル（モーショングラフィック生成・オーバーレイ追加・キャプション同期）でAI動画編集パイプラインを組む例が示されている。
Remotion + Claude Code は「ReactでAIに書かせる」、HyperFrames + Claude Code は「HTMLでAIに書かせる」。LLMに書かせる難易度はHTMLのほうが圧倒的に低く、エージェントの失敗率・ハルシネーション率が下がる。「とりあえず量産パイプを作って回す」用途では、HyperFramesが現状最も摩擦が少ない。
| 項目 | HyperFrames | Remotion |
|---|---|---|
| 記述言語 | HTML/CSS/JS（属性ベース） | React/JSX/TypeScript |
| 開発元 | HeyGen Inc. | Remotion GmbH |
| ライセンス | Apache 2.0（完全無料） | 3名以下無料 / 4名以上有料 |
| AIエージェント親和性 | ◎ HTML特化で最高 | ○ Skill連携あり |
| 表現力（手書き） | ○ Web技術全般 | ◎ Reactパワー全開 |
| 学習コスト | 低い（HTML知識のみ） | React必須 |
| 大規模並列レンダリング | 自前運用 | Lambda公式対応 |
| エコシステム成熟度 | 新興（2026〜） | 5年以上の蓄積 |
| 得意領域 | AI量産・自動編集パイプ | SNSテンプレ量産・データ動画 |
| 区分 | 料金 | 条件 |
|---|---|---|
| 個人・あらゆる規模の企業 | 完全無料 | Apache 2.0。商用OK・改変OK・再配布OK・人数制限なし。 |
| 段階的ロック・追加課金 | なし | レンダー数・解像度・尺の制限なし。HeyGen本体APIを使わない限り課金は発生しない。 |
| HyperFrames Cloud（オプション） | 従量課金 | HeyGen側のクラウドレンダリングを使う場合のみ。自前で動かすなら不要。 |
Apache 2.0なので規模に関係なく完全に無料利用可能。Remotionは将来shoboboが4人以上になると有料化するが、HyperFramesはそういう人数制限が一切ない。「会社が伸びても無料のままで使える」ことが地味に大きい優位性。
Hailuo / Seedance で生成した素材MP4 + 台本JSON を投入し、Claude CodeにHyperFramesでオーバーレイ・字幕・BGMを合成させるパイプラインを組む。手動編集ゼロでショート動画パッケージング完了。
毎日HTMLで吐いているAI News Daily（51日分）を、同じHTMLパーツの再利用で動画化。HyperFramesは元々HTMLなので、メディア制作と動画制作のソースコードを共通化できる。
業務HTML資産（議事録 / リサーチガイド / Remotionガイド等）から「3行サマリー動画」を毎週自動生成。社内・SNS両方に流せる。
「人間が手で繊細に作るテンプレ」はRemotion、「AIが量産する自動編集」はHyperFrames、と棲み分け。同じJSON契約を両方に通せる設計にしておけば、後からツール切り替えも容易。