HTMLで動画を生成するhyperframesを実際に動かしてみた

hyperframesというOSSを初めて見たとき、「HTMLで動画を生成する」というフレーズが少し引っかかりました。
動画生成といえばSoraやRunwayのような拡散モデル、あるいはAfter EffectsやPremiere Proといったツールを思い浮かべますよね。
HTMLとCSSが動画生成の文脈に出てくるのは、最初ちょっと意外な感じがします。

実際に触ってみると、この設計には明確な意図があることが分かりました。
設計思想から内部のレンダリングパイプライン、ローカルで最初のMP4を出力するまでの手順、AIエージェントとの組み合わせ方まで、手を動かしながら整理してみます。

HTMLが動画になる、という発想の転換

hyperframesは HeyGen が開発・オープンソース化したHTMLベースの動画レンダリングフレームワークです。
Apache-2.0ライセンスで公開されており、GitHubリポジトリのタグラインは「Write HTML. Render video. Built for agents.」。
この3フレーズが設計思想のかなりの部分を正直に表しています。

「HTMLで動画を書く」という発想の価値は、消極的な文脈——「専用ツールを使わなくていい」——よりも積極的な文脈で捉えるほうが本質に近いです。
Web開発者がすでに持っているHTML・CSS・JavaScriptが、そのまま動画生成の語彙になる。
マークアップで色を決め、CSSアニメーションでモーションを書き、JSでデータを流し込む。
その延長線上で動画が出てくる、という話です。

似たアプローチとして Remotion があります。
ReactベースでTSXコンポーネントとして動画を書くフレームワークです。
hyperframesがプレーンHTMLにこだわった理由はLLMとの相性にあります。
LLMにTSXや仮想DOMを生成させると、状態管理やライフサイクルをめぐるハルシネーションが発生しやすい。
プレーンHTMLなら生成しやすく、レンダリングの挙動も予測しやすい。
この設計判断が「Built for agents.」というタグラインと直結しています。

もうひとつ重要な概念が 決定論的レンダリング です。
SoraやRunwayは同じプロンプトを渡しても毎回異なる出力が生成されます。
hyperframesは違います。
同じHTMLを渡せば、毎回同じフレーム・同じタイミング・同じ動画が出力される。
この性質が「自動化できる」「テスト可能にできる」「差分を追える」という話につながります。

フレームはどう生成されるか——Puppeteer/Chromiumベースのパイプライン

HTMLが動画になるまでの流れはこうです。

HTML入力（コンポジション定義）
ヘッドレスChromium（Puppeteer）がHTMLをロード
beginFrameスケジューリングでフレームを1枚ずつキャプチャ
FFmpegがフレームシーケンスをエンコード
MP4として出力

ポイントは beginFrame という仕組みにあります。
通常のブラウザは自分のスケジュールでフレームを描画します。
CSSアニメーションやGSAPのタイムラインは非同期で動くため、「フレーム30枚目をキャプチャしたい」と思っても、その瞬間にブラウザが何を描画しているかは保証されません。
beginFrameはChromiumのDevToolsプロトコルを通じてレンダラーを外側から制御し、「今このフレームを描画せよ」と命令する仕組みです。
アニメーションの時間軸とキャプチャタイミングが完全に同期するので、フレームレートが正確に保たれた動画が生成されます。
「ブラウザでスクショを撮り続けるだけ」との違いはここにあります。

アニメーションランタイムはCSSアニメーション単体にとどまりません。
GSAPはアダプタ経由でネイティブサポートされており、Lottie・Three.jsも使えます。
HeyGenが公開している hyperframes-launch-video は実際の製品ローンチ動画のソースコードで、49.77秒・1920×1080・30fpsの構成です。
1つのルートコンポジション（index.html）と17のサブコンポジションで成り立っており、CSS animations・GSAP・Lottie・シェーダー・Three.jsがすべて使われています。
「どこまでできるか」の実例として参考になります。

ローカルで動かすまで——セットアップから最初のMP4出力まで

前提はシンプルです。
Node.js 22以上とFFmpegが入っていれば動きます。
パッケージインストールは不要で、npxだけで実行できます。

まずプロジェクトを初期化します。

npx hyperframes init my-video
cd my-video

解像度プリセット（landscape・portrait・squareなど）を選べます。
CIやエージェントから呼び出す場合は --non-interactive フラグで対話プロンプトをスキップできます。

生成される最小構成のHTMLはこんな形です。

<!DOCTYPE html>
<html>
<head>
  <meta name="hf:duration" content="3s" />
  <meta name="hf:fps" content="30" />
  <meta name="hf:width" content="1920" />
  <meta name="hf:height" content="1080" />
  <style>
    body {
      margin: 0;
      background: #0f0f0f;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    h1 {
      color: #fff;
      font-size: 80px;
      opacity: 0;
      animation: fadein 1s ease forwards;
    }
    @keyframes fadein {
      to { opacity: 1; }
    }
  </style>
</head>
<body>
  <h1>Hello, hyperframes</h1>
</body>
</html>

metaタグで hf:duration・hf:fps・hf:width・hf:height を宣言するのが基本パターンです。
あとはふつうのHTMLとCSSです。
フェードインも文字レイアウトも、ブラウザで書くのと何も変わりません。

レンダリングはこれだけで完了します。

npx hyperframes go

renders/ ディレクトリにMP4が書き出されます。
初回はChromiumのダウンロードが走りますが、2回目以降はキャッシュが効きます。
npx hyperframes studio でブラウザUIが起動し、タイムラインを確認してから出力する流れも作れます。

AIエージェントや自動化パイプラインとの組み合わせ方

「Built for agents.」は実装として存在しています。
hyperframesには スキル という仕組みがあります。

npx skills add heygen-com/hyperframes

このコマンドを実行すると、Claude Code・Cursor・Codex・Gemini CLIといったAIコーディングツールに「hyperframesのコンポジションをどう書くか」を教えるスキルがインストールされます。
GSAPタイムラインの書き方、Tailwind v4のブラウザランタイムの使い方、アニメーションランタイムのアダプタ選択など、エージェントが正しいHTMLを生成するために必要な文脈がパッケージとして提供されています。

エージェントに「hyperframesのHTMLを書いて」と指示するだけでは、正しいmetaタグの構文を知らないまま動かないHTMLを出してきます。
スキルはその文脈注入として機能します。
「エージェントフレンドリー」という設計が、配布可能なスキルとして具体化されているのは思っていたより実用的です。

自動化パイプラインからhyperframesを呼び出すとき、Node.jsから子プロセス経由でCLIを実行するパターンが自然です。

import { execSync } from "child_process";
import { writeFileSync, mkdirSync } from "fs";
import path from "path";

function generateHtml({ title, metrics }) {
  return `<!DOCTYPE html>
<html>
<head>
  <meta name="hf:duration" content="5s" />
  <meta name="hf:fps" content="30" />
  <meta name="hf:width" content="1920" />
  <meta name="hf:height" content="1080" />
  <style>
    body { margin: 0; background: #111; color: #fff;
           font-family: sans-serif;
           display: flex; flex-direction: column;
           align-items: center; justify-content: center; height: 100vh; }
    h1   { font-size: 64px; opacity: 0;
           animation: fadein 1s ease forwards; }
    p    { font-size: 36px; color: #aaa; }
    @keyframes fadein { to { opacity: 1; } }
  </style>
</head>
<body>
  <h1>${title}</h1>
  <p>訪問数: ${metrics.visits} / コンバージョン: ${metrics.conversions}</p>
</body>
</html>`;
}

const projectDir = path.resolve("./renders/weekly-report");
mkdirSync(projectDir, { recursive: true });

writeFileSync(
  path.join(projectDir, "index.html"),
  generateHtml({ title: "8月 週次レポート", metrics: { visits: 12400, conversions: 312 } })
);

execSync("npx hyperframes go --non-interactive", {
  cwd: projectDir,
  stdio: "inherit",
});

HTMLが中間フォーマットとして機能するのがこの構成の自然さです。
LLMが生成したコンテンツ、データベースから取得した数値、APIから返ってきたテキスト——それらをHTMLに注入して動画化できます。
定期レポートの動画化なら、毎週の数値をデータソースから取得→HTMLテンプレートに流し込む→hyperframesがレンダリング→Slackに添付、という流れをスケジューラーで回すだけです。
商品紹介動画も同様で、商品データベースとテンプレートを組み合わせればSKUの数だけ動画を自動生成できます。

向いているユースケース・向いていないユースケース

正直に言うと、hyperframesはすべての動画制作ニーズをカバーするものではなく、得意な領域と苦手な領域がはっきりしています。

得意なのはデータ駆動型のモーショングラフィックスです。
テキスト・数値・チャート・アイコンを組み合わせた動画、SNS向けのアニメーションテンプレート、定期生成が求められるレポート動画——「構造が決まっていて、データだけ変わる」ユースケースにはかなり強いです。
決定論的な出力は自動化との相性が抜群で、パイプラインに組み込んでもテストや差分確認がしやすい。

苦手なのは、ブラウザのレンダリングエンジンでは表現しきれない映像です。
After Effectsレベルのポリッシュを求めるモーショングラフィックス、実写映像のカット編集、複雑な3Dレンダリング——これらはhyperframesの守備範囲外です。
また、ヘッドレスブラウザでフレームを1枚ずつキャプチャするアーキテクチャ上、長尺の動画をリアルタイムで生成するような用途にも向きません。
バッチ処理・非同期ジョブとして設計するのが現実的です。

「自分のプロジェクトに合うか」を判断するとき、3つの問いが軸になります。
構造が決まっていてデータだけ変わるか。
出力が決定論的である必要があるか。
HTMLの表現力で十分か。
この3つにYESが揃うなら、hyperframesはかなり有力な選択肢です。
映像としての完成度を最優先にする場面では、別のアプローチを選んだほうがいいでしょう。

株式会社ホコサキは山口県宇部を拠点に、Web制作・業務システム開発・AI活用支援・DX推進に取り組んでいます。
自動化パイプラインやAIエージェント連携の設計・実装支援もお声がけください。
お問い合わせはこちら