heygen-com/hyperframes

HTMLを書く。動画をレンダリングする。エージェント向けに作られている。

スタジオ | クイックスタート | ショーケース | 遊び場 | カタログ | ドキュメント | ディスコード

HyperFramesは、HTML、CSS、メディア、シーク可能なアニメーションを決定論的なMP4動画に変換するためのオープンソースフレームワークです。CLIと組み合わせてローカルで、スキルを持つAIコーディングエージェントから、あるいはホストされたオーサリングワークフローのレンダリングコアとして使うことができます。

クイックスタート

AIコーディングエージェントと共に

Claude Codeの場合は、バージョン管理済みプラグインをインストールしてください:

/plugin → マーケットプレイスの自動更新を有効にしてください。 次に/hyperframes:hyperframesを使いましょう。プラグインガイドをご覧ください Copilot、VS Code、カーソル、Gemini CLI、アップデート、移行のために。

単独スキル(OpenCodeを含む)については、以下をご利用ください:

ピッカーは事前選択のまま何も設定していません — Core Skillsグループだけで十分です。/hyperframesルーターが各作成ワークフローをオンデマンドでインストールします。エージェントや非インタラクティブな実行は代わりにnpx hyperframes skills updateを使うべきです。これはコアセットを正確にインストールしますが、skills add --allは公開された21のスキルすべてをインストールします。.claude/skills / .agents/skillsの6つのリポジトリ内部スキルはデフォルトで除外されています。

Write HTML. Render video. Built for agents.

Studio | Quickstart | Showcase | Playground | Catalog | Docs | Discord

Download the desktop app: macOS · Windows · Linux (.deb)

HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows.

Using Claude Code, Codex, Cursor, or another coding agent? Run npx hyperframes skills update once, then ask your agent to make a video.

Quick Start

With an AI coding agent

For Claude Code, install the versioned plugin:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

To enable auto-update for the hyperframes marketplace, run claude in a terminal in your project. In Claude Code’s terminal UI, run /plugin, then select