heygen-com/hyperframes

HyperFrames – HTML + CSS を決定論的な MP4 動画に変換

何であるか – 通常のウェブマークアップ（HTML、CSS、メディアファイル、およびシーク可能なアニメーションライブラリ）として動画を記述できるオープンソースの Node.js フレームワークです。HyperFrames はその記述を、完全に再現可能な MP4 にレンダリングします。CLI でローカルに、またはクラウド/Lambda バックエンド経由で実行できます。AI コーディングエージェント（Claude、Gemini、Cursor など）がロードできる スキル のセットを同梱しており、LLM に「10秒のプロダクト紹介を作成して」と指示すると、エージェントは自動的に必要な HTML を生成し、アセットを取得、Lint を実行、プレビューを行い、最終的に hyperframes render を呼び出します。

---

コアコンセプト

コンセプト	機能
HTMLベースのコンポジション	普通の HTML ファイルを書くだけで、data-start、data-duration、data-track-index などの特別な data-* 属性を追加して、動画のタイムラインとトラックレイアウトを定義します。
シーク可能なアニメーションアダプタ	HyperFrames は GSAP、Lottie、Three.js、Anime.js、CSS WAAPI、またはカスタムアダプタを駆動でき、すべてのアニメーションは シーク可能 に強制され、レンダラーが任意のフレームに決定論的にジャンプできるようになります。
メディアOS（/media-use）	画像、音声、動画、TTS、音楽などを、ローカルファイルから、または必要なアセットが不足している場合に生成モデルを呼び出して解決する統合アセットマネージャです。
スキルルーター	/hyperframes スキルは、自然言語のリクエストを 10 以上の作成ワークフロー（プロダクト発表動画、フェイスレス解説、PR→動画など）のいずれかにマッピングする小さなインテントレイヤーです。
CLI	`npx hyperframes init

---

主な機能（「作成ワークフロー」）

• プロダクト発表動画 – ウェブサイトやスクリプトを 30〜90 秒のマーケティングクリップに変換。
• フェイスレス解説 – テキストから LLM が独自に発明したグラフィックを含む視覚的解説を生成。
• PR→動画 – GitHub PR URL を入力すると、変更履歴風のウォークスルーが生成される。
• 埋め込み字幕 / トークヘッド再編集 – 既存の映像に字幕やグラフィックオーバーレイを追加。
• モーショングラフィックス – 短い、ナレーションなしのキネティック作品（ロゴスティング、チャートヒットなど）。
• 音楽→動画 – ビート駆動の動画をオーディオトラックに同期。
• スライドショー / デッキ – 平面的な動画ではなく、インタラクティブでナビゲート可能なプレゼンテーションを出力。
• 一般動画 – より長時間または複数シーンの構成に使用する汎用的なワークフロー。
• Remotion→HyperFrames – Reactベースの Remotion コンポジションから一方向の移行。

---

使い方（クイックスタート）

# 1. AIエージェント用の HyperFrames スキルセットをインストール
npx skills add heygen-com/hyperframes   # インタラクティブピッカー（コアスキルのみ）
# または非インタラクティブ実行の場合
npx hyperframes skills update          # コアセットを直接インストール

# 2. エージェントにプロンプトを送信、例：
# "`/hyperframes` を使って、フェードインタイトル、背景動画、微細な背景音楽を含む10秒のプロダクト紹介を作成してください。"

# 3. エージェントは HTML コンポジションを生成し、プレビューを実行（`hyperframes preview`）して確認後、
cd my-video
npx hyperframes render   # 確定的な video.mp4 を出力

AIを使わないで手動で作業したい場合も、同じ CLI が利用可能：

npx hyperframes init my-video
cd my-video
npx hyperframes preview   # ブラウザでライブリロード
npx hyperframes render    # MP4 を生成（FFmpeg 必須）

---

エコシステムと拡張性

• ドメインスキル – 小さなオンデマンドモジュール（/hyperframes-animation、/hyperframes-keyframes、/hyperframes-audio、/media-use、/figma など）で、ルーターがこれらを組み合わせます。
• カタログ & レジストリ – hyperframes catalog で再利用可能なブロック（トランジション、エフェクト、デザイントークン）を閲覧・インストールでき、新しいものを上流に貢献可能。
• デザインブリッジ（frame.md） – ブランドのウェブデザインシステムを反映する「デザイン→動画」仕様で、LLM がブランドトークンを尊重しながらコンポジションを生成しやすくします。
• クラウド & サーバーレスレンダリング – HeyGen のインフラストラクチャ上でホストレンダリング、または自己ホストの AWS Lambda 関数によるオプションレンダリング。

---

どんな人が使うか

• AI駆動のコンテンツパイプライン – LLM でマーケティング動画、PRウォークスルー、データ可視化クリップを自動生成したい企業。
• デザイン→動画チーム – 既にウェブスタイルのデザインシステムを維持しているデザイナーで、決定論的な方法でモーショングラフィックスをエクスポートしたい人。
• 動画アスコードツールを開発する開発者 – 専有のモーショングラフィックスDSLではなく、HTML/CSS を好む人。
• 教育者 / ハッカー – スキルシステムにより、コードを書かずに LLM 駆動の動画作成を実験しやすい。

---

インストールと要件

• Node.js ≥ 22（npm で hyperframes として公開）。
• ローカルレンダリング用に FFmpeg がホストマシンに必要。
• オプション：Bun（Codexプラグインパッケージスクリプトで使用）。

---

詳細情報の入手先

• クイックスタート: https://hyperframes.heygen.com/quickstart
• ショーケース（リミックス可能な完成動画）: https://hyperframes.heygen.com/showcase
• プレイグラウンド（オンラインエディタ）: https://www.hyperframes.dev/
• ドキュメント / イントロダクション: https://hyperframes.heygen.com/introduction
• Discordコミュニティ: https://discord.gg/EbK98HBPdk

---

結論 – HyperFrames は、AI コーディングエージェントとのス kill ルーター統合により、決定論的で HTML 重視の動画作成を可能にします。LLM がウェブ開発スタックにとどまりながら、モーショングラフィックスの生成、プレビュー、レンダリングを実行できます。