プラグインインストール: セットアップやフレッシュネスコマンドの前に、このスキルがHyperFramesプラグイン内にある場合は、プラグイン実行ルールに従ってください。スタンドアロンインストールの場合は、以下の更新手順をそのまま使用します。
HyperFrames アニメーション
すべてのモーション知識を1つのスキルに集約: ルール(原子レシピ)、ブループリント(マルチフェーズシーンテンプレート)、トランジション(シーン間)、テクニック(より広範なモーションデザインパターン)、アダプター(ランタイムごとのAPI)。
コンポジション契約(データ属性、サブコンポジション、決定性)については hyperframes-core を参照してください。
デフォルト: 原子ルールを合成
rules-index.md から2～4つのルールを選び、単一の一時停止GSAPタイムラインで結合するだけで完了。ブループリントから始めるよりも高速で、コード量も少なくなります。
ブループリントをロードするケース
- シーンが既存の事前設計されたマルチフェーズテンプレート(ブランドリビール、ソーシャルプルーフなど)に一致し、そのフェーズパイプラインを再利用することで実際の作成時間を節約できる場合
- 複雑な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 → キャラクター |
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 seek) | adapters/waapi.md |
TypeGPU / WebGPU (navigator.gpu, WGSL, コンピュートパイプライン) | adapters/typegpu.md |
HTML-as-texture + WebGL/GLSLポストエフェクト (drawElementImageによるライブDOMキャプチャ) | adapters/html-in-canvas-patterns.md |
名前付きテキストアニメーションエフェクト (外部 animate-text スキルによる24ID) | 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が一度にすべてをシークできるようにします。
重要な制約
前提条件: hyperframes-core → 譲歩不能ルール (単一の一時停止タイムライン、data-duration が長さを管理、Math.random / Date.now / performance.now なし、repeat: -1 なし、後続シーンのクリップに対するページロード時の gsap.set なし、display や生の visibility トゥイーンなし、async / setTimeout / Promise 内でのタイムライン構築なし)。コアにより、明示的なタイムライン境界でのGSAP autoAlpha およびゼロ持続時間の可視性設定は引き続き許可されます。これらの例外は、クリップ内の非クリップ要素またはラッパーにのみ使用してください。フレームワークが .clip のライフサイクルを所有します。ここでは完全な契約を再記述しないでください。
コアの契約に加えて、アニメーション作成に関する追加事項:
- 事前計算レイアウト定数 — トゥイーン時に
getBoundingClientRect()から位置を導出しないでください。レンダラーが並列サンプリングするため、トゥイーン時のDOM計測は非同期になりがちです。コンポジションセットアップ時に座標を一度計算し、再利用してください。 - 空間モーションにはGSAPトランスフォームエイリアスのみを使用 (
x,y,scale,rotation)。コアの許可リストは非空間プロパティのトゥイーンに対してopacity/color/backgroundColor/borderRadiusも許可しますが、レイアウト変更のためのwidth/height/top/leftは決して使用しないでください。
スクリプト
node skills/hyperframes-animation/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