hyperframes-keyframes作者 HeyGen

HyperFrames Keyframes スキル。

Claude Code と Codex のためのモーションとビデオスキル：HyperFrames のパンチイン、ズーム、リフレーム、ケン・バーンズエフェクト、2D/3D キーフレームを提供します。

モーションと動画
Video

heygen-com/hyperframes · skills/hyperframes-keyframes/SKILL.mdSKILL.md

--- name: hyperframes-keyframes description: Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video … --- ## Creator editing boundary ## Procedure ## Contract ## Runtime Rules ## GSAP Skeleton ## Keyframe Forms

2026-09-14 にアップストリームファイルから読み取ったフロントマターとセクション見出し · 全体で 15,899 文字

01 できること

Claude Code と Codex における hyperframes-keyframes スキルの機能

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

HyperFrames コンポジションのためのパンチイン、パンチアウト、ズーム、リフレーム、Ken Burns の動き、カメラの動き、視覚的なマッチ／ウィップハンドオフ、シークセーフな2D/3Dキーフレームを処理します。GSAP、CSS keyframes、Anime.js、WAAPI、FLIP、パス、マスク、SVG モーフ／ドロー、テキストトレイル、3D 奥行きに対応しています。キーフレームはポーズコントラクトです。すなわち可視状態、被写体の連続性、シークセーフなランタイム、検証済みのピクセルです。

クリップ内の視覚的なモーションに焦点を当てており、クリップの組み立てやシーン戦略は対象外です。同期的なランタイム構築、登録済みのタイムラインインスタンス、決定的なタイミングを必要とします。作成者は hyperframes lint、check、keyframes コマンド、絞り込んだ --shot 診断、証明時点でのスナップショットで検証します。

生成されるもの

window.__timelines[compositionId] に paused: true で登録された GSAP タイムラインインスタンス

プロンプト例を見る ↗

仕組み

01
被写体と状態の特定
キーフレームを作成する前に、アニメーションする被写体、可視状態、最終状態、ランタイムを特定します。
02
最小のメカニズムを選ぶ
プロンプトを実証する最小のメカニズムを選びます。メカニズムが不明確な場合のみ references/keyframe-patterns.md を参照してください。
03
作成と登録
宣言されたランタイムでシークセーフなキーフレームを作成し、同期的に構築してランタイムインスタンスを登録します。
04
診断による検証
hyperframes lint、check、keyframes コマンド、1つの絞り込んだ --shot、証明時点でのスナップショットを使って検証します。
05
修正と再テスト
証明に失敗した場合は、元のキーフレームを修正し、レンダリングの前に失敗した最小の診断を再実行します。

02 適合性を確認

hyperframes-keyframes スキルを使う場面

この種のモーションとビデオの作業では、Claude Code または Codex で hyperframes-keyframes スキルを使用します。適合性と制限事項はスキル自身のファイルから引用しています。

適している場合

クリップ内の非タイム視覚／クロップラッパーに対するスケールと平行移動のキーフレームによるパンチインまたはパンチアウト
1つの被写体ラッパーを維持しながら、複数状態をポーズラダーとして持つ、滑らかな複数状態ズームまたはリフレーム
アニメーション化されたラッパーの平行移動とスケールによるパン、リフレーム、または Ken Burns のカメラの動き
1つの登録済みシークセーフなタイムライン上で、ラベル付けされたトランスフォームビートによる連鎖したカメラの動き
作成されたジオメトリ、方向、速度を保持するマッチカットまたはウィップパン

境界を知る

広範なシーン戦略、ブランドデザイン、メディアの調達、キャプション、または一般的な動画企画
ソースレンジのハードカット、トリム、スプライス、並べ替え。hyperframes-core に属します
時間変化する再生速度エンベロープによるソーススピードランプ。サポートされていません
ソース中間の任意のフリーズフレーム。静止／派生セグメントの前処理が必要です

提供すべきもの

可視ポーズと最終状態意図した動きを証明するために必要なポーズ。アニメーションを完成させる最終状態を含みます。

03 スキルの内部

hyperframes-keyframes スキルが Claude Code と Codex に与えるルール

SKILL.md がエージェントに設定する 8 つの具体的な指示・既定値・制限 — 結果を変える部分です。

一時停止した GSAP タイムライン
GSAP タイムラインは gsap.timeline({ paused: true }) を使用しなければならず、レンダリングに重要な動きに対して tl.play() を呼び出してはならず、data-composition-id と一致するキーで window.__timelines[compositionId] として登録される必要があります。
Anime.js の Autoplay を False に
Anime.js のインスタンスは autoplay: false を持ち、有限の duration と loops を伴って window.__hfAnime にプッシュされる必要があります。
CSS キーフレームの Fill Mode
CSS キーフレームには有限の duration と反復回数、決定的な delay、そして animation-fill-mode: both が必要です。
タイマーやランダムを使用しない
レンダリングに重要な動きに対して、Date.now()、performance.now()、シード化されていない Math.random()、ホバー／スクロールトリガー、タイマー、非同期で作成されたタイムライン、未登録の requestAnimationFrame、または無限ループを使用してはいけません。
可視チャンネルのみをキーフレーム化する
x/y/z、scale、opacity、clip-path、mask などの可視チャンネルをキーフレーム化してください。隠れたヘルパー状態はキーフレーム化しません。
オブジェクトのアイデンティティを保持する
連続性が重要な場合はオブジェクトのアイデンティティを保持してください。意図した動きが置き換えやディゾルブである場合のみクロスフェードを行います。
最終フレームはアニメーションの一部です
最終フレームはアニメーションの一部であり、クリーンアップではありません。要求がない限り静止状態にリセットしないでください。要求がない限り黒画面で終わらせないでください。
被写体とポーズに名前を付ける
動いている被写体と、意図した動きを証明するために必要なポーズに名前を付けてください。最終状態も含みます。

04 実際に使う

Claude Code または Codex に hyperframes-keyframes をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、またはあなたのエージェントに hyperframes-keyframes を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-keyframes

skills/hyperframes-keyframes/SKILL.md 用の一般的な skills CLI 形式です。リポジトリは独自のパスを文書化している場合があります。

スキルに最初のモーション・動画タスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt

Add a Ken Burns punch-in to [clip-id] starting at 2.5s: scale from 1.0 to 1.4 over 3 seconds with ease-out, translating the wrapper 15% right and 10% up to reframe on the subject's face. Hold the final framing for 1 second. Register the timeline and verify with a strip shot showing the route.

出典：SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの：

hyperframes lint を実行して構造上の問題をチェックしてください
hyperframes check を実行してコンポジションを検証してください
hyperframes keyframesを--shotと--samples付きで実行し、ターゲット、ストップ、パス、タイムスペーシングを検証します
--layout stripを使用して、その場での動き、重なり、接触、微妙なスケール/不透明度の変化を証明します
--ghostと--angleを使用して、canvas、WebGL、シェーダーモーション、3D深度投影を証明します
最初のフレーム、プルーフポーズ、final-minus-hold、正確な最終フレームでスナップショットを取り、マスク、テキストの可読性、完全な状態、黒画面/リセットの残り無しを検証します

OpenDesignでは、SKILL.mdリンクからhyperframes-keyframesをインポートします：Plugins → Add → Skill → Import from link、その後トップバーで選択します。

OpenDesign をダウンロードクイックスタートを読む

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author: HeyGen
Repository: github.com/heygen-com/hyperframes ブランチ main
スキルファイル: skills/hyperframes-keyframes/SKILL.md 検証時に記録されたコンテンツチェックサム; コミット 558c11b
License: Apache-2.0 LICENSE より
リポジトリスター数: 49,761 heygen-com/hyperframes リポジトリ全体について 2026-09-14 に取得された GitHub スナップショット。このカタログには 9 つのスキルが含まれています。hyperframes-keyframes の評価や使用数ではありません。
OpenDesign により検証済み: 2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません（2026-08-28 確認）。このページには実行記録がありません。

SKILL.md の中身

作成者の編集境界Keyframesはビジュアルモーションを担当し、coreはクリップの組み立て、トリム、スプライス、ソースオフセット、ハードカットを担当します
手順被写体と状態の特定から、作成、検証、診断駆動の修正までの5段階のワークフロー
契約被写体とポーズに名前を付け、表示チャンネルをキーフレーム化し、アイデンティティを保持し、状態を十分な時間ホールドし、最終フレームをアニメーションとして扱います
ランタイムルールGSAPの一時停止タイムライン、CSSのfill-mode both、Animeのautoplay false、登録要件、禁止されているタイマー/ランダム/非同期パターン
キーフレーム形式配列キーフレーム、パーセンテージキーフレーム、プロパティ配列、ストップ単位のイージングを伴うease-none親、共通のフィーリングのためのeaseEach
チャンネルx/y/scale/opacityなどのコンポジター/ビジュアルチャンネルを優先し、top/left、width/height、displayなどのレイアウト/ライフサイクルチャンネルを避けます
メカニズムの選択必要性を最小のメカニズムに一致させる表：FLIP、パス移動、ストローク描画、シェイプ補間、スタガー、テキスト分割、3D
タイミングアンティシペーション、加速、ピークプルーフ、フォロースルー、オーバーシュート、イーズの選択、スタガーオフセット、最終ホールド、連続的な速度
テキスト行ボックス、単語間隔、可読性、最終的なフィット感を保持します。グリフやマスクされたバンドを動かします。読みやすいフレームでスナップショットを取ります
SVGストローク成長にはDrawSVGPlugin、シェイプ補間にはMorphSVGPlugin、プリミティブをパスに変換、複雑なシルエットを分割します
3Dperspective、preserve-3d、z移動、回転、カメラ/ワールドモーション、オクルージョン、レイヤー順序を使用します。診断アングルで深度を証明します
Canvas / WebGLカメラ、オブジェクトの変換、マテリアル、シェーダーユニフォームをキーフレーム化します。HyperFrames時間からレンダリングします。証明には--ghostを使用します

スキル自身による説明

「HyperFrames コンポジションにパンチイン、パンチアウト、ズーム、リフレーム、Ken Burns 処理、カメラムーブ、ビジュアルマッチ / ウィップハンドオフ、またはその他のシークセーフな 2D/3D キーフレームが必要な場合に使用します。GSAP、CSS keyframes、Anime.js、WAAPI、FLIP、パス、マスク、SVG モーフ / ドロー、テキストトレイル、3D デプス、または `hyperframes keyframes` 診断にも使用できます。広範なシーン戦略、ブランドデザイン、メディアソーシング、キャプション、または一般的な動画計画には使用しないでください。」

SKILL.md のフロントマター説明です。完全なファイルは約 15,899 文字です。GitHub で完全なファイルを読む。

06 インストールする前に

hyperframes-keyframesスキルに関するよくある質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

このスキルとhyperframes-animationの違いは何ですか？

このスキルはキーフレームの実装とビジュアルモーションのメカニクスを担当します。幅広いシーンのレシピやビジュアルの引き渡しの振り付けにはhyperframes-animationを使用してください。完全なコマンドドキュメントにはhyperframes-cliを使用してください。このスキルは実際のキーフレームの作成、登録、検証に焦点を当てています。

HyperFrames Keyframes

実際のモーションと動画のタスクで hyperframes-keyframes を実行します。

OpenDesign をダウンロードし、SKILL.md リンクから hyperframes-keyframes をインポートし、上記のプロンプトを貼り付け、結果の前に計画を読んでください。

OpenDesign をダウンロードすべてのスキルを見る

ターミナル

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-keyframes

Claude Code と Codex における hyperframes-keyframes スキルの機能

スキル自身の言葉で

仕組み

hyperframes-keyframes スキルを使う場面

適している場合

境界を知る

提供すべきもの

hyperframes-keyframes スキルが Claude Code と Codex に与えるルール

一時停止した GSAP タイムライン

Anime.js の Autoplay を False に

CSS キーフレームの Fill Mode

タイマーやランダムを使用しない

可視チャンネルのみをキーフレーム化する

オブジェクトのアイデンティティを保持する

最終フレームはアニメーションの一部です

被写体とポーズに名前を付ける