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

 (github.com/heygen-com)
21 ポイント 投稿者 xguru 2 일 전 | 1件のコメント | WhatsAppで共有
  • 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ではシーク可能でフレーム精度を維持する一方、Remotionではレンダリング時にwall-clockで再生される
    • RemotionはLambda分散レンダリングが本番運用対応済みだが、HyperFramesは現在単一マシンでのレンダリングのみ対応
  • パッケージ構成: CLI、core（型・パーサー・リンター）、engine（Puppeteer + FFmpegキャプチャ）、producer（全体レンダリング）、studio（ブラウザエディタ）、player（Webコンポーネント）、shader-transitions
  • Apache 2.0ライセンス、TypeScriptベース

関連記事

1件のコメント

 
xguru 2 일 전

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