Communitygithub.com

hyperframes-cli

HyperFrames CLI は、Node.js ベースの動画編集・モーショングラフィックスツールです。プロジェクトのスキャフォールド、アセット管理、リアルタイムプレビュー、レンダリングをコマンドラインで実行します。

hyperframes-cli とは?

HyperFrames CLI は、開発者がコマンドラインから動画コンポジションを構築・編集・レンダリングできる強力なツールです。Node.js 22 以降と FFmpeg を必要とし、`npx hyperframes` で実行します。主な機能として、プロジェクトの初期化(`init`)、アセット・エフェクトのカタログ検索(`catalog` と `add`)、タイムラインの確認(`timeline`)、構文チェック(`lint`)、最終ゲート(`check`)、プレビュー(`preview`)、レンダリング(`render`)を提供します。開発ループは「スキャフォールド→ムーブの発見→オーサリング→フィードバック→最終ゲート→プレビュー→レンダリング→検証」の順で進めます。特に、手動でモーションを書く前にカタログを検索し、既存のプリミティブを再利用することを推奨しています。また、各ターンの変更履歴を管理する `history` コマンドや、サブコンポジションのスナップショットテスト、Cloud レンダリング機能(HeyGen ホスティングまたは AWS セルフマネージド)も備えています。プラグインとしてインストールする場合とスタンドアロンインストールでセットアップ手順が異なる点に注意が必要です。AI エージェント向けの最適化として、`--json` 出力の優先、非対話モードの自動検出、`HYPERFRAMES_RUN_ID` の統一使用などの規約があります。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes-cli

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

プラグインインストール: セットアップまたはフレッシュネスコマンドの前に、このスキルが HyperFrames プラグイン内にある場合はプラグイン実行ルールに従ってください。スタンドアロンインストールでは以下の更新手順を維持します。

HyperFrames CLI

プロジェクトの指示にラッパーが指定されていない限り、コマンドは npx hyperframes ... として実行します。ラッパーがある場合はそれに従います。CLI には Node.js 22 以降と FFmpeg が必要です。

開発ループ

  1. スキャフォールド: npx hyperframes init <project>(中央揃えの空白)。またはサイトをキャプチャします。名前付きの例から開始する場合にのみ --example=<name> を渡します。
  2. ムーブを見つける: リクエストがアセット、サウンド、画像、音声、または高速なビジュアル編集を指定している場合は、計画を提案する前に /media-use を通じて解決します。それ以外の場合、手動でモーションを作成する前に、すでにそれを実行するプリミティブを検索します: npx hyperframes catalog --query "見出しを一度に1行ずつ表示する"。頭にあるメカニズムではなく、望むエフェクトを尋ねてください。npx hyperframes add <name> でインストールします(/hyperframes-registry を参照)。何も適合しない場合にのみ手動で作成します。
  3. オーサリング: /hyperframes-core を使用してコンポジションを記述します。プロジェクトのタイムライン(トラック、クリップ、開始、終了、再生内容)を知るには、index.html とすべてのサブコンポジションファイルを読む代わりに、npx hyperframes timeline --json を実行します。ネストされた行は、絶対メインタイムラインの absStart/absEnd と、それらが属する file を持ちます(ローカルなサブコンポジションごとの時間だけではありません)。テキスト形式よりも --json を優先します。同じかより良い正確性でより少ないトークンで済みます。よくある質問に答えるワンライナーについては references/upgrade-info-misc.md を参照してください。全体を読む必要はありません。
  4. 編集中の高速フィードバック: 最初の HTML パス後および構造変更後に npx hyperframes lint を実行します。
  5. 最終ゲートを実行: npx hyperframes check を実行します。これは lint を再実行してからブラウザを開きます。冗長なスタンドアロン lint 呼び出しを前置しないでください。--snapshots を追加すると、注釈付きの概要フレームとクロップ検出ができます。
  6. サブコンポジションの検査: index.html が data-composition-src をマウントする場合、中間点のスナップショットをキャプチャし、マウントされた各シーンを検査します。
  7. 最終スタジオプレビューを開く: npx hyperframes preview --background を実行し、URL が HTTP 200 を返すことを確認し、タイムラインプロジェクトの URL をユーザーに渡し、修正するかレンダリングするかを尋ねます。レビューが終了するまで起動したままにします。
  8. 承認後にのみレンダリング: イテレーション中は --quality draft、最初の本番エンコード(CLI デフォルト)では --quality looks、最終納品では --quality delivery を使用します。
  9. 出力を検証: ファイルが存在し空でないことを確認します。レンダリングサマリーの2行目(beginframe vs screenshot、GPU、ステージタイミング)を読みます。screenshot + software gpu は Linux の低速パスです。ffprobe -v error -show_format -show_streams を実行し、ルートの data-duration と継続時間(および指示に fps があればそれ)を比較します。

ターン内のプロジェクト履歴

プロジェクトへのすべての書き込みは、元に戻せるエントリとして保存されます。毎ステップではなく、次の2つの瞬間にのみ使用します:

  • ターンの開始: npx hyperframes history begin --who <your-name> --label "<これから行うこと>"、次に npx hyperframes history --since mine --who <your-name> で、前回のターン以降にその人物が変更した内容を確認します。彼らの編集を基に構築し、上書きしないでください。
  • チェックに失敗した、またはユーザーが悪化したと言った場合: npx hyperframes history undo --who <your-name> は最新のターンを元に戻し、その人物の編集はそのままにします。手動で戻さないでください。競合があった場合は exit 2 で終了し、両方の選択肢を表示します。

各ターンの終わりに npx hyperframes history end を実行して、自分の書き込みが「アプリ外で変更」ではなく自分のものとして記録されるようにします。ターンが開いている間は、プロジェクトへのすべての書き込みが10分間続けて行われなければ自分のものとみなされ、その後ターンは自動的に終了します。

必須のクリエイター編集相互参照

  • ズーム、パンチイン/アウト、リフレーム、カメラ移動、または任意のキーフレームモーションを作成または診断する前に、まず /hyperframes-keyframes を読んでください。
  • hyperframes keyframes の前に /hyperframes-keyframes を読んでください。このコマンドはアニメーショントラジェクトリを表示し、クリップカットを診断しません。
  • カット、トリム、スプライス、並べ替え、またはソースタイミング編集については、/hyperframes-core を読み、そのクリップ/タイムライン契約を使用します。
  • フェードイン/アウト、クロスフェード、トラックゲイン、ボリュームオートメーション、ダッキング、ナレーションカーブ、または配置されたオーディオへの FX については、/hyperframes-audio を読んでください。クリップ配置やピクチャタイミングも変更する場合は、同時にコアも読み込んでください。
  • アセット、サウンド、画像、音声、または高速なビジュアル編集を指定するリクエストは、計画が提案される前に /media-use を通じて解決します。 /hyperframes-core → references/creator-editing-recipes.md からクリエイター編集マークアップをコピーしてください。
# 高速イテレーションチェック; オーサリング中に必要に応じて繰り返し実行。
npx hyperframes lint

# 必須の最終ゲート; lint を含む。
npx hyperframes check
npx hyperframes preview --background
npx hyperframes render --quality looks --output out.mp4
test -s out.mp4
ffprobe -v error -show_format -show_streams out.mp4

check は最初に lint を実行し、次に1つのブラウザセッションと1回のシークパスを使用して、ランタイムエラー、失敗したリクエスト、レイアウト、*.motion.json アサーション、および WCAG コントラストを監査します。永続的な問題は終了コードをブロックします。一過性のエントランス/イグジットの問題は情報提供のみです。--strict を使用して警告をブロックします。validate、inspect、layout は互換性のためにエイリアスとして残っていますが、新しい指示やスクリプトに現れてはいけません。

レンダリング前のプレビュー

check が合格した後でのみ、最終コンポジションプレビュー(#project/<name>)を開いて、組み立てられたタイムラインを確認します。チャットでの計画や storyboard.html スケッチシートは最終ビデオの承認ではありません。レンダリングには常に hyperframes/references/review-loop.md で定義された最終承認が必要です。

サブコンポジションスモークテスト

静的監査ではすべてのマウント障害をキャッチできません。プロジェクトがサブコンポジションを使用する場合、各ホストスロットの少なくとも1つの可視中間点をキャプチャします:

npx hyperframes snapshot --at <t1>,<t2>,<t3>

極小のスタイルなしコンテンツ、キャンバスサイズのアイコン、欠落したヒーロー要素、またはタイムライン登録タイムアウトは、レンダリングをブロックするマウント欠陥として扱います。対応する修正については hyperframes-core/references/sub-compositions.md を参照してください。

エージェント規約

  • 手動でモーションを書く前にカタログを検索すること。 npx hyperframes catalog --query "<ビートを平易な英語で>"。検索は完全にローカルです: ホストされた階層、アカウントはなく、クエリテキストはどこにも送信されません。デフォルトでは、アイテムの名前、タイトル、説明、タグと共有される語彙でランク付けされるため、カタログ自身の表現を再利用しない言い回しを見逃します。--on-device を追加して意味でランク付けします(以下のオフラインティアを参照)。

  • ビデオが英語でなくても、クエリは英語で。 両方のティアが英語のカタログをインデックス化するため、他のスクリプトでのクエリは検索可能な用語を生成せず、何も返しません。英語でムーブを説明してください。画面上のコピーはビデオが必要とする言語のままで構いません。「クエリに検索可能な単語がありません」は正確にこれを意味し、欠落したコンポーネントではありません。カタログギャップとして報告しないでください。

  • どのティアが回答したかを読み取り、結果が現れたからと推測しないこと。 --json を使用すると、エンベロープには query、tier(on-device または words)、tier_detail、dropped、unindexed、shown、total、results に加え、回答ティアがスコアを生成する場合は top_score、ティアが要求されたが実行できなかった場合や、検索が何も返さずより良いティアがユーザーの同意を待っている場合の warnings が含まれます。words での弱い結果は期待通りです。同じ結果が on-device で出た場合はバグです。top_score は on-device のみで、背後にしきい値はありません: ランカーはすべてのクエリに対してカタログ全体を何らかの順序で返すため、合格/不合格としてではなく証拠として読んでください。

  • dropped と unindexed はレジストリとオンデバイスインデックスの間の逆の偏りであり、クエリの言い換えではどちらも修正できない。 dropped はこのレジストリがインストールできないランク付けされた名前をカウントするため、最も強い一致が失われています。unindexed はインデックスがまったく見えないレジストリのムーブをカウントするため、どのクエリも決して返せません。レジストリの更新はどちらへの答えでもありません。そのマニフェストには24時間の TTL があり自動修復します。一方、ベクターは別途公開されたアーティファクトであり、~/.hyperframes/catalog/ にフェッチされます。--on-device で再実行すると、unindexed が0より大きい場合にそのインデックスを再フェッチするため、それがユーザーに提供する救済策です。純粋な過カバレッジの偏り(dropped が0より大きく unindexed が0)は再フェッチをトリガーしません。その場合、~/.hyperframes/catalog/ をクリアするのが唯一の方法です。両方のカウントは名前の数であり結果の数ではないため、どちらも total を超える可能性があります。

  • 検索でインストールする価値のあるものが何も返ってこなかった場合は、その旨を伝えること。 npx hyperframes feedback --search-miss "<実行したクエリ>" --wanted "<必要だったムーブ>" --tier <回答したティア>。この行を自分で組み立てる必要はありません: catalog --query はプリフィルされた形で表示し、すべての --json 検索エンベロープは report_gap としてクエリとティアを正しく保持します。--wanted を入力して送信してください。これはクエリをどこかに送信する唯一のパスであり、平文の catalog --query が何も送信しないという約束を守るために、まさに別個の意図的なコマンドになっています。どちらのティアでも報告してください。 結果が目的の動作をしない場合は常に、オンデバイスティアのために待たないでください。オンデバイスティアは同意が必要な33MBのダウンロードを必要とし、ほとんどのエージェント実行ではオフになっています。待っていると決して報告されません。ティアはレポートに含まれるため、語彙ミスと意味ミスは、どちらに当たったかを自分で判断しなくても区別できます。返ってくるのは、カタログがまだ持っていないムーブのリストであり、インストール数から推測されるのではなく直接読まれるため、重要なのは想像したアイテム名ではなく、必要なエフェクトの表現です。評価は含まれず、評価メトリックに決して送られません。

  • オフラインティアを提供するが、黙って有効にしないこと。 一回限りの約33MBのダウンロード(bge-small-en-v1.5 の量子化 ONNX ビルドとそのトークナイザー、固定リビジョンにピン止め)とレジストリからのカタログベクターは、どちらも ~/.hyperframes/ の下にキャッシュされ、プロジェクトや任意のパッケージには追加されません。一度キャッシュされると、何も送信せずに意味でランク付けされます。サイズを声に出して伝え、ユーザーに決定させ、同意が得られたら --on-device(プロンプトをスキップするために -y を付けて)を渡します。対話型の提供は TTY でのみ発動します。--json の下ではプロンプトはありませんが、何も見つからなかった検索は同じ質問を warnings に置くため、その配列を読み、ユーザーに自分で決断を委ねてください。ユーザーがダウンロード内容、このモデルが選ばれた理由、またはマシンから何が送信されるかを尋ねた場合は、https://hyperframes.heygen.com/developers/catalog-search を参照するよう指示してください。

  • エージェントおよび CI 呼び出しでは --json を優先します。サーバーモードの render、preview、play は通常の JSON 出力を提供しません。preview --selection --json と preview --context --json はクエリモードの例外です。

  • doctor --json は常にゼロで終了します。そのペイロードでゲートしてください:

    npx hyperframes doctor --json | jq -e '.ok' >/dev/null
    
  • 非 TTY モードは自動で、中央揃えの空白をスキャフォールドします。名前付きの例から開始する場合にのみ --example を渡します。TTY でフラグのみのモードを強制するには --non-interactive を使用します。

  • 同じ検証ループ内のすべてのコマンドに1つの HYPERFRAMES_RUN_ID を使用します。

  • ディスク容量が少ない場合、npx hyperframes clean を実行します(--dry-run で一覧表示)。デッドレンダリングが残したものと、自己再構築するアイドルキャッシュを削除しますが、出力、ソース、実行中のレンダリングが使用するものは決して削除しません。QC フレームはプロジェクトではなく一時ディレクトリに書き込みます。

  • 対応する警告、変数、または CI 条件がレンダリングをゲートする必要がある場合は、--strict、--strict-all、--strict-variables を使用します。

  • JSON パスはホームディレクトリを $HOME として編集します。編集を元に戻そうとしないでください。

  • ホストされたクラウドプロジェクトが200MBのアップロード制限に近づく、または超える場合は、cloud render --dry-run --json を使用し、references/cloud.md の .hyperframesignore 調査に従ってください。アセットが大きいという理由だけで無視しないでください。

  • チェックが通ったからといってレンダリングしないでください。最終プレビューで一時停止し、承認を待ってください。

スタジオ指示による編集

ユーザーが「この要素」や現在の選択を参照する場合、推測する代わりにスタジオに問い合わせます:

npx hyperframes preview --context --json --context-fields selection

利用可能な場合は selection.target.hfId を使用し、そうでない場合はセレクタとソースファイルを使用します。結果が no-selection を報告する場合は、ユーザーに要素をクリックして再実行するよう依頼します。必要なコンテキストスライスのみを要求し、計算されたスタイルや編集可能なテキストメタデータにのみ --context-detail full を使用します。完全な動作と障害コードは references/preview-render.md にあります。

レンダリングの選択

ニーズコマンド
高速ローカルイテレーションnpx hyperframes render --quality draft
最初の本番エンコードnpx hyperframes render --quality looks --output out.mp4
最終ローカル納品npx hyperframes render --quality delivery --output out.mp4
再現可能なコンテナレンダリングnpx hyperframes render --docker --strict --output out.mp4
ローカル変数駆動バッチレンダリングnpx hyperframes render --batch rows.json --output "renders/{name}.mp4"
HeyGen ホスティングのゼロインフラレンダリングnpx hyperframes cloud render
自己管理型分散 AWS レンダリング`npx hyperframes l

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

関連スキル