HyperFrames

Write HTML. Render video. Built for agents.

1 — 概要
何か

HyperFrames は、HTML ベースの動画コンポジションを作成・検査・プレビュー・レンダリングするオープンソースの枠組み。エージェントがそのまま扱える 宣言的な HTML + data 属性 を正とし、CLI は非対話で自動化パイプラインに載せやすい設計になっている（heygen-com/hyperframes、Apache 2.0）。

HTMLコンポジション
MP4ローカル / Docker
20+CLI コマンド
Apache2.0
クイックスタート: npx hyperframes init my-video → npx hyperframes lint → npx hyperframes inspect → npx hyperframes preview（Studio + ライブリロード）→ npx hyperframes render。Node.js 22 以上と FFmpeg が前提。エージェント向けには npx skills add heygen-com/hyperframes でスキル一式を取り込める。
2 — なぜ HyperFrames か
設計の要点
  • HTML-native — コンポジションは HTML + data 属性。React 専用 DSL ではなく、マークアップでタイムラインを表現する。
  • AI-first — エージェントは HTML を既に書ける。CLI はデフォルト非対話で、Claude Code・Cursor・Codex などのプラグイン／Skills と組み合わせやすい。
  • Deterministic rendering — 同じ入力なら同じ出力。自動生成パイプライン向け。
  • Frame Adapter — アニメーション実行環境を差し替え可能（GSAP、Lottie、CSS、Three.js など）。
Remotion との違い: どちらもヘッドレス Chrome と FFmpeg を使うが、Remotion は React コンポーネント、HyperFrames は HTML + CSS + GSAP を主な作者インターフェイスに置く。Apache 2.0 の完全 OSS である点も、再配布や商用利用を考えると大きな判断材料になる。
カタログ

50 以上のブロック・コンポーネント（ソーシャルオーバーレイ、シェーダー遷移、データ可視化など）を npx hyperframes add <name> で追加できる。一覧は公式サイトの Catalog を参照。

3 — 構成とデータモデル
HTML でのコンポジション例

ルートに data-composition-id、解像度・開始時刻、各メディアに data-start / data-duration / data-track-index を付与し、ブラウザでプレビューしたあとキャプチャして動画化する。

<div id="stage" data-composition-id="my-video" data-start="0"
     data-width="1920" data-height="1080">
  <video id="clip-1" data-start="0" data-duration="5" data-track-index="0"
    src="intro.mp4" muted playsinline></video>
  <img id="overlay" class="clip" data-start="2" data-duration="3"
    data-track-index="1" src="logo.png" />
  <audio id="bg-music" data-start="0" data-duration="9" data-track-index="2"
    data-volume="0.5" src="music.wav"></audio>
</div>
レンダリングの流れ（概念）

コアが HTML を解釈し、エンジンがシーク可能なページ→映像キャプチャにし、プロデューサーがエンコードとオーディオミックスまで担当するイメージ。

Composition (HTML) → @hyperframes/core → @hyperframes/engine → @hyperframes/producer → MP4
Pipeline
flowchart TD H["HTML + data-*"] --> C["@hyperframes/core"] C --> E["@hyperframes/engine"] E --> P["@hyperframes/producer"] P --> M["MP4 / 出力"] C --> V["preview / lint CLI"]
CLI の基本ループ

最新の CLI スキルでは、生成した HTML をいきなりレンダリングせず、lint と inspect で構造と見た目を先に検査する流れが推奨されている。

段階コマンド目的
構造検査npx hyperframes lintdata-composition-id、トラック重なり、タイムライン登録漏れなどを検出。
視覚検査npx hyperframes inspectヘッドレス Chrome でタイムラインをサンプルし、テキストのはみ出しやクリップを報告。
プレビューnpx hyperframes previewStudio を開き、http://localhost:<port>/#project/<name> を確認面にする。
出力npx hyperframes renderMP4 / WebM を生成。--quality、--fps、--docker などで調整。

補助コマンドとして catalog、compositions、browser、docs、doctor、upgrade、validate、snapshot、capture も用意されている。

4 — モノレポのパッケージ
役割
パッケージ説明
hyperframes（packages/cli）プロジェクト作成、プレビュー、lint、レンダリングなどの CLI
@hyperframes/core型、パーサ、ジェネレータ、リンタ、ランタイム、フレームアダプタ、Studio API、registry / text API
@hyperframes/engineシーク可能なページ→映像キャプチャ（Puppeteer + FFmpeg）
@hyperframes/producerキャプチャ + エンコード + オーディオミックスまでのパイプライン
@hyperframes/studioブラウザ上のコンポジション編集 UI
@hyperframes/player埋め込み用 <hyperframes-player> Web コンポーネント
@hyperframes/shader-transitionsWebGL シェーダーによるトランジション
5 — エージェント向け Skills
Vercel Skills 形式

HyperFrames は Vercel Skills として公開されており、npx skills add heygen-com/hyperframes で取得できる。エージェントにフレームワーク固有のパターンを教える用途。

Skill内容
hyperframesHTML コンポジション、キャプション、TTS、オーディオ連動アニメ、トランジション
hyperframes-cliinit / lint / inspect / preview / render / validate / transcribe / tts / doctor など
hyperframes-registryhyperframes add によるブロック・コンポーネント導入
website-to-hyperframesURL をキャプチャして動画化するパイプライン
remotion-to-hyperframesRemotion（React）コンポジションを HTML + GSAP の HyperFrames 構成へ移すための変換ガイド
gsapGSAP の API、タイムライン、イージング、プラグイン、パフォーマンス
公式・関連