製品紹介やプルリクエストの解説など、短い動画を作りたい場面は増えていますが、動画編集ソフトのタイムラインを手で調整するのは手間がかかり、内容を少し直すたびに作業をやり直すことになりがちです。こうした作業を、Webページと同じHTMLとCSSで書き、コマンドでMP4に書き出す形にしようとしているのが、OSSの「HyperFrames」です。HeyGenのGitHub組織で公開されており、READMEでは「HTML、CSS、メディア、シーク可能なアニメーションを決定的なMP4動画に変えるオープンソースのフレームワーク」(筆者訳)と説明されています。
公式READMEに記載されている情報をもとに、どのような仕組みで、どのような場面で検討対象になり得るかを整理します。
42秒の概要動画も作りました(音声あり)。
動画をHTMLとして書く
HyperFramesでは、動画の構成(コンポジション)を1つのHTMLファイルとして書きます。要素ごとに、いつ表示を始めるか、どれだけの長さ表示するか、どのトラックに置くかをdata属性で指定します。READMEの例を簡略化すると、次のような形です。
<h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>
READMEでは、Reactは必須ではなく独自のタイムライン形式もないこと、ビルドステップがなく index.html をそのままブラウザでプレビューできることが特徴として挙げられています。
アニメーションは既存のライブラリで
アニメーションはアダプター方式で、GSAP、CSSアニメーション、Lottie、Three.js、Anime.js、WAAPI、または独自のランタイムを使えるとされています。条件は、フレーム単位で任意の時点に移動(シーク)できるアニメーションであることです。
同じ入力から同じ動画を作る仕組み
レンダラーはヘッドレスChromeで各フレームにシークして撮影し、FFmpegでエンコードします。READMEではこれを「same input, same frames, same output」と表現し、CIや回帰テスト、自動レンダリング向けとしています。ローカルのほか、DockerやAWS Lambdaでのレンダリング経路も挙げられています。
導入方法
READMEに記載されている、CLIでの基本的な流れは次のとおりです。
npx hyperframes init my-video
cd my-video
npx hyperframes preview # ブラウザでプレビュー(ライブリロード)
npx hyperframes render # MP4に書き出し
必要なものは Node.js 22以上 と FFmpeg です。AIコーディングエージェントから使う場合は、HyperFramesのスキルをインストールして、作りたい動画を説明する方法も紹介されています。ライセンスはApache 2.0で、READMEにはレンダリングごとの料金や商用利用の上限はないと書かれています。
Remotionとの違い
READMEには、同じくヘッドレスChromeとFFmpegで動画を作るRemotionとの比較表があります。HyperFramesはRemotionから着想を得たとしたうえで、違いを書き方に置いています。RemotionはReactコンポーネントで書き、バンドラーが必要です。HyperFramesは素のHTMLで書き、人もエージェントも扱いやすいことを重視しています。一方で、クラウドでの分散レンダリングについてはRemotion Lambdaを「成熟した」ものとして挙げています。
どのような場面で検討するか
こうした特徴から見て、製品紹介やドキュメントの解説動画をコードとして管理したい場合、AIエージェントに動画の構成を書かせたい場合、同じテンプレートで内容だけ変えた動画を繰り返し作りたい場合に、検討候補として挙がりそうです。
READMEだけでは判断できない点
READMEは機能と比較の一覧であり、長尺動画のレンダリング時間やマシン負荷、音声の細かな編集への向き不向き、既存の動画編集ワークフローとの併用のしやすさは書かれていません。フレームごとにブラウザで撮影する方式のため、動画の長さや解像度によっては書き出しに時間がかかる可能性もあります。導入を検討する場合は、公式ドキュメントやShowcaseを確認し、自分たちの環境で試す必要があります。
出典: https://github.com/heygen-com/hyperframes/blob/main/README.md
公式READMEをもとに、AIを執筆・推敲支援に使用しています。実機検証の報告ではありません。概要動画はREADMEをもとに作成した説明用のモーショングラフィックで、HyperFramesで制作したものではありません。