プラグインインストール: セットアップまたはフレッシュネスコマンドの前に、このスキルがHyperFramesプラグイン内にある場合は、プラグイン実行ルールに従ってください。スタンドアロンインストールの場合は、以下の更新手順を維持します。
HyperFrames Keyframes
キーフレームはポーズのコントラクトです：可視状態、連続した被写体同一性、シーク安全なランタイム、検証済みピクセル。
広範なシーンレシピにはhyperframes-animationを使用します。完全なコマンドドキュメントにはhyperframes-cliを使用します。実装メカニズムを選択するとき（視覚スタイルではなく）にのみreferences/keyframe-patterns.mdを参照してください。
クリエイター編集境界
キーフレームはクリップアセンブリではなく、視覚的な動きを担当します。ソース範囲のハードカット、トリム、スプライス、並べ替えは/hyperframes-coreに属します：保持範囲ごとに1つのメディア要素を作成し、data-startとdata-durationで配置し、data-media-startでソースオフセットを選択します。隣接する範囲はハードカットになります。クロスフェードは異なるトラック上のオーバーラップするクリップと視覚的な不透明度キーフレームを使用します。サウンドフェードは/hyperframes-audioを使用します。
| クリエイターリクエスト | 真実のメカニズム |
|---|---|
| パンチイン / パンチアウト | クリップ内の非タイミングのビジュアル/クロップラッパーに対して、x/yまたはパーセンテージ変換によるキーフレームscaleを使用します。ハードパンチにはset/shortトゥイーンを、スムーズな動きにはトゥイーンを使用します。 |
| スムーズなマルチステートズームまたはリフレーム | 1つの被写体ラッパーを生存させ、複数のズーム/リフレーム状態をセグメントごとのイージングを持つポーズラダーとして作成します。 |
| パン、リフレーム、またはケンバーンズカメラ移動 | ラッパーの平行移動とスケールをアニメーション化します。ジオメトリは作成されます。これは顔追跡や自動意味論的リフレームではありません。 |
| チェーンされたカメラ移動 | 1つの登録されたシーク安全タイムライン上でラベル付けされたトランスフォームビートをチェーンします。 |
| マッチカットまたはウィップパン | /hyperframes-animationがビジュアルの引き継ぎを担当し、/hyperframes-registryがプリミティブを提供します。キーフレームは作成されたジオメトリ、方向、速度を保持します。自動マッチングフレーム発見はありません。 |
| クロップとマスクリフレーム | 内側のビジュアルラッパーでclip-pathまたはマスクを補間して、ソース時間を変更せずにクロップ/リフレームします。ポリゴンキーフレームはポリゴン/マスクトランジションを形成できます。 |
| 方向性ワイプカットまたはアイリス/リビールカット | オーバーラップするビジュアルクリップ間でマスク/クリップ境界をアニメーション化します。/hyperframes-animationが引き継ぎの振り付けを担当します。 |
| 分割画面引き継ぎ | コアが配置した両方のビジュアルクリップを維持し、その内部のクロップ/マスクラッパーと仕切りジオメトリをキーフレーム化します。 |
| 一定ソースリタイム | /hyperframes-coreは、レンダー安全な画像とピッチ保持サウンドのために正規化されたdata-playback-rate（0.1..10）を所有します。メディア要素全体で一定です。 |
| ソーススピードランプ | <video>/<audio>のdata-automation内のrateレーン（クリップ秒単位のt、v 0.1..10、対数補間）。これは一定レートよりも優先されます。 |
| フリーズ / ホールド | ビジュアルポーズ、最終ソースフレーム、または完了したサブコンポジションを保持できます。任意の中間ソースフリーズはサポートされていません。静止画/派生セグメントをプリプロセスし、それを独自のクリップとして配置し、別のソース範囲で再開します。 |
画像と音声を一緒に編集する場合は、/hyperframes-core、このスキル（視覚的な動き用）、および/hyperframes-audio（フェード、クロスフェード、ボリュームオートメーション、ダッキング/カービング、または配置されたトラックへのエフェクト用）をロードします。
視覚的なトランジションやクロッピング処理は、時間的なソーストリムやスプライスではありません。/hyperframes-coreはタイムライン、クリップタイミング、ソース範囲を所有します。キーフレームは、それらのクリップ内のラッパー上の可視的な引き継ぎやクロップのみをアニメーション化します。コピー可能な画像/音声複合レシピについては、/hyperframes-core → references/creator-editing-recipes.mdを使用してください。
手順
- アニメーション化する被写体、可視状態、最終状態、ランタイムを特定します。
- プロンプトを証明する最小のメカニズムを選択します。メカニズムが不明確な場合のみ
references/keyframe-patterns.mdを読んでください。 - 宣言されたランタイム内でシーク安全なキーフレームを作成します。同期的に構築し、ランタイムインスタンスを登録します。
hyperframes lint、hyperframes check、hyperframes keyframes、1つのフォーカスされた--shot、および証明時点のスナップショットで検証します。- 証明が失敗した場合は、ソースキーフレームを修正し、レンダリング前に最も小さな失敗診断を再実行します。
コントラクト
- 動く被写体に名前を付けます。
- 意図した動き（最終状態を含む）を証明するために必要なポーズに名前を付けます。
- 隠れたヘルパー状態ではなく、可視チャンネルをキーフレーム化します。
- 連続性が重要な場合は、オブジェクトIDを保持します。
- 意図した動きが置き換えまたはディゾルブである場合にのみクロスフェードします。
- 読み取り可能または意味論的な状態を、見えるのに十分な時間保持します。
- 最終フレームはアニメーションの一部であり、クリーンアップではありません。
- 要求がない限り、静止状態にリセットしないでください。
- 要求がない限り、黒で終了しないでください。
- スターターシーンを編集する場合は、再設計を要求されない限り、レイアウト、コピー、アセット、色、最終状態を保持します。
ランタイムルール
GSAP:
- ページ読み込み時に同期的に構築する
gsap.timeline({ paused: true })を使用するwindow.__timelines[compositionId]として登録する- レジストリキーは
data-composition-idと一致する必要があります - レンダリングクリティカルなモーションに
tl.play()を呼び出さないでください - 繰り返しは有限に保ってください
CSSキーフレーム:
- 有限の持続時間と反復回数
- 決定論的な遅延
animation-fill-mode: both- タイミングがクリップに属する場合は
data-startを使用する
Anime.js:
- 同期的に作成する
autoplay: false- 有限の持続時間とループ
- すべてのインスタンスを
window.__hfAnimeにプッシュする
WAAPI:
- 有限の
duration fill: "both"- 決定論的な構築
- テキストサーフェスはWAAPIをリストしません。
--shotで検証します（WAAPIをシークします）
レンダリングクリティカルなモーションに絶対使用しないもの:
Date.now()performance.now()- シードされていない
Math.random() - ホバー/スクロールトリガー
- タイマー
- 非同期作成タイムライン
- 未登録の
requestAnimationFrame - 無限ループ
GSAP スケルトン
const root = document.querySelector("[data-composition-id]");
const compositionId = root.dataset.compositionId;
const tl = gsap.timeline({ paused: true });
tl.addLabel("state-a", 0);
tl.to(".subject", {
keyframes: [
{ x: 0, opacity: 1, duration: 0.2 },
{ x: 120, opacity: 1, duration: 0.4, ease: "power2.out" },
{ x: 100, opacity: 1, duration: 0.2, ease: "power2.inOut" },
],
ease: "none",
});
window.__timelines = window.__timelines || {};
window.__timelines[compositionId] = tl;
意味論的な状態にはラベルを使用します。チェーンされた遅延の代わりに位置パラメータを使用します。同じプロパティに触れる後続のfrom()/fromTo()トゥイーンにはimmediateRender: falseを使用します。
キーフレーム形式
- 配列キーフレーム：ステップごとの持続時間/イージングを持つポーズラダー。
- パーセンテージキーフレーム：1つのトゥイーン内の正確なタイミング。
- プロパティ配列：コンパクトなマルチストップ変更。
- 各ストップが独自のイージングを持つ場合、親で
ease: "none"。 - すべてのセグメントが同じ感触を共有する必要がある場合の
easeEach。
例から数値距離やタイミングをコピーしないでください。実際のコンポジションジオメトリと持続時間から導出してください。
2つのボックス間を移動する1つの被写体の場合は、1つの連続トランスフォームトゥイーンまたはFLIPを優先します。ビューアが異なるビートを感じるべき場合にのみ、x/y/scaleを複数のイージング付きキーフレームに分割します。すべてのセグメントは速度を変更し、ヒッチとして読まれる可能性があります。
チャンネル
コンポジター/ビジュアルチャンネルを優先する：x/y/z、xPercent/yPercent、scale、rotationX/Y/Z、skew、transformOrigin、svgOrigin、opacity、autoAlpha、clip-path、マスク、CSS変数、SVGパス/ダッシュ値、カメラトランスフォーム、シェーダーユニフォーム。
レイアウト/ライフサイクルチャンネルを避ける：top/left/right/bottom、width/height、margin/padding、display、visibility、後期DOM作成、被写体モーションを行うヘルパーオーバーレイ。
可視性の変更には、登録されたシーク可能なGSAPタイムライン上のautoAlpha、または明示的な境界でのゼロ持続時間tl.set()を使用します。クリップ以外の要素またはクリップ内のラッパーのみをターゲットにします。.clip自体は決してターゲットにしないでください。生のvisibilityをトゥイーンしないでください。また、displayをトゥイーンしないでください。
メカニズムの選択
プロンプトを証明する最小のメカニズムを選択してください：
| ニーズ | メカニズム |
|---|---|
| 同じ被写体がボックスまたは階層を変更する | 共有要素 / FLIP |
| 被写体が可視ルートを移動する | パス移動 |
| ストロークが成長またはトレースする | ストローク描画 |
| 形状が別の形状になる | 形状補間 |
| リビール境界が可視である | クリップ、マスク、またはシェーダーユニフォーム |
| 多くのアイテムが順序を持って移動する | スタガー / インデックス付き遅延 |
| テキスト自体が移動する | 行、単語、文字、またはバンド細分化 |
| サーフェスが曲がる、伸びる、またはクロップされる | 親/子カウンタートランスフォーム |
| UIに状態がある | 明示的なステートマシン |
| シーンに深さがある | DOM 3D、Three.js、またはWebGLカメラ/オブジェクトキーフレーム |
メカニズムは組み合わせることができますが、それぞれがアイデアを明確にする必要があります。装飾は証明ではありません。
タイミング
- 原因や方向を明確にする場合にのみ予備動作。
- 加速は静止から始まります。
- ピーク証明はメカニズムを間違いなく示します。
- フォロースルーはエネルギーと方向を伝えます。
- オーバーシュートは、被写体が弾力性または触感を持つべき場合にのみ使用します。
- 等速パス移動には通常
ease: "none"が必要です。 - 離散UI状態には通常、シャープなイーズアウトが必要です。
- 繰り返し要素には、同一のタイミングではなく、順序付けられたオフセットが必要です。
- 最終ロックアップは、遷移ポーズよりも長いホールドが必要です。
- 滑らかさとは、同じ被写体上の連続した速度を意味します。
- 同じトランスフォームプロパティを書き込むトゥイーンを重ねないでください。意図的で検証済みの場合を除きます。
- 同じヒーローサーフェスがスケーリングまたは移動中に、大きな
clip-path/マスクの変更をアニメーション化しないでください。メインの動きが落ち着いた後に、ネストされたリビールを使用します。
テキスト
ラインボックス、単語間隔、可読性、最終的なフィットを保持します。テキストが内部で移動する場合は、テキストの周りの装飾だけでなく、グリフまたはマスクされたバンドを移動します。読み取り可能なフレームをスナップショットします。
SVG
ストローク成長にはDrawSVGPluginを優先し、次にstroke-dasharray/stroke-dashoffsetを優先します。形状補間にはMorphSVGPluginを優先します。必要に応じてプリミティブをパスに変換し、複雑なシルエットをより単純な部分に分割します。
3D
スケールだけでは偽の奥行きです。安定した親にパースペクティブ、transform-style: preserve-3d、z移動、回転、カメラ/ワールドモーション、オクルージョン、およびオブジェクトが交差するときのレイヤー順序を使用します。
奥行き関係を公開する1つまたは2つの診断角度を使用します。角度付き証明が奥行きの交差を示さない場合は、z/カメラ/オクルージョンを改善します。
Canvas / WebGL
決定論的状態を通じて、カメラ位置、カメラターゲット、オブジェクトトランスフォーム、マテリアル不透明度、シェーダーユニフォーム、ポストプロセス強度をキーフレーム化します。HyperFrames時間からレンダリングします。マーカーボックスが内部のキャンバスモーションを見ることができないため、--ghostを使用します。
CLI 証明
npx hyperframes lint
npx hyperframes check
npx hyperframes keyframes .
npx hyperframes keyframes . --json
npx hyperframes keyframes . --runtime all
npx hyperframes keyframes . --selector "<selector>" --shot "<file>" --samples <n>
npx hyperframes keyframes . --selector "<selector>" --shot "<file>" --layout strip --from <t0> --to <t1>
npx hyperframes keyframes . --shot "<file>" --ghost --angle <angle>
npx hyperframes snapshot . --at <times>
実際のアニメーション被写体には<selector>を選択します。最初のフレーム、証明ポーズ、最終マイナスホールド、正確な最終には<times>を選択します。深さを証明する必要がある場合のみ<angle>を選択します。
| ツール | 証明内容 |
|---|---|
keyframes | ターゲット、明示的な停止、パス、トレース、構成された親/子モーション、CSS停止、Anime登録 |
--shot | ゴースト、ルート形状、時間間隔、DOM 3D投影、フォーカスされたセレクター証明 |
--layout strip | その場でのモーション、オーバーラップ、接触、微妙なスケール/不透明度、テキストウェーブ |
--ghost | キャンバス、WebGL、シェーダーモーション、レンダリングされた3D |
snapshot --at | マスク、テキスト可読性、完全な状態、最終ロックアップ、黒/リセットテール |
セレクター証明が次のように見える場合