heygen-com/hyperframes

動画を自動で作らせようとすると、たいてい編集ソフト独自の保存形式が壁になる。エージェントに書かせるにも、人が差分を読むにも向いていない。HyperFrames の答えは「動画を1枚の HTML として書く」。映像・見出し・音楽を、それぞれ <video> <h1> <audio> としてそのまま置き、いつ出していつ消えるかを data-start（開始秒）や data-duration（長さ）といった属性で指定する。重なりの前後関係もトラック番号の属性で決める。React も専用の書き出しも要らず、index.html はブラウザでそのまま再生できる。

肝は動きの付け方にある。ふつうのウェブのアニメーションは「時計」で進むので、コマ単位で正確に切り出そうとすると噛み合わない。HyperFrames が求めるのは任意の時点に頭出しできる形で書くこと。たとえば GSAP なら、止めた状態のタイムラインを作って所定の場所に登録しておく。そうしておくと変換のとき、書き出し側は「0.0秒の絵を出せ」「0.033秒の絵を出せ」と1コマずつ頭出しして写真を撮ることができる。撮った絵は FFmpeg で MP4 に固められる。再生時間に依存しないので、同じ入力からは同じ動画が出る。CI に載せる、差分を回帰テストする、といった使い方が最初から想定されている。GSAP のほか CSS アニメーション、Lottie、Three.js、Anime.js、WAAPI が差し替え可能な接続部として並んでいる。

もう一つの柱がエージェント向けの手順書。20個のスキルが同梱され、/hyperframes という案内役をまず読ませる作りになっている。そこから「製品紹介の動画」「プルリクエストを解説する動画」「既存のトーク動画に字幕を焼く」「音楽に合わせて刻む」といった目的別の手順に振り分けられ、必要になったものだけを取りに行く。動画の作り方の型（構成を決める→HTMLを書く→動きを繋ぐ→素材を入れる→検査→試写→書き出し）を、汎用のウェブの資料からは学べない部分ごと教える位置づけだ。トランジションや字幕、グラフといった部品は hyperframes add で取り込める一覧が用意されている。

文言や数字だけ差し替えた動画を、何度も作りたいとき

素材の一覧や機能紹介のように、中身が入れ替わるだけの動画が定期的に要る場合。HTML なので、どこを変えたのかが差分として残る。誰が作っても同じところに落ちる。

エージェントに動画を作らせたいが、専用形式で詰まっているとき

エージェントは HTML なら普通に書ける。コマンドも対話を求めない作りなので、手順の中に組み込みやすい。プルリクエストから解説動画を作る、といった開発寄りの用途が手順書として最初から用意されている。

動きの書き方に制約がある。 「頭出しできるように書く」という条件は、ふだんのウェブのアニメーションの書き方と同じではない。頭出しできる形で書くことが前提になっている。ここは学習が要るところで、注意の中身は同梱のスキル側に書かれている。

Node.js 22以上と FFmpeg が必要。 書き出しは手元か Docker、あるいは AWS Lambda に分散させる道が用意されている。長い動画をたくさん作るなら、書き出しにかかる時間と計算資源は先に見ておきたい。

開発目的で丸ごと複製すると重い。 回帰テスト用の完成動画が Git LFS で約240MB 入っている。ソースだけ要るなら LFS の中身を飛ばす方法が README に書かれている。

Remotion との違いは書き方の思想。 作者自身が Remotion に影響を受けたと明記したうえで、あちらは React 部品、こちらは素の HTML、と整理している。すでに React で組んだ資産があるなら、移行用の手順（一方向）はあるが、乗り換えの是非は別に判断したほうがいい。ライセンスの違い（Apache-2.0 と、Remotion 独自のライセンス）は、商用で使うなら確認しておく点になる。

HeyGen という会社の公開物である点。 クラウドでの書き出しは同社の提供として案内されている。README は公開されている側について「書き出し1回ごとの課金も、商用利用の線引きも無い」と明記している。一方でクラウドでの書き出しの料金には触れていないので、そこは同社側で確かめることになる。