hyperframes プラグイン
プラグイン Claude Code デザイン デザイン・メディア制作Web・アプリ開発以下の解説は生成 AI によるものです。出典と照らし合わせてご確認ください。
HyperFramesはHeyGenによるオープンソースのフレームワークで、HTML・CSS・メディア・シーク可能なアニメーションを決定論的なMP4動画に変換します。CLIによるローカル利用のほか、インストール可能な「skills」を通じてAIコーディングエージェントから操作したり、ホスト型の制作ワークフローのレンダリングコアとして組み込んだりできます。コンポジションはタイミング用のdata属性を持つ通常のHTMLファイルであり、アニメーションはGSAP・CSS・Lottie・Three.js・Anime.js・WAAPIなどのアダプター経由で扱います。レンダリング時はヘッドレスChromeで各フレームをシークし、FFmpegで出力を符号化するため、同じ入力からは常に同じ出力が得られます。README によると、Apache 2.0ライセンスで公開されており、HeyGen社内の本番環境で使われているほか、tldrawやTanStackといったチームの利用例も紹介されています。
概要
HyperFramesはHeyGenが公開するオープンソース（Apache 2.0）の動画レンダリング用フレームワーク兼CLIです。README によると、タイミング用data属性付きのHTML/CSSコンポジションを解析し、ヘッドレスChromeでフレームを取得、FFmpegで決定論的なMP4を生成します。またClaude CodeやCursor、Gemini CLI、Codexなどのコーディングエージェントが動画を構成・レンダリングできるよう、20種類のエージェント向けskillsも同梱しています。
hyperframes でできること
- data-*タイミング属性、トラック、サブコンポジションを持つ通常のHTML/CSSファイルとして動画コンポジションを作成し、ビルド不要でブラウザ上でそのままプレビューする
- GSAP・CSSアニメーション・Lottie・Three.js・Anime.js・WAAPI、またはカスタムのフレームアダプターで要素をアニメーションさせる
- ツールチェイン内のメディア処理により、キャプション・字幕、ボイスオーバー、BGM、音声反応ビジュアルを追加する
- 既存のウェブサイトをキャプチャして動画化する（website-to-video）
- npx hyperframes addでカタログのブロック・コンポーネント（シェーダートランジション、SNS用オーバーレイ、アニメーションチャートなど）を導入する
- ローカル・Docker・AWS Lambdaでの分散レンダリングに対応し、CLIでlint・inspect・previewを行う
- product-launch-video、pr-to-video、faceless-explainer、slideshow、music-to-videoなどのAIエージェント向けskillsを導入し、コーディングエージェントに動画のプラン作成・作成・レンダリングを行わせる
- /remotion-to-hyperframesskillを使い、既存のRemotion（React）コンポジションをHyperFramesのHTMLに移行する
出典
原文の説明（英語）
HyperFrames by HeyGen. Write HTML, render video. Compositions, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website-to-video capture for HyperFrames.
hyperframes の変更履歴
- プラグイン hyperframes を追加