hyperframes-animation

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

HyperFramesアニメーション

目次

• デフォルト：アトミックルールを組み合わせる
• ブループリントを読み込む場合
• ルーティング
• ランタイムの選択
• 重要な制約
• スクリプト
• 関連項目
• 参照ファイル

モーションに関するすべての知識を1つのスキルにまとめています。ルール（アトミックなレシピ）、ブループリント（複数フェーズのシーンテンプレート）、トランジション（シーン間の切り替え）、テクニック（より幅広いモーションデザインのパターン）、アダプター（ランタイムごとのAPI）が含まれます。

コンポジションの契約（データ属性、サブコンポジション、決定性）については、hyperframes-coreを参照してください。

デフォルト：アトミックルールを組み合わせる

rules-index.mdから2〜4個のルールを選び、単一の一時停止状態のGSAPタイムラインでつなぎ合わせれば完了です。ブループリントから始めるより速く、コードも少なくなります。

ブループリントを読み込む場合

• シーンが既存の事前設計済み複数フェーズテンプレート（brand-reveal、social-proofなど）に合致し、そのフェーズのパイプラインを再利用することで実際の作成時間を短縮できる場合
• 複雑な4〜5フェーズの振り付けを実行できる、信頼できるコードが必要な場合

ブループリントはblueprints-index.mdにあります。各エントリからblueprints/<id>.md（レシピ）に移動できます。先回りして読み込まないでください。シーンレベルのオーケストレーションが必要だと判断してから読み込んでください。

ルーティング

目的	参照先
トリガー／タグから基本的なモーションパターンを選ぶ	rules-index.md
1つのルールのHTML／CSS／GSAPレシピ全体を読む	rules/<name>.md
複数フェーズのシーンテンプレートを選ぶ	blueprints-index.md
1つのブループリントのレシピ全体を読む	blueprints/<id>.md
シーントランジションを作成する（CSS駆動、2つのクリップ間）	transitions/overview.md、transitions/catalog.md
より幅広いモーションデザインのテクニックを調べる	techniques.md
モーションブラー — 要素のシャッターによるブレ、および使わない方がよい場合	references/motion-blur.md
既存のコンポジションのアニメーションマップを分析する	scripts/animation-map.mjs
GSAP API — タイムライン／トゥイーン／位置パラメーター	adapters/gsap.md
GSAP — すぐに使えるエフェクトレシピ	rules/gsap-effects.md
GSAP — トランスフォーム／パフォーマンス	adapters/gsap-transforms-and-perf.md
GSAP — イージング／スタガー	adapters/gsap-easing-and-stagger.md
GSAP — タイムライン／ラベル	adapters/gsap-timeline-and-labels.md
Lottie／dotLottie（After Effectsの書き出し、window.__hfLottie）	adapters/lottie.md
キャラクターアニメーション（歩行サイクル、マスコット、関節式パペット、ジェスチャー）	adapters/lottie.md → Characters
Three.js／WebGL（3Dシーン、AnimationMixer、hf-seek）	adapters/three.md
Anime.js（window.__hfAnime）	adapters/animejs.md
CSSキーフレーム（animation-delay／play-state／fill-mode）	adapters/css-animations.md
Web Animations API（element.animate()、currentTimeによるシーク）	adapters/waapi.md
TypeGPU／WebGPU（navigator.gpu、WGSL、コンピュートパイプライン）	adapters/typegpu.md
テクスチャとしてのHTML＋WebGL／GLSLのポストエフェクト（drawElementImageでライブDOMをキャプチャ）	adapters/html-in-canvas-patterns.md
名前付きテキストアニメーションエフェクト（外部のanimate-textスキル経由の24個のID）	adapters/animate-text.md

ランタイムの選び方

• GSAP は、モーション制作の95%で使うデフォルトです。タイムラインのオーケストレーション、トランスフォーム、イージング、スタッガーに対応します。このスキルのアトミックルールはすべてGSAPをベースにしています。
• Lottie は、アセット自体に事前に作成されたタイムラインがある場合（通常はAfter Effectsからの書き出し）に使います。歩く、身振りをする、反応するキャラクターなどが該当します。
• Three.js は、3Dシーン、カメラモーション、シェーダー駆動のビジュアルに使います。
• Anime.js は、GSAPを使うほどではない軽量なトゥイーンに使います。
• CSS は、シンプルな反復モチーフ、装飾、シマーに使います。JavaScriptのアニメーションコストはかかりません。
• WAAPI は、GSAPに依存せず、ブラウザー標準のキーフレームを使う場合に使います。
• TypeGPU / WebGPU は、GPUで描画するキャンバス（パーティクル、液体ガラス、カスタムシェーダー）に使います。

1つのコンポジション内で複数のランタイムを共存させられます。それぞれのランタイム固有のグローバルにインスタンスを登録すると、HyperFramesは1回の処理ですべてをシークできます。

重要な制約

前提条件：hyperframes-core → 1つの一時停止中のタイムライン + 必須ルール（一時停止中のタイムラインは1つ、長さはdata-durationで決定、Math.random / Date.now / performance.nowは使用しない、有限のルートdata-durationがない場合はrepeat: -1を使用しない、後のシーンのクリップにページ読み込み時のgsap.setを使用しない、displayまたはvisibilityの直接的なトゥイーンを使用しない、非同期コールバック（document.fonts.ready内でビルドする場合など）でビルドを実行するときも、タイムラインの構築が完全に終わってから登録する）。GSAPのautoAlphaと、明示的なタイムライン境界でのゼロ時間の表示設定は、coreのルールで引き続き許可されています。これらの例外は、クリップ以外の要素か、クリップ内のラッパーにのみ使用してください。.clipのライフサイクルはフレームワークが管理します。ここで契約全体を繰り返す必要はありません。

coreの契約に加わる、アニメーション制作上の制約：

• レイアウト定数は事前に計算する — トゥイーンの実行時にgetBoundingClientRect()から位置を導出しないでください。レンダラーが並行してサンプリングするため、トゥイーン実行時のDOM計測は同期ずれを引き起こします。コンポジションのセットアップ時に一度だけ座標を計算し、再利用してください。
• 空間的なモーションにはGSAPのトランスフォームエイリアスのみを使用する（x、y、scale、rotation）。coreの許可リストでは、空間的でないプロパティのトゥイーンにopacity / color / backgroundColor / borderRadiusも許可されています。ただし、レイアウトの変更にwidth / height / top / leftを使用することはできません。

スクリプト

node <SKILL_DIR>/scripts/animation-map.mjs <composition-dir> \
  --out <composition-dir>/.hyperframes/anim-map

window.__timelinesに登録されたGSAPタイムラインをすべて読み込み、トゥイーンを列挙し、バウンディングボックスをサンプリングしてフラグを計算し、animation-map.jsonに出力します。作成後の振り付け（デッドゾーン、スタッガーの一貫性、ライフサイクルの警告）を監査するために使用してください。

animation-map.mjsは、まず現在のプロジェクトからヘルパーパッケージを解決し、その後、同梱されているHyperFramesパッケージのバージョンをブートストラップできます。同梱CLI／スキルのインストール外でスキルを実行し、ブートストラップするバージョンを明示的に固定する必要がある場合にのみ、HYPERFRAMES_SKILL_PKG_VERSION=<version>を設定してください。

関連項目

• hyperframes-core — コンポジションの構造、データ属性、サブコンポジション、決定論的なレンダリング契約
• hyperframes-creative — パレット、タイポグラフィ、ナレーション、ビートの計画（アニメーション以外のクリエイティブディレクション）
• hyperframes-cli — npx hyperframes lint / check / snapshot / preview / render

参考ファイル

該当するトピックを扱う場合は、対応するファイルを直接読んでください。レシピを選ぶ際には、引き続きインデックスを利用できます。

アダプター

• Text Effects — Reference — このアニメーションランタイムまたはアダプター API を使用する際に参照してください。
• Anime.js for HyperFrames — このアニメーションランタイムまたはアダプター API を使用する際に参照してください。
• CSS Animations for HyperFrames — このアニメーションランタイムまたはアダプター API を使用する際に参照してください。
• Easing, Stagger, and Function-Based Values — このアニメーションランタイムまたはアダプター API を使用する際に参照してください。
• Timelines and Labels — このアニメーションランタイムまたはアダプター API を使用する際に参照してください。
• Transforms and Performance — このアニメーションランタイムまたはアダプター API を使用する際に参照してください。
• HyperFrames GSAP — このアニメーションランタイムまたはアダプター API を使用する際に参照してください。
• HTML-in-Canvas Patterns — このアニメーションランタイムまたはアダプター API を使用する際に参照してください。
• Lottie for HyperFrames — このアニメーションランタイムまたはアダプター API を使用する際に参照してください。
• Three.js for HyperFrames — このアニメーションランタイムまたはアダプター API を使用する際に参照してください。
• TypeGPU / WebGPU for HyperFrames — このアニメーションランタイムまたはアダプター API を使用する際に参照してください。
• Web Animations API for HyperFrames — このアニメーションランタイムまたはアダプター API を使用する際に参照してください。

ブループリント

• agent-progress-theater — エージェント進捗の演出 — この複数フェーズのシーンを構成するときに読みます。
• camera-journey — カメラの旅 — この複数フェーズのシーンを構成するときに読みます。
• comparison-split — 比較スプリットカード — この複数フェーズのシーンを構成するときに読みます。
• constellation-hub — 星座／ハブ＋サテライト — この複数フェーズのシーンを構成するときに読みます。
• cta-morph-press — CTAの変形と押下 — この複数フェーズのシーンを構成するときに読みます。
• cursor-ui-demo — カーソル操作によるUIデモ — この複数フェーズのシーンを構成するときに読みます。
• dataviz-countup — データビジュアライゼーション／カウントアップ — この複数フェーズのシーンを構成するときに読みます。
• device-surface-showcase — デバイス／サーフェスの紹介 — この複数フェーズのシーンを構成するときに読みます。
• fixed-anchor-cycle — 固定アンカー、変化する世界 — この複数フェーズのシーンを構成するときに読みます。
• grid-card-assemble — グリッド／カードの組み立て — この複数フェーズのシーンを構成するときに読みます。
• kinetic-type-beats — キネティックタイポグラフィのビート — この複数フェーズのシーンを構成するときに読みます。
• logo-assemble-lockup — ロゴの組み立て → ロックアップ — この複数フェーズのシーンを構成するときに読みます。
• overwhelm-surround — 圧倒／包囲 — この複数フェーズのシーンを構成するときに読みます。
• panel-edit-live-sync — パネル編集、ライブ同期 — この複数フェーズのシーンを構成するときに読みます。
• prompt-type-submit-generate — プロンプト入力、送信、生成 — この複数フェーズのシーンを構成するときに読みます。
• spatial-pan-stations — 空間パン／ステーション — この複数フェーズのシーンを構成するときに読みます。
• ticker-takeover — ティッカーの置き換え／占拠 — この複数フェーズのシーンを構成するときに読みます。
• titlecard-reveal — タイトルカード／単一カードのリビール — この複数フェーズのシーンを構成するときに読みます。
• transcript-scroll-artifact-reveal — トランスクリプトのスクロールによる成果物のリビール — この複数フェーズのシーンを構成するときに読みます。
• typewriter-reveal — タイプライター式リビール — この複数フェーズのシーンを構成するときに読みます。
• video-text-pivot — 動画 → テキストへの切り替え — この複数フェーズのシーンを構成するときに読みます。
• zoom-out-workspace-reveal — ズームアウトによるワークスペースのリビール — この複数フェーズのシーンを構成するときに読みます。

ガイド

• ブループリント（実証済みの構成） — シーンのブループリントを選ぶときに読みます。
• ルールインデックス — トリガーやタグから基本的なモーションルールを選ぶときに読みます。
• ビジュアルテクニックリファレンス — より広範なモーションデザインのテクニックを選ぶときに読みます。

リファレンス

• モーションブラー — アニメーション要素に適用するシャッターの残像 — 要素単位のモーションブラーとその制限を確認するときに読みます。

ルール

• 3D カメラフライト — このアトミックモーションのレシピを適用する際に参照してください。
• 3D ページスクロール — このアトミックモーションのレシピを適用する際に参照してください。
• 3D テキスト深度レイヤー — このアトミックモーションのレシピを適用する際に参照してください。
• AI トラッキングボックス — このアトミックモーションのレシピを適用する際に参照してください。
• アンビエントグローブルーム — このアトミックモーションのレシピを適用する際に参照してください。
• アンカードレイアウト拡張 — このアトミックモーションのレシピを適用する際に参照してください。
• ASR キーワードグロー — このアトミックモーションのレシピを適用する際に参照してください。
• アバタークラウドネットワーク — このアトミックモーションのレシピを適用する際に参照してください。
• 2段階カメラカーソルトラッキング — このアトミックモーションのレシピを適用する際に参照してください。
• カードモーフアンカー — このアトミックモーションのレシピを適用する際に参照してください。
• 中心から外側への拡張 — このアトミックモーションのレシピを適用する際に参照してください。
• チャートスクラブ表示 — このアトミックモーションのレシピを適用する際に参照してください。
• 色収差グリッチ — このアトミックモーションのレシピを適用する際に参照してください。
• コンテキスト対応カーソル — このアトミックモーションのレシピを適用する際に参照してください。
• コントロールとターゲットの同期 — このアトミックモーションのレシピを適用する際に参照してください。
• 座標ターゲットズーム — このアトミックモーションのレシピを適用する際に参照してください。
• 動的スケールでのカウント — このアトミックモーションのレシピを適用する際に参照してください。
• マーカー強調表示の CSS パターン — このアトミックモーションのレシピを適用する際に参照してください。
• カーソルクリックの波紋 — このアトミックモーションのレシピを適用する際に参照してください。
• カーソルドラッグ — このアトミックモーションのレシピを適用する際に参照してください。
• 被写界深度ぼかし（選択的フォーカス／ラックフォーカス） — このアトミックモーションのレシピを適用する際に参照してください。
• 奥行き方向への散乱 ↔ 集合 — このアトミックモーションのレシピを適用する際に参照してください。
• 個別テキストシーケンス — このアトミックモーションのレシピを適用する際に参照してください。
• 動的コンテンツのシーケンス — このアトミックモーションのレシピを適用する際に参照してください。
• グラデーションテキストスイープ — このアトミックモーションのレシピを適用する際に参照してください。
• HyperFrames 向け GSAP エフェクト — このアトミックモーションのレシピを適用する際に参照してください。
• ハッカーフリップ 3D リビール — このアトミックモーションのレシピを適用する際に参照してください。
• キネティックビートスラム — このアトミックモーションのレシピを適用する際に参照してください。
• モーションブラーの軌跡 — このアトミックモーションのレシピを適用する際に参照してください。
• 複数カーソルの振り付け — このアトミックモーションのレシピを適用する際に参照してください。
• 多段階カメラ — このアトミックモーションのレシピを適用する際に参照してください。
• ナッジカーブ — このアトミックモーションのレシピを適用する際に参照してください。
• 3D エントリー付きオービット — このアトミックモーションのレシピを適用する際に参照してください。
• パーティクルバースト — このアトミックモーションのレシピを適用する際に参照してください。
• 物理的な押下リアクション（カーソルと要素の同期） — このアトミックモーションのレシピを適用する際に参照してください。
• 押下・リリースのスプリングチェーン — このアトミックモーションのレシピを適用する際に参照してください。
• リアクティブディスプレイスメント — このアトミックモーションのレシピを適用する際に参照してください。
• スケール切り替えトランジション — このアトミックモーションのレシピを適用する際に参照してください。
• サイン波ループ（微細な揺れ／範囲を限定したアンビエント効果） — このアトミックモーションのレシピを適用する際に参照してください。
• 分割チルトカード — このアトミックモーションのレシピを適用する際に参照してください。
• スプリングポップの登場 — このアトミックモーションのレシピを適用する際に参照してください。
• 統計バーと塗りつぶし — このアトミックモーションのレシピを適用する際に参照してください。
• SVG アイコンの拡張 — このアトミックモーションのレシピを適用する際に参照してください。
• SVG パス描画 — このアトミックモーションのレシピを適用する際に参照してください。
• テーマのクロスフェードモーフ — このアトミックモーションのレシピを適用する際に参照してください。
• 垂直スプリングティッカー（スロットマシン） — このアトミックモーションのレシピを適用する際に参照してください。
• ビューポート変更（仮想カメラ） — このアトミックモーションのレシピを適用する際に参照してください。
• ウォーターフォール形式の登場 — このアトミックモーションのレシピを適用する際に参照してください。

トランジション

• トランジションレジストリ — 機械可読な信頼できる情報源 — このシーントランジションを選択または実装する際にお読みください。
• トランジションカタログ — このシーントランジションを選択または実装する際にお読みください。
• 3D — このシーントランジションを選択または実装する際にお読みください。
• ぼかし — このシーントランジションを選択または実装する際にお読みください。
• カバー — このシーントランジションを選択または実装する際にお読みください。
• 破壊 — このシーントランジションを選択または実装する際にお読みください。
• ディゾルブ — このシーントランジションを選択または実装する際にお読みください。
• 歪み — このシーントランジションを選択または実装する際にお読みください。
• グリッド — このシーントランジションを選択または実装する際にお読みください。
• 光 — このシーントランジションを選択または実装する際にお読みください。
• メカニカル — このシーントランジションを選択または実装する際にお読みください。
• その他 — このシーントランジションを選択または実装する際にお読みください。
• リニア／プッシュ — このシーントランジションを選択または実装する際にお読みください。
• 放射状／シェイプ — このシーントランジションを選択または実装する際にお読みください。
• スケール／ズーム — このシーントランジションを選択または実装する際にお読みください。
• シーントランジション — このシーントランジションを選択または実装する際にお読みください。