HyperFramesとは — HTMLで書いて動画にするHeyGenのOSS（使い方・Remotionとの違い）
HyperFramesはHeyGenが公開するApache 2.0のOSS。HTMLとdata属性を書くだけでMP4を決定的に生成する。2026年10月時点のNode.js 22+・FFmpeg、導入手順、Claude Code連携、Remotionとの違いを解説。
HyperFrames（GitHub: heygen-com/hyperframes）は、HTML・CSS・メディア・アニメーションからMP4動画を生成するオープンソースのフレームワークです。ライセンスはApache 2.0で、公式READMEは「Write HTML. Render video. Built for agents.」（HTMLを書けば動画になる。エージェント向けに作られた）と掲げています。ヘッドレスChromeで各フレームの時刻へシークして撮影し、FFmpegでエンコードするため、同じ入力からは同じ動画が得られます。必要環境はNode.js 22以上とFFmpeg、GitHubスターは約5万7,000（2026年10月時点）です。
本稿では、2026年10月時点の公式README・ドキュメント（導入、レンダリング、決定論的レンダリングの各ページ）に基づき、できること、仕組み、導入手順、HTMLの書き方、Claude Codeなどのエージェントからの使い方、Remotionなど他の選択肢との違い、注意点を整理します。
HyperFramesとは — HTMLを動画にするフレームワーク
公式ドキュメントはHyperFramesを「HTMLを動画に変えるオープンソースのフレームワーク」と説明しています。特徴は3点です。エージェントが説明文から動画プロジェクトを組み立てられること、結果が固定の出力物ではなく編集可能なプロジェクトフォルダであること、そして再生性能に左右されないフレーム単位の正確なレンダリングです。
動画の構造はHTMLのdata属性で表します。開始時刻、長さ、トラック番号を要素に書き、動きはGSAPなどの「シーク可能な」アニメーションで与えます。ビルド工程は不要で、組んだHTMLはそのままブラウザで再生できます。READMEによれば、HeyGen自身が本番で利用しているほか、tldrawやTanStackなどの採用例も挙げられています。
何ができるか
- HTMLネイティブな動画制作: data-start・data-duration・data-track-indexでタイミングとトラックを指定する
- 対応アニメーション: GSAP、CSSアニメーション、Lottie、Three.js、Anime.js、Web Animations API、独自のフレームアダプター
- 決定論的な出力: 同じ入力から同じフレーム、同じ動画を得る
- ローカルと分散レンダリング: 手元のマシンのほか、AWS LambdaやGoogle Cloud Runでのクラウドレンダリングに対応
- ライブリロード付きプレビュー: npx hyperframes previewでブラウザ確認
- カタログ: シェーダートランジション、SNSオーバーレイ、アニメーションチャートなど再利用可能なブロックを追加できる
出力形式は、公式のレンダリングガイドによるとmp4、mov、webm、gif、png-sequence、hlsです。4K出力やHDR出力のガイドも別ページで用意されています。
仕組み — シークしてフレームを撮り、FFmpegでつなぐ
通常のブラウザ動画録画は、実時間でページを再生して画面を撮ります。この方式だと、マシンが重いとフレームが落ち、実行ごとに結果がずれます。HyperFramesはこれを避け、各フレームの時刻を計算してアニメーションをその時刻へ移動（シーク）し、1枚ずつ撮影します。公式ドキュメントでは、時刻をtime = floor(frame) / fpsの整数演算で求めると説明されています。
このため、書き方にも守るべき約束があります。公式の決定論ガイドは、次のような条件を挙げています。
- 実時計を使わない（Date.now()、requestAnimationFrame、システムタイマーは使わない）
- シードなしの乱数を使わない（Math.random()は実行ごとに異なるフレームを生む）
- レンダリング中に外部データを取得しない（素材は最初のフレームの前にすべて読み込む）
- 出力サイズを固定する（fps・幅・高さはフレーム0の前に確定する）
また、フォントやChromeのバージョンはマシンごとに異なるため、完全な再現性が必要な場合は--dockerでChromium・フォント・FFmpegのバージョンを固定することが推奨されています。
インストールと必要環境
必要環境は、公式READMEではNode.js 22以上とFFmpegです。インストール作業は特になく、npxでそのままプロジェクトを作成できます。最短手順は次のとおりです。
npx hyperframes init my-video
cd my-video
npx hyperframes preview # browser preview with live reloadinitでテンプレートのプロジェクトが作られ、previewでブラウザ上にライブリロード付きのプレビューが開きます。FFmpegが未導入の場合は、macOSならHomebrewなど各OSのパッケージマネージャで先に入れてください。
使い方 — HTMLの書き方とレンダリング
コンポジションの最小例は次のとおりです（公式READMEの例）。ルート要素にdata-composition-idと画面サイズを指定し、子要素にdata-start（開始秒）、data-duration（長さ秒）、data-track-index（重なり順のトラック）を書きます。動画・画像・音声・テキストを同じ方式で並べられます。
<div id="stage" data-composition-id="launch" data-start="0"
data-width="1920" data-height="1080">
<video class="clip" data-start="0" data-duration="6"
data-track-index="0" src="intro.mp4" muted></video>
<h1 id="title" class="clip" data-start="1" data-duration="4"
data-track-index="1">Launch day</h1>
<audio data-start="0" data-duration="6" data-track-index="2"
data-volume="0.5" src="music.wav"></audio>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
const tl = gsap.timeline({ paused: true });
tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
window.__timelines = window.__timelines || {};
window.__timelines.launch = tl;
</script>
</div>ポイントは末尾のスクリプトです。GSAPのタイムラインをpaused: trueで作り、window.__timelinesにコンポジションIDで登録します。レンダラーはこのタイムラインを各フレームの時刻へ動かして撮影します。自分で再生を開始する必要はありません。
レンダリングの前に、lintでプロジェクト構造を、checkでブラウザ上のランタイム・レイアウト・モーション・メディア・コントラストの問題を確認する流れが公式ガイドで推奨されています。
npx hyperframes lint
npx hyperframes check
npx hyperframes render --output final.mp4--outputを省略するとrenders/ディレクトリに出力されます。主なオプションは次のとおりです（公式レンダリングガイドの記載）。
| オプション | 内容 |
|---|---|
--format | mp4・mov・webm・gif・png-sequence・hls |
--quality | draft・standard（既定）・high |
--fps | フレームレート（既定は30、またはコンポジションのdata-fps） |
--composition | 対象のHTMLファイルを指定（例: compositions/intro.html） |
--docker | Docker内でレンダリングし、Chrome・FFmpegの環境を固定 |
--crf / --video-bitrate | 画質制御（MOV形式では不可） |
npx hyperframes render --format webm --quality high --fps 60 --output final.webm
npx hyperframes render --composition compositions/intro.html --dockerカタログのブロックを足すこともできます。トランジションやチャートなどを、コマンド1つで自分のプロジェクトへ取り込めます。
npx hyperframes add flash-through-white # shader transition
npx hyperframes add instagram-follow # social overlay
npx hyperframes add data-chart # animated chartClaude Codeなどのエージェントから使う
「Built for agents」の中身は、公式が配布するエージェントスキルです。Claude Codeにはプラグインとして、その他のエージェントにはスタンドアロンのスキルとして導入できます。
# Claude Code
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
# Standalone skills
npx skills add heygen-com/hyperframesREADMEによると、スキルは21本あり、ルーター（/hyperframes）、制作ワークフロー（製品ローンチ動画、顔出しなし解説動画、PRからの動画化、字幕埋め込み、モーショングラフィックス、スライドショー、Remotionからの移行など）、ドメイン別スキル（コア、アニメーション、CLI、音声、レジストリ、Figmaなど）に分かれています。エージェントはHTMLを書いてpreviewとrenderを回すだけなので、JSXのビルド環境を用意する必要がありません。
エージェント向けスキルの選び方や安全面は、「i-have-adhd」と「ponytail」の比較やNVIDIA SkillSpectorによるスキルの事前スキャンも参考になります。Claude Code自体の使い方はClaude Code 完全ガイド、図解スキルの例はdiagram-designスキルで解説しています。
Remotionなど他の選択肢との違い
READMEが直接比較しているのはRemotionです。Remotionはコードで動画を作るReactベースのフレームワークで、HyperFramesはReactではなくプレーンなHTMLを使います。公式の比較は次のとおりです。
| 観点 | HyperFrames | Remotion |
|---|---|---|
| 記述方法 | HTML + CSS + シーク可能なアニメーション | Reactコンポーネント |
| ビルド工程 | なし（そのまま再生できる） | バンドラーが必要 |
| エージェントへの引き渡し | プレーンなHTMLファイル | JSX/Reactプロジェクト |
| アニメーションの考え方 | シーク可能でフレーム単位に正確 | 実時間前提の書き方には注意が必要 |
Motion CanvasやFFmpegの直接記述は、READMEでは比較されていません。以下は一般的な特徴に基づく整理で、選ぶ際は各公式サイトで最新の仕様を確認してください。
| ツール | 記述方法 | 向いている用途 | 留意点 |
|---|---|---|---|
| HyperFrames | HTML/CSS/data属性＋GSAPなど | HTMLに慣れた人・AIエージェントによる動画制作 | Node.js 22+とFFmpegが必要 |
| Remotion | React（TypeScript） | Reactのコンポーネント資産を活かしたい場合 | Reactの知識とバンドラー環境が前提。ライセンス条件は公式で確認 |
| Motion Canvas | TypeScript（ジェネレーター記法） | 解説図・ベクターアニメーションを作り込みたい場合 | 専用のコード記述に慣れる必要がある |
| FFmpeg直書き | コマンド・フィルター式 | 既存動画の結合・変換・字幕焼き込み | 動きのあるレイアウトを一から組むのは不向き |
使い分けの目安は、すでにReactで開発している組織ならRemotion、HTMLとCSSでレイアウトを作りAIエージェントに任せたいならHyperFrames、既存動画の変換だけならFFmpegです。HyperFrames自体の中でもFFmpegはエンコードを担当しているため、両者は競合というより役割が違います。
活用例
- SNS用の短尺動画: 縦長1080×1920のコンポジションにテロップとアニメーションを重ね、字幕埋め込みスキルで量産する
- 製品デモ・ローンチ動画: 画面収録クリップにタイトルと音楽を重ね、/product-launch-videoのようなワークフローで組み立てる
- データ動画: カタログのdata-chartブロックなどで、数値が動くチャートを動画にする
- PRや更新内容の紹介: /pr-to-videoでプルリクエストの内容を説明動画にする
- 定型動画の自動生成: HTMLのテンプレートに値を差し込み、CIでレンダリングする（同じ入力から同じ出力が得られる前提）
AIによる動画生成モデル（たとえばLTX-2.5のローカル動作要件で扱ったもの）は、映像そのものをAIが生成します。HyperFramesは逆に、テキストや素材を正確に配置して動画に組み立てるツールで、数字・ロゴ・字幕を崩したくない用途に向いています。
注意点
- 決定論には書き方の約束がある: Date.now()や未シードのMath.random()、レンダリング中の外部取得を使うと、同じ入力でも結果がずれる
- 環境差は残る: フォントやChromeのバージョンで見た目が変わり得る。完全な再現が必要なら--dockerを使う
- 必要環境: Node.js 22以上とFFmpegが前提で、古いNodeでは動かない
- 外部アセットの扱い: 例のようにCDNからGSAPを読む構成は、レンダリング時にネットワークが必要になる。社内CIなどではローカルに同梱する方が安全
- 本稿の範囲: 公式の導入ページは概要が中心で、詳細はCLIガイドやHTMLスキーマ参照にある。オプションは版により変わる可能性があるため、最新は公式ドキュメントで確認する
よくある質問
HyperFramesとは何ですか？
HTML・CSS・メディア・アニメーションからMP4などの動画を生成するApache 2.0のオープンソースフレームワークです。HeyGenが公開しており、ヘッドレスChromeとFFmpegで同じ入力から同じ動画を出力します。
必要な環境は？
公式READMEではNode.js 22以上とFFmpegです。npx hyperframes init my-videoでプロジェクトを作成し、npx hyperframes renderで出力できます。
Remotionとの違いは？
RemotionはReactコンポーネントで動画を作りバンドラーが必要ですが、HyperFramesはプレーンなHTMLとCSSで書き、ビルド工程なしでそのまま再生できます。READMEは、エージェントに渡す成果物がプレーンなHTMLである点を利点に挙げています。
Claude Codeから使えますか？
使えます。claude plugin marketplace add heygen-com/hyperframesとclaude plugin install hyperframes@hyperframesでプラグインを入れるか、npx skills add heygen-com/hyperframesでスキルを追加します。
商用利用や利用料は？
ライセンスはApache 2.0で、READMEは「レンダリングごとの料金や商用利用の閾値はない」と説明しています。ただし、組み込むGSAPなど各ライブラリのライセンスは別途確認してください。
同じ動画が毎回出力されるのはなぜ？
実時間再生ではなく、フレームごとの時刻へシークして撮影するためです。ただしフォントやChromeのバージョン差は残るので、完全な再現性が必要なら--dockerを使います。
まとめ
HyperFramesは、HTMLとdata属性で動画を書き、ヘッドレスChromeのシークとFFmpegで決定的にMP4へ変換するApache 2.0のOSSです。必要環境はNode.js 22以上とFFmpeg、npx hyperframes initからrenderまでの数コマンドで試せます。Remotionと違いReactもビルドも不要で、プレーンなHTMLとして扱えるため、Claude Codeなどのエージェントに動画制作を任せたい場合に相性が良い設計です。導入前には、決定論のための書き方の約束と、環境差を抑える--dockerの扱いを確認してください。
この記事に関連する無料ツール（登録不要・その場で結果）
お気軽にご相談ください
お問い合わせ