98.8K+ダウンロード
使い方ガイドへスキップ
hyperframes-animation作者 HeyGen

HyperFrames Animation スキル。

Claude Code と Codex のためのモーションとビデオスキル：HyperFrames のアニメーションルール、シーン設計図、トランジション、ランタイムアダプターを提供します。

  • モーションと動画
  • Video
OpenDesign をダウンロード使い方ガイドを見る
heygen-com/hyperframes · skills/hyperframes-animation/SKILL.mdSKILL.md
--- name: hyperframes-animation description: All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie … --- ## Default: compose atomic rules ## Load a blueprint when ## Routing ## Picking a runtime ## Critical Constraints ## Scripts
2026-09-14 にアップストリームファイルから読み取ったフロントマターとセクション見出し · 全体で 7,755 文字

01 できること

Claude Code と Codex における hyperframes-animation スキルの役割

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

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

スキル自身の言葉で

HyperFrames に関するすべてのアニメーション知識（アトミックなモーションルール、複数フェーズのシーン構成テンプレート、シーン遷移、モーションデザインの技法、そして7つのランタイムアダプター（デフォルトの GSAP、Lottie、Three.js、Anime.js、CSS keyframes、Web Animations API、TypeGPU））を提供します。ユーザーは2〜4個のアトミックルールを選んで単一の一時停止された GSAP タイムラインで組み合わせるか、複雑な4〜5フェーズの構成向けにマルチフェーズブループリントを読み込むか、あるいはランタイム固有の API を参照します。

また、animation-map.mjs による既存コンポジションの監査や、24種類の名前付きテキストアニメーションエフェクトも対象としています。GSAP はモーション作業全体の95%においてデフォルトとして採用され、タイムラインの制御、トランスフォーム、イージング、スタガーをカバーします。すべては HyperFrames ネイティブであり、単一の一時停止されたタイムライン、シーク安全性、決定性を備えています。

生成されるもの

  • デッドゾーン、スタガーの一貫性、ライフサイクルに関する警告を含む、コリオグラフィー監査データを格納した animation-map.json
プロンプト例を見る ↗

仕組み

  1. 01
    アトミックルールの選定と組み合わせ

    rules-index.md から2〜4個のルールを選び、単一の一時停止された GSAP タイムラインでそれらをまとめます。これはデフォルトのワークフローであり、ブループリントから始めるより高速です。

  2. 02
    マルチフェーズシーン向けのブループリントの読み込み

    シーンが brand-reveal や social-proof のような既存のあらかじめデザインされたテンプレートに一致する場合は、blueprints-index.md からそのレシピを読み込み、フェーズパイプラインを再利用します。

  3. 03
    ランタイム固有 API の参照

    ルーティングテーブルを使用して、GSAP のイージングやタイムライン制御、Lottie プレイヤーのメソッド、Three.js のミキサー API、その他必要なランタイム固有のドキュメントを見つけます。

  4. 04
    animation-map によるコリオグラフィーの監査

    animation-map.mjs を実行して、すべての GSAP タイムラインを読み込み、トゥイーンを列挙し、バウンディングボックスをサンプリングし、フラグを計算して、デッドゾーンとスタガーの一貫性を監査するための animation-map.json を出力します。

02 適合性を確認

hyperframes-animationスキルを使用するタイミング

Claude Code や Codex でこの種類のモーションと動画の仕事を行う際は、hyperframes-animation スキルを使用します。適合性と制限は以下のスキル自身のファイルから取得されています。

適している場合

  • rules-index.md からトリガーまたはタグで選択されるアトミックなモーションパターン
  • 2つのクリップ間の CSS 駆動のシーン遷移
  • Three.js を使用した3Dシーン、カメラモーション、シェーダー駆動のビジュアル
  • TypeGPU を使用した、パーティクル、リキッドガラス、カスタムシェーダーによる GPU レンダリングキャンバス

境界を知る

  • レイアウト変更のための width、height、top、left のアニメーション

提供すべきもの

  • コンポジションディレクトリanimation-map.mjs を実行してコリオグラフィーを監査する際は、コンポジションディレクトリへのパスを指定してください。
  • ブループリント IDシーンがマルチフェーズテンプレートに一致する場合は、blueprints-index.md からブループリント ID を指定して、その完全なレシピを読み込んでください。

03 スキルの内部

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

SKILL.mdがエージェントに設定する7つの具体的な指示、デフォルト、制限 — ファイルの中で結果を変える部分です。

  1. レイアウト定数の事前計算

    getBoundingClientRectからトゥイーン時に位置を導出してはいけません。

  2. 空間モーションはGSAPのTransformエイリアスのみを使用します

    すべての空間モーションにはx、y、scale、rotationを使用してください。レイアウト変更のためにwidth、height、top、leftをアニメーションさせてはいけません。

  3. GSAPがデフォルトのランタイムです

    GSAPはモーション作業の95%におけるデフォルトであり、タイムラインオーケストレーション、トランスフォーム、イージング、スタッガーをカバーします。このスキルのすべてのアトミックルールはGSAPベースです。

  4. デフォルトではアトミックルールを組み合わせます

    rules-index.mdから2〜4個のルールを選んで組み合わせてください。これはブループリントから始めるよりも速く、より少ないコードで済みます。

  5. 複数のランタイムを共存させることができます

    複数のランタイムは一つのコンポジション内で共存できます。それぞれがランタイム固有のグローバルにインスタンスを登録するため、HyperFrames は一度にすべてをシークできます。

  6. ブループリントを推測で読み込まないでください

    ブループリントファイルを推測で読み込んではいけません。シーンレベルのオーケストレーションが必要だとすでに判断している場合にのみ読み込んでください。

  7. 非空間プロパティは許可されています

    許可リストでは、非空間プロパティのトゥイーンとしてopacity、color、backgroundColor、borderRadiusが許可されていますが、レイアウト変更のためのwidth、height、top、leftは決して許可されません。

04 実際に使う

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

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

Claude Code、Codex、または使用中のエージェントに hyperframes-animation を追加

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

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

skills/hyperframes-animation/SKILL.md用の汎用skills CLI形式です。リポジトリは独自のパスをドキュメント化している場合があります。

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

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

Starter prompt
Build a brand-reveal scene for [product name] using the multi-phase blueprint. The hero text should fade in with elastic ease at y:40, followed by a product card sliding up from y:60 with 0.2s stagger between child elements. Add a subtle pulse to the CTA button starting at 2.5s. Use GSAP as the runtime, ensure all spatial motion uses transform aliases (x, y, scale, rotation), and pre-calculate any layout constants at composition setup. Run animation-map.mjs on [composition directory] and output the audit results.

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

最初の結果を確認

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

  • HyperFramesが一度のパスで検索できるように、すべてのランタイムインスタンスがランタイム固有のグローバルに登録されていることを確認してください

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

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

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

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

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

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

SKILL.md の中身

  1. デフォルト：アトミックルールを組み合わせるrules-index.mdから2〜4個のルールを選び、GSAPタイムラインと組み合わせます。ブループリントより速いです
  2. ブループリントを読み込む場合シーンがマルチフェーズテンプレートに一致する場合、または実行可能な4〜5フェーズの振り付けが必要な場合に使用してください
  3. ルーティングタスクをファイルにマッピングする表：rules、blueprints、transitions、techniques、adapters、scripts
  4. ランタイムの選択GSAP、Lottie、Three.js、Anime.js、CSS、WAAPI、TypeGPUをいつ使用するか
  5. 重要な制約事前計算されたレイアウト定数、GSAPのTransformエイリアスのみ、width/height/top/leftのトゥイーンは禁止
  6. スクリプトanimation-map.mjsを実行して振り付けを検査し、animation-map.jsonを出力します
  7. 関連項目hyperframes-core、hyperframes-creative、hyperframes-cliへのリンク
スキル自身による説明
「HyperFrames のすべてのアニメーション知識 — アトミックモーションルール、多段階シーン設計図、シーン遷移、より広範なモーションデザイン技術、および 7 つのランタイムアダプター（GSAP デフォルト、Lottie、Three.js、Anime.js、CSS keyframes、Web Animations API、TypeGPU）。あらゆるモーションまたはアニメーションタスクに使用：2〜4 つのルールを選択して組み合わせるか、設計図を読み込むか、ランタイム固有の API を参照します（例：GSAP のイージング / Lottie プレーヤー / Three.js ミキサー）。既存のコンポジションの振り付け（アニメーションマップ）の監査と、24 種類の名前付きテキストアニメーション効果もカバーします。HyperFrames ネイティブ：単一の一時停止タイムライン、シーク安全、決定論的。」

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

HyperFrames Animation

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

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

OpenDesign をダウンロードすべてのスキルを見る
ターミナル
npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-animation

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート／スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応