HyperFrames

HyperFrames は HeyGen のオープンな HTML から MP4 エンジンに、読み込み可能な技能パックを足したものです。ドキュメントは hyperframes.heygen.com/introduction。リポジトリ heygen-com/hyperframes は Apache-2.0、作成日 2026-03-10、TypeScript。2026-09-10 の GitHub は 48,513 stars、4,443 forks、同日に push。README：HTML を書いて動画を描く。エージェント向け。プレイグラウンドは hyperframes.dev。

静止画だけなら Generate Image、短い GIF なら Slack GIF Creator、/hyperframes を載せるホストなら Claude Code を見てください。

主な機能

• HTML コンポジション：data-start、data-duration、トラック、シーク可能なアニメーションアダプタ（GSAP、CSS、Lottie、Three.js、Anime.js、WAAPI）。React 必須ではなく、素の index.html にバンドラも不要です。
• 公開技能 20：README は先に /hyperframes を読めと書きます。プロダクトローンチ、顔出しなし解説、PR から動画、モーション、スライド、Remotion 移植などを振り分けます。コアセットは必要時に入り、--all で公開分を全部入れます。
• CLI ループ：npx hyperframes init、preview、lint、render。HeyGen クラウドと AWS Lambda もドキュメントにあります。Node.js 22+ と FFmpeg が必要です。
• 決定的キャプチャ：ヘッドレス Chrome が各フレームをシークし、FFmpeg が符号化。同じ入力は同じ MP4。
• frame.md：DESIGN.md の上位集合。エージェントがウェブの部品を推測せず、ブランドトークンで組めます。

制限：48,513 stars は熱量であり監査ではありません。README は npx skills add が main より数時間遅れることがあると注意し、現行コアは npx hyperframes skills update を勧めています。FFmpeg と Node 22 は必須。Apache-2.0 はエンジン。HeyGen クラウドレンダーはその経路の課金です。

使用シナリオ

• Claude Code / Codex / Cursor 利用者が After Effects を開かずに製品紹介や PR 解説の MP4 を欲しいとき。
• design.md があるチームが同じトークンを 1920×1080 に載せたいとき。
• 本当は Generate Image で足りる人：静止画だけ。

料金

はじめに

1. npx skills add heygen-com/hyperframes で Core Skills を選ぶか、非対話なら npx hyperframes skills update。
2. npx hyperframes init my-video && cd my-video && npx hyperframes preview。
3. エージェントへ：/hyperframes でタイトルがフェードインする 10 秒の製品イントロを作る。
4. プレビューがよければ npx hyperframes render。

第一者資料：Quickstart と README。

よくある質問

HeyGen の SaaS そのものですか？

違います。Apache-2.0 のレンダラと技能パックです。HeyGen 製品はクラウドレンダーをホストできます。ローカルレンダーに HeyGen アカウントは不要です。

20 技能を全部入れる必要がありますか？

不要です。README：ピッカーは何も選ばない状態から始まります。Core Skills で足ります。--all は意図的な操作です。

Remotion との違いは？

README の比較：Remotion は React、HyperFrames は HTML。Remotion License は source-available、HyperFrames は Apache-2.0。

代替案

• Generate Image：静止画生成技能。
• Slack GIF Creator：短い GIF。MP4 パイプラインではない。
• Claude Code：このパックを読めるコーディングエージェント。

ヒント

1. Apache-2.0、48,513 stars、Node 22+、FFmpeg、20 技能は 2026-09-10 のページから引用する。
2. 古い skills.sh スナップショットより npx hyperframes skills update を優先する。
3. アニメーションはシーク可能に。壁時計だけの GSAP はレンダラでずれます。

まとめ

HyperFrames はエージェントが書ける HTML 動画スタックです。技能 20、CLI、Apache-2.0 のローカルレンダー。ドキュメント から始めてください。静止画だけなら Generate Image を開いてください。