HyperFramesとは？Claude Codeで動画自動生成する方法

こんにちは。もるふぉです。

HeyGenがオープンソースで公開した「HyperFrames」、これがかなり面白いので速報で共有します。

HTMLを書くだけでMP4動画が生成できるフレームワークなんですが、しかもAIエージェントに動画生成を任せることを最初から設計に組み込んでいるんですよ。

「動画を作りたいけど、After Effectsは重いし、Remotionを使うにはReactが必要だし……」そう感じていたエンジニア、結構いると思います。

自分もそのひとりでした。

HeyGen自身がこのフレームワークを使って、Claude Codeでローンチビデオを制作したとのこと。

しかもGuillermo Rauchさん（Vercel CEO）もコメントしていて、注目度の高さが伺えます。

HyperFramesとは？HTMLを書くだけで動画が作れるフレームワーク

HyperFramesは、HeyGenが2026年4月にApache 2.0ライセンスで公開したオープンソースの動画生成フレームワークです。

タグラインは「Write HTML. Render video. Built for agents.」。

この一文に設計思想のすべてが凝縮されているんですが、ここ、ちょっと注目してほしいんです。

「Write HTML. Render video. Built for agents.」が示す設計思想

従来の動画生成ツールは、GUIベースのエディタか、独自のDSL（Domain Specific Language）を覚える必要がありました。

このフレームワークのアプローチはまったく異なります。

HTMLファイルにdata-*属性を付与するだけで動画のコンポジションを定義できます。

独自の記法を覚える必要はありません。

つまり、HTMLが書ければ動画が作れる。

それが本ツールの核心です。

そして「Built for agents」の部分が地味にすごいんですよ。

このフレームワークは人間がGUI上で操作することを前提にしていません。

AIエージェントが非インタラクティブなCLIを通じてHTMLを生成し、それを動画にレンダリングするワークフローを最初から想定して設計されています。

つまり、Claude CodeやGemini CLIなどのAIエージェントが「動画を作れるようになる」ためのフレームワークなんですよ。

「いやいや、AIに動画って作れるの？」——作れるんです。

しかも、想像よりずっとシンプルな仕組みで。

HeyGenがオープンソースで公開した背景

HeyGenといえばAIアバター動画生成サービスとして知られていますが、今回のHyperFramesは「動画のプログラマティックな制作基盤」をOSSとして切り出したものです。

自社のローンチビデオをClaude Code + HyperFramesで制作して、そのフレームワーク自体をオープンソースにするというのは、かなり大胆な戦略ですよね。

現時点でGitHub上では226スター、22フォーク、バージョンはv0.4.0。

公開直後にしてはかなりの注目を集めています。

で、「Remotionとどう違うのか」という疑問が当然出てくると思うので、次はそこを掘り下げます。

RemotionとHyperFramesの違いを比較する

プログラマティックな動画生成といえば、Remotionを思い浮かべるエンジニアは多いと思います。

自分もこれまでRemotionを使ってきたので、HyperFramesとの違いは最初に気になったポイントでした。

結論から言うと、「Reactを使うかどうか」で全然別のツールです。

React必須（Remotion）vs HTML only（HyperFrames）

両者の最大の違いはここです。

レンダリングの仕組み自体は似ています。

どちらもPuppeteer（ヘッドレスブラウザ）でページをキャプチャして、FFmpegで動画にエンコードするアーキテクチャです。

ただ、入力の部分がまったく違います。

RemotionはReactコンポーネントとして動画を記述します。

、、useCurrentFrame()といったReact固有のAPIを使います。

Reactに慣れている人にとっては自然ですが、Reactを知らない人にとってはハードルが高い。

HyperFramesはHTMLのdata-*属性だけで完結します。

data-startで開始タイミング、data-durationで持続時間、data-composition-idでコンポジション名を指定する。

それだけです。

「それだけで動画になるの？」——なるんです。

後ほどコードを見てもらえれば、「あ、これなら書ける」と思うはずですよ。

エージェント最適化の思想的な違い

ここが面白いところなんですが、RemotionとHyperFramesは生まれた目的からして違います。

RemotionはもともとReact開発者が動画を「コードで書く」ためのツールとして生まれました。

人間がReactコンポーネントを書くことを前提にしています。

HyperFramesは最初からAIエージェントが動画を生成することを前提にしています。

この違いは設計のあらゆるところに現れています。

• 非インタラクティブCLI: 対話的なプロンプトがない。コマンドを一発叩けば結果が返る
• 決定論的レンダリング: 同じ入力を与えれば必ず同じ出力が得られる。CI/CDパイプラインに組み込みやすい
• HTMLという選択: LLMにとって、JSXよりHTMLの方が生成しやすい。ウェブ上のHTMLの学習データが圧倒的に多いから

3つ目のポイント、実はかなり重要です。

LLMはHTMLを大量に学習しているので、HyperFrames用のHTMLコンポジションを生成する精度は、React/JSX向けのコードを生成するよりも安定しやすいと考えられます。

つまり、AIに「動画を作って」と指示するなら、ReactよりHTMLの方が精度が出やすい。

これは「AIエージェントに任せる」というユースケースにとって、かなり本質的な選択だと思うんですよ。

どちらを選ぶべきか？判断基準

あえてシンプルにまとめると、こうなります。

• Remotionを選ぶべき人: Reactに慣れていて、コンポーネントの再利用や型安全性を重視するチーム開発をしたい場合
• HyperFramesを選ぶべき人: AIエージェントに動画生成を任せたい場合。または、Reactを使わずにHTMLだけで手軽に動画を作りたい場合

自分のように「Claude Codeに指示して動画を作らせたい」というユースケースでは、HyperFramesの方がフィットする場面が多そうです。

「なるほど、方向性はわかった。じゃあ内部の仕組みはどうなってるの？」——そこを次で解説します。

HyperFramesのアーキテクチャと主要パッケージ

本フレームワークはモノレポ構成で、7つのパッケージに分かれています。

「7つ？多い……」と思いますよね。

でも役割がきれいに分かれているので、全体像はすぐ掴めます。

7パッケージの全体構成

注目すべきは@hyperframes/studioです。

CLIでの作業がメインとはいえ、ブラウザベースのエディタUIも用意されています。

npx hyperframes previewコマンドで起動でき、コンポジションの見た目をリアルタイムで確認できます。

いわば「CLIで動かしつつ、ブラウザでリアルタイムプレビューできる」というハイブリッド構成ですね。

コードを書いて、横のブラウザで即座に動画の確認ができる。

これはかなり開発体験がいいと思います。

Frame Adapterパターン：GSAP・Lottie・CSS・Three.jsへの対応

この設計で面白いのが「Frame Adapter」というパターンです。

動画内のアニメーションは、複数のランタイムで実行される可能性があります。

CSSアニメーション、GSAP（GreenSock Animation Platform）、Lottie、Three.jsなど。

このフレームワークはこれらを「Frame Adapter」という抽象レイヤーで統一的に扱います。

つまり、1つの動画の中でCSSアニメーションとGSAPアニメーションとThree.jsの3Dシーンを組み合わせることができるわけです。

「え、それって普通は自分でつなぎ込まないといけないやつでは？」——そうなんです。

各ランタイムの差異はFrame Adapterが吸収してくれます。

これはRemotionにはないアーキテクチャですね。

Remotionの場合、アニメーションはReactのフレームベース（useCurrentFrame()）で統一されているので、外部のアニメーションライブラリとの統合は自分で実装する必要があります。

50+ブロックのコンポーネントカタログ

HyperFramesにはカタログシステムが組み込まれていて、50種類以上のブロック/コンポーネントが用意されています。

• ソーシャルメディアオーバーレイ
• シェーダートランジション
• データ可視化（チャート・グラフ）
• テキストアニメーション
• 背景エフェクト

これらはregistry/blocks/やregistry/components/に格納されていて、hyperframes addコマンドでプロジェクトに追加できます。

AIエージェントがこのカタログから適切なブロックを選んで組み合わせることで、人間が手作業で編集しなくても見栄えのする動画が生成できるという設計ですね。

「なるほど、50種類のパーツをAIが組み合わせて動画を作る」——これ、想像してみてください。

「SNS用の30秒動画、データビジュアライゼーション付きで作って」と指示するだけで、カタログの中から適切なブロックを選んでHTMLを生成して、MP4を吐き出してくれる。

実際にそれが動くワークフローを、次で見ていきます。

Claude Codeで動画を自動生成する手順

ここからは実践パートです。

「百聞は一見に如かず」なので、Claude Codeを使ってHyperFramesで動画を生成する手順を見ていきましょう。

スキルのインストール

Claude CodeにHyperFramesのスキルを追加するのは、コマンド一発です。

npx skills add heygen-com/hyperframes

これだけでClaude CodeがHyperFramesのAPIを理解し、HTMLコンポジションの生成やレンダリングのコマンドを実行できるようになります。

コピペでOKです。

Claude Code以外にもCursor、Gemini CLI、Codexに対応しているので、使い慣れたAIコーディングツールで試せます。

前提条件の確認

HyperFramesを動かすには以下が必要です。

• Node.js 22以上
• FFmpeg

Node.js 22はLTSリリースなので、最近の開発環境なら問題ないと思います。

FFmpegはHomebrewでbrew install ffmpegするか、各OSのパッケージマネージャーで入れてください。

プロジェクト初期化とプレビュー

手動でプロジェクトを初期化する場合は以下のコマンドです。

npx hyperframes init my-video
cd my-video

プレビューを確認するには、以下を実行します。

npx hyperframes preview

ブラウザベースのStudio UIが起動して、コンポジションの見た目をリアルタイムで確認できます。

HTMLコンポジションの基本構文

HyperFramesのHTMLコンポジションはシンプルです。

基本的な構造はこうなります。

<div id="stage"
     data-composition-id="my-video"
     data-width="1920"
     data-height="1080">

  <video id="clip-1"
         data-start="0"
         data-duration="5"
         src="intro.mp4">
  </video>

  <img id="overlay"
       data-start="2"
       data-duration="3"
       src="logo.png" />

  <audio id="bg-music"
         data-start="0"
         data-duration="9"
         src="music.wav">
  </audio>

</div>

見ての通り、普通のHTMLです。

「え、これだけ？」——これだけです。

data-composition-idでコンポジション名を定義し、data-startとdata-durationで各要素のタイムラインを制御します。

ポイントをまとめると、こんな感じです。

• data-composition-id: コンポジションの識別名
• data-width / data-height: 出力動画の解像度
• data-start: その要素が表示される開始時刻（秒）
• data-duration: 表示される時間の長さ（秒）

動画、画像、音声をHTML要素として配置し、data属性でタイミングを指定する。

これだけで動画のタイムラインが組み上がります。

今まで「タイムライン操作」というとGUIのタイムラインをドラッグして調整していた作業が、data属性の数字を変えるだけで完結するんですよ。

MP4レンダリング

コンポジションが完成したら、MP4にレンダリングします。

npx hyperframes render

内部ではPuppeteerがHTMLページをフレーム単位でキャプチャし、FFmpegがそれをMP4にエンコードします。

決定論的レンダリングなので、同じHTMLを入力すれば必ず同じMP4が出力されます。

この「決定論的」という特性は、CI/CDパイプラインに組み込む際に非常に重要です。

テストの再現性が担保されるので、動画生成パイプラインを自動化する際に「前回と違う結果が出た」という問題が起きません。

Claude Codeとの実際のワークフロー

Claude CodeにHyperFramesスキルを入れた後の実際のワークフローはこうなります。

1. Claude Codeに「こういう動画を作りたい」と自然言語で指示する
2. Claude CodeがHTMLコンポジションを生成する
3. npx hyperframes previewでプレビューを確認する
4. 必要に応じてClaude Codeにフィードバックして修正する
5. npx hyperframes renderでMP4を出力する

自分がやるのは「指示」と「確認」だけ。

HTMLを手で書く必要はありません。

まさにClaude Codeとの協働スタイルにぴったりのワークフローですね。

「これ、毎週のKPIレポートとかにも使えるのでは？」——そうです、使えます。

次でCI/CDへの組み込み方を見ていきます。

対応AIエージェントとCI/CDへの組み込み

Claude Code以外のAIエージェント対応

HyperFramesはClaude Code専用ではありません。

以下のAIエージェントに対応しています。

• Claude Code: npx skills add heygen-com/hyperframes
• Cursor: 同様のスキルインストール
• Gemini CLI: Google製のCLIエージェント
• Codex: OpenAI製のエージェント

AI-first設計の恩恵で、どのエージェントからも同じCLIインターフェースで操作できます。

非インタラクティブCLI（対話的なプロンプトがない）なので、エージェントがコマンドを実行して結果を受け取るだけの単純なフローになります。

CI/CDパイプラインへの組み込み

決定論的レンダリングという特性を活かして、CI/CDパイプラインに動画生成を組み込むことができます。

例えば、こんなユースケースが考えられます。

• プロダクトのリリースノート動画: リリースごとにマークダウンから動画を自動生成
• ダッシュボードの定期レポート: 毎週のKPIデータを動画でまとめて自動配信
• SNS投稿用の動画: テンプレートに最新データを流し込んで自動生成

GitHub Actionsのワークフローでnpx hyperframes renderを実行するステップを追加すれば、コードのプッシュをトリガーに動画が自動生成されるパイプラインが組めます。

「動画を作る」という作業が、デプロイパイプラインの一部になる——そういう世界が、今のv0.4.0でも十分視野に入る。

ただし、正直な話も書いておきます。

HyperFramesの現時点での制約と注意点

ここからは正直な制約の話です。

本ツールはv0.4.0の段階で、まだ成熟したツールとは言い切れません。

「使う前にここだけ確認しておいてください」という内容です。

Node.js 22以上が必須

Node.js 22以上という要件は、既存プロジェクトによっては障壁になります。

Node.js 18や20をLTSとして使っているプロジェクトでは、バージョンの切り替えが必要です。

nvmやvoltaなどのバージョンマネージャーを使っているなら問題ないですが、CI環境のNode.jsバージョンを上げる場合は、チーム全体の合意が要ります。

FFmpegのインストールが前提

FFmpegはほとんどの開発者のマシンに入っていると思いますが、CI/CD環境やDockerコンテナでは明示的にインストールが必要です。

GitHub ActionsのUbuntuランナーにはFFmpegがプリインストールされていますが、カスタム環境では注意してください。

v0.4.0というバージョンの意味

現時点でv0.4.0です。

メジャーバージョンが0ということは、APIが安定していない可能性があります。

本番環境の重要なパイプラインにいきなり組み込むのはリスクがあります。

ただし、Apache 2.0ライセンスで公開されていてHeyGenが自社プロダクトで使っているという事実を考えると、開発のモメンタムはある程度期待できそうです。

現時点で向いていないユースケース

以下のようなケースには、まだHyperFramesは向いていないと感じます。

• 長尺の動画制作（10分以上）: レンダリング時間とメモリ消費が大きくなる
• 高度なインタラクティブUI: ユーザー入力に応じて動的に変化する動画はスコープ外
• チームでの大規模プロジェクト: エコシステムやドキュメントがまだ未成熟

逆に、1〜3分程度のプロモーション動画、SNS向けのショート動画、データ可視化動画といった短尺コンテンツには今の段階でも十分使えると思います。

HyperFramesが向いているエンジニア・向いていないエンジニア

最後に、どんなエンジニアにHyperFramesが合うのかを整理しておきます。

向いている人:

• Claude CodeやCursorなどのAIコーディングツールを日常的に使っている
• HTMLとCSSは書けるが、Reactには不慣れ（またはReactを動画制作のためだけに学ぶのは面倒）
• CI/CDパイプラインに動画生成を組み込みたい
• 短尺の動画を大量に自動生成するニーズがある

向いていない人:

• ReactベースのUI開発に慣れていて、コンポーネント指向で動画を組み立てたい（→ Remotionの方がフィットする）
• GUIベースの動画編集が好みで、コードで動画を作ることに興味がない
• 安定したv1.0以上のツールでないと使いたくない

「自分は向いている人リストにある」と思ったなら、今すぐ試す価値があります。

まとめ：AI動画生成に「HTMLで書く」という選択肢が加わった

HyperFramesは「AIエージェントがHTMLを書いて動画を生成する」という新しいアプローチを提供するフレームワークです。

ポイントを振り返ると、こうなります。

• HTMLだけで動画を定義できる: 独自DSLやReactは不要。data-*属性でタイムラインを制御
• AI-first設計: Claude Code、Cursor、Gemini CLI、Codexに対応。非インタラクティブCLIで自動化しやすい
• 決定論的レンダリング: 同一入力→同一出力。CI/CDパイプラインに組み込める
• Frame Adapterパターン: GSAP、Lottie、CSS、Three.jsの各ランタイムを統一的に扱える
• Apache 2.0ライセンス: 完全オープンソース。商用利用も自由

「動画をコードで書く」という領域に、Remotionとは異なるアプローチで参入してきたHyperFrames。

まだv0.4.0ではありますが、HeyGenが自社プロダクトで使っていること、公開直後の注目度の高さを見ると、今後のエコシステムの成長に期待が持てます。

まずはこのコマンドを叩いてみてください。

npx skills add heygen-com/hyperframes

Claude Codeに「30秒のプロモーション動画を作って」と指示するだけで、何が出てくるか。

5分あればスキルのインストールからプレビューまで試せます。

その体験自体がHyperFramesの設計思想を理解する最短ルートだと思いますし、「HTMLで動画が作れる」という感覚を体で理解するのが一番早いですよ。

GitHub - heygen-com/hyperframes: Write HTML. Render video. Built for agents.

Write HTML. Render video. Built for agents. Contribute to heygen-com/hyperframes development by creating an account on GitHub.

github.com