HTMLを書けばMP4が出る：HyperFramesは動画をAgentが作れるものに変えた

HTMLを書いて、MP4を受け取る

HeyGenが今月HyperFramesをオープンソースにした。キャッチコピーはほとんど乱暴なほどそっけない。HTMLを書く、動画をレンダリングする、Agentのために作った。中に拡散モデルは入っていない。何も夢から生まれていない。ウェブページを書くと、そのページがヘッドレスChromeで読み込まれ、指定したタイムスタンプのフレームが一枚ずつキャプチャされ、FFmpegがそれを一つのファイルに繋ぐ。

動画モデルが一文から説得力のある街並みを作れるこの一年で、それは後退に見える。実際は逆だ。HyperFramesが解くのは、生成モデルが最も苦手な半分、つまり同じものが二回とも同じ形で出てこなければならない部分だ。

Apache-2.0で、10月中旬時点で約63,900スター。一日で千以上増え、10月12日までの一週間でnpmダウンロードは約811,000。Agentが動画を作るというカテゴリで、桁違いに最も使われている存在だ。そしてそこに至るまで、オリジナルの画素を一つも生成していない。

決定性が実際に何を買うのか

動画拡散モデルはサンプリングの過程だ。同じプロンプトを二回投げれば、二本の違う動画が出てくる。探索しているときは問題ない。納品するときは最悪だ。

HyperFramesは逆を行く。各コンポジションは一つのindex.htmlだ。クリップは普通の要素で、開始時刻、長さ、トラック番号をdata属性で持たせる。アニメーションはGSAPのタイムライン、CSS keyframes、Lottie、Three.js、Anime.js、Web Animations APIから来る。レンダラーはページを読み込み、リアルタイム再生ではなくseekで各フレームに飛び、キャプチャし、そのシーケンスをFFmpegに渡す。同じ入力、同じフレーム、毎回。

その性質は地味だ。Agentをループに入れるまでは。コピーを一行直したAgentは、動画の他の部分が動いていないことを知る必要がある。生成モデルなら、テキスト修正後の再レンダリングはクリップ全体を引き直すことで、タイミングが生き残ることを祈るしかない。決定論的レンダラーなら、修正は修正でしかない。

チームにとっては個人より効く二次的な利点もある。動画がdiffできる成果物になる。バージョン3と4の間で何が変わったかが見える。HTMLだからだ。

本当の製品はスキルだ

レンダラーは簡単な方だ。難しいのは、動画を埋め込んだウェブページに見えないコンポジションを書くことを、コーディングAgentに教えることだ。

HyperFramesには21個のagent skillが同梱され、/hyperframesがリクエストを読んでワークフローを選ぶルーターになる。カタログは機能ではなく実際の仕事の形をしている。URLやブリーフから作る製品ローンチ動画、テキストからの顔出しなし解説、ビートにカットを合わせる音楽から動画への変換、埋め込みキャプション、トーキングヘッドの再編集、ロゴスティングやスタットカード用の短いモーショングラフィックス。skillはClaude Code、Codex、Cursor、Gemini CLIで動く。

一番賢いのはframe.mdだ。いまや多くのブランドがdesign.mdを維持している。色、タイプスケール、余白のルール。Agentが読めるように。問題は、そのルールが画面向けに書かれていることだ。動画に当てると、Agentは素直に14ピクセルの本文とナビゲーションバーを作る。ルールがそう言っているからだ。frame.mdは同じブランドシステムを動画のスケールで書き直す。腕を伸ばした距離でも読める文字、16:9のクロップに耐える構図、行き先のあるモーション。ギャラリーには十数個のスターターシステムが入っていて、その一つは彩度の高い赤一つで組んだヴィンテージスポーツ誌のルックだ。

Agent製の動画がプロに見えるかどうかを決めるのは、こういう地味なディテールだ。美しいフレームを生成できるモデルは、あなたのブランドに特定の赤があることを知らない。skillファイルは知っている。

Remotionとの比較を、正直に

HyperFramesはReactベースの動画フレームワークRemotionから公言している通り影響を受けている。チームは本番でRemotionを使い、それが開拓したパターンについてソースに帰属コメントを残し、そして一つ違う賭けをした。RemotionはReactコンポーネントを書かせ、HyperFramesはHTMLを書かせる。

交換条件は明快だ。Remotionは本物のプログラミングモデルとビルドステップをくれる。HyperFramesはビルドステップが一切ない。index.htmlはそのまま動く。そして言語モデルがHTMLとCSSに極めて強く、Reactにはそこそこ、という事実に寄りかかる。Agentファーストのツールにとってそれは正しい賭けだ。最適化対象の失敗モードは、いかにも動きそうなJSXを書いてコンパイルが通らないAgentだからだ。

要件は控えめだ。Node 22以上、FFmpeg、Chrome。レンダーワーカーあたりRAMは約256MB。GPUは不要。レンダリングはローカル、AWS Lambda、HeyGenのホスト型サービスで走る。お金が動くのはここだ。ローカルは自分のマシン以外タダ、ホスト型はクレジット課金、4Kは1.5倍。

10月10日出荷の0.8.145はHyperFrames StudioにGPUエクスポートを追加し、長い書き出しが90%で止まるバグを直した。小さなリリースノートだが、プロジェクトが今どこにいるかをよく語っている。研究用のデモではない。バグトラッカーがあり、プログレスバーが嘘をつけば気づくユーザーがいるツールだ。

正直な限界

HyperFramesは映像素材を発明できない。群衆、滝、特定の動きをする人の顔が必要なら、これは間違ったツールで、動画モデルを使うべきだ。レンダリングするのはコードで記述したものだ。タイポグラフィ、チャート、UIウォークスルー、ローワーサード、キネティックタイポ、すでに持っている3Dオブジェクト、すでに撮った映像。

出力の質は、Agentが書いたHTMLの質そのものだ。弱いAgentはフェード付きのスライドショーを出す。skillは下限をかなり引き上げるが、センスの代わりにはならないし、この動画が何のためなのかを最後まで言わなかったプロンプトを救いもしない。

そしてStudioデスクトップアプリはHeyGenアカウントでのサインインを求めるようになった。妥当なビジネス判断であり、無料なのはエンジンであって製品全体ではないというリマインダーでもある。

もう一つの動画モデルより、これが重要な理由

この一年のAI動画は同じ軸の競争だった。より長いクリップ、より良い物理、より一貫したキャラクター。どれも本物の進歩で、どれも生成についての話だ。

しかしプロの動画の大きな割合は生成ではない。正しく動かなければならないチャート、0:03に出なければならないローワーサード、スマホで読めなければならないタイトル。そうした仕事はより良いモデルを待っていたのではない。飽きず、ずれない何かに仕事を渡す方法を待っていた。

HyperFramesはその受け渡しであり、一番強い主張は品質の話ではない。決定性は機能だ、ということだ。同じ入力から同じ出力を出すツールだけが、パイプラインを組めるツールになる。それ以外は、とても印象的なスロットマシンだ。