HyperFrames（heygen-com/hyperframes）：HTMLで書いた画面をMP4動画に書き出せるClaude Code対応フレームワーク

HyperFrames（heygen-com/hyperframes）は、HTML・CSS・画像・音声などで書いた画面とアニメーションを、MP4動画として書き出すオープンソースのフレームワークです。READMEの標語は「Write HTML. Render video. Built for agents.」で、Claude Codeなどのコーディングエージェントに動画制作を任せる使い方を想定しています。商品紹介、サービスの説明動画、字幕付きの短い動画などを、Web制作の延長で作りたい個人事業主やサイト運営者が主な対象です。ライセンスはApache 2.0で、READMEには書き出し1回ごとの課金や商用利用の条件はないと書かれています。

何ができるツールか
導入方法
注意点
結び

何ができるツールか

仕組みは、ヘッドレスのChromeでHTMLを1フレームずつ描画し、FFmpegで動画にまとめるというものです。同じ入力から同じ出力が得られる「決定論的レンダリング」をうたっています。タイミングやトラックはHTMLのdata属性で指定するため、ReactやビルドのStepは不要とされています。アニメーションはGSAP、CSS、Lottie、Three.js、Anime.js、WAAPIなどに対応します。

エージェント向けには21個のスキルが公開されています。企画、制作、アニメーション、音声ミックス、素材調達、CLI操作などを扱い、/hyperframesというルーターが「製品紹介」「解説動画」「PRの動画化」「字幕」「スライドショー」などの作り方を選びます。ほかに、遷移・字幕・グラフ・地図などの部品カタログ、ブラウザで開くプレビューとStudio、ローカル・Docker・AWS Lambda・HeyGenのクラウドによる書き出しが用意されています。

導入方法

前提は、Node.js 22以上とFFmpegです。ヘッドレスChromeも使いますが、READMEに個別の導入手順は書かれていません。Claude Codeでは、プラグインとして次の2コマンドで追加します。

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

導入後は、/pluginの「Marketplaces」でhyperframesの自動更新を有効にするよう案内されています。呼び出しは/hyperframes:hyperframesです。Claude Code以外のエージェントや、プラグインを使わない場合は、スキルだけを入れる方法もあります。

npx skills add heygen-com/hyperframes
npx skills add heygen-com/hyperframes --all
npx hyperframes skills update

1行目は対話式の選択画面が開き、「Core Skills」だけで足りるとされています。2行目は21個すべてを入れます。3行目はmainの最新版から入れる方法で、READMEによるとskills addは最新版より数時間遅れることがあります。エージェントを使わず、CLIだけで動画を作る場合の流れは次のとおりです。

npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render

previewはブラウザでライブリロード付きの確認、renderはMP4への書き出しです。部品はnpx hyperframes add data-chartのように追加します。

注意点

Node.js 22以上、FFmpeg、ヘッドレスChromeが必要です。動画のフレームを1枚ずつ描画するため、書き出しにはマシンの処理能力と時間がかかる前提で考える必要があります。
サンプルのHTMLはGSAPをcdn.jsdelivr.netから読み込みます。skills addはスキル登録先（skills.sh）へ問い合わせます。外部通信が発生する箇所があります。
AWS Lambdaでの分散書き出しにはAWSアカウントが要り、課金も発生すると考えられます。HeyGenのクラウド書き出しやStudio・playgroundについて、READMEにはアカウントの要否が書かれていません。
/pr-to-videoはghコマンド経由でGitHubのPRを読みます。/figmaはFigmaから取り込むため、Figmaへのアクセス権が必要です。いずれもトークンの範囲を確認してから渡してください。
/media-useは、カタログに素材がない場合に音声合成・音楽・画像生成のモデルを呼ぶことがあります。READMEには提供元や必要なAPIキーが明記されていません。外部サービスに送る内容と費用は、利用前に公式ドキュメントで確認が要ります。
リポジトリ全体をcloneする場合、約240MBのテスト用mp4をGit LFSで管理しています。通常の利用では不要で、GIT_LFS_SKIP_SMUDGE=1 git cloneでLFSの取得を省けます。