HyperFrames - HTMLで動画を作るAIエージェント向けオープンソースフレームワーク

• Remotionに似ており、HTML + CSS + GSAPだけで映像を制作し、MP4としてレンダリング
• Reactや独自DSLなしで、純粋なHTMLファイル自体がそのまま動画コンポジションとなり、ビルド段階なしでindex.htmlがそのまま再生される
• Claude Code、CodexなどのAIコーディングエージェントがHTMLを直接書くワークフローに最適化
  • npx skills add heygen-com/hyperframesでエージェントにフレームワークのパターンを学習させられる
  • Claude Codeでは/hyperframes、/hyperframes-cli、/gsapスラッシュコマンドで直接呼び出し可能
  • OpenAI Codexプラグイン、Cursorプラグインも別途提供
• 使い方
  • やりたいことを説明: "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music"
  • 既存コンテンツを動画化:
    • "Take a look at this GitHub repo https://github.com/heygen-com/hyperframes and explain its uses and architecture to me using /hyperframes."
    • "Summarize the attached PDF into a 45-second pitch video using /hyperframes."
    • "Turn this CSV into an animated bar chart race using /hyperframes."
  • 特定フォーマット: "Make a 9:16 TikTok-style hook video about [topic] using /hyperframes, with bouncy captions synced to a TTS narration."
  • 反復作業 - エージェントを動画エディタのように使う:
    • "Make the title 2x bigger, swap to dark mode, and add a fade-out at the end."
    • "Add a lower third at 0:03 with my name and title."
• 手動で始める方法

  npx hyperframes init my-video  
  cd my-video  
  npx hyperframes preview      # preview in browser (live reload)  
  npx hyperframes render       # render to MP4  
  

  • hyperframes initがスキルを自動インストールするため、その後はいつでも使用可能
• Frame Adapterパターンにより、GSAP、Lottie、CSS、Three.jsなど任意のアニメーションランタイムを自由に接続可能
• 同一入力 = 同一出力を保証する決定的（Deterministic）レンダリングにより、自動化パイプラインに適している
• 50種類以上の事前制作済みブロック・コンポーネントカタログを提供（シェーダートランジション、ソーシャルオーバーレイ、データチャートなど）。npx hyperframes add <ブロック名>でインストール可能

  npx hyperframes add flash-through-white   # shader transition  
  npx hyperframes add instagram-follow      # social overlay  
  npx hyperframes add data-chart            # animated chart  
  

• hyperframes capture <url>コマンドでWebサイトをキャプチャして動画に変換するフルパイプラインをサポート
• Remotionとの比較における主な違いは成果物（HTML vs React）とライセンス
  • HyperFrames: Apache 2.0（OSI認証）— 完全に商用利用可能で、レンダリングごとの課金や席数上限、会社規模の制限なし
  • Remotion: ソース公開（source-available）カスタムライセンス - 4人以上の会社では有料の企業ライセンスが必要
  • HyperFramesはビルド段階なしでindex.htmlを直接再生し、Remotionはbundlerが必要
  • GSAP・Anime.js・Motion Oneのようなライブラリのクロックアニメーションは、HyperFramesではseekableでフレーム精度を維持するが、Remotionではレンダリング時にwall-clockで再生される
  • RemotionはLambda分散レンダリングが本番利用可能な状態だが、HyperFramesは現在単一マシンでのレンダリングのみ対応
• パッケージ構成: CLI、core（型・パーサー・リンター）、engine（Puppeteer + FFmpegキャプチャ）、producer（全体レンダリング）、studio（ブラウザエディタ）、player（Webコンポーネント）、shader-transitions
• Apache 2.0ライセンス、TypeScriptベース

[xguru]

Remotion に着想を得たもので、ほぼ似ていますが、React を取り除いて完全に HTML で作るツールです。
ひとまずうちは小規模な会社なので Remotion をそのまま使っています。
Remotion は 3 人までしか無料ではないので、もう少し大きな規模であればこの HyperFrames を使うとよさそうです。