animaxxing

Animaxxing

ポータブルな素の TypeScript と GSAP によるエフェクトレシピです。プロジェクトのフォント、色、レイアウト、コンポーネントのスタイルを維持してください。スタイルスキル、トークン、フォントは必要ありません。

対応する gsap-<framework> スキル（通常のサイトでは gsap-vanilla）を先に読み込み、見つからない場合はインストールしてください。このスキルが マウント → 初期状態 → イントロ → 定常状態 → アウトロ → 終了状態 → アンマウント、初期化、ナビゲーション、復旧、中断、クリーンアップのタイミングを管理します。このスキルがビルダーにコントローラー呼び出しを提供するため、ここでライフサイクルに関する指針を独自に作らないでください。

適用範囲を選ぶ

• フル処理。 「全面的に animaxxing する」「これを animax する」「フル処理」といった指示は、ブランドを維持しつつ、すべての画面上のすべての要素をアニメーションさせることを意味します。各要素は最初の描画で何も表示されない状態から始まり、登場（イントロ）し、静止または環境的なアニメーションの状態（定常状態）になり、指定されたナビゲーションのたびに退出（アウトロ）します。折り返しより下のコンテンツは、スクロールまたはタブ移動されたときに登場します。各要素をページアイテム（ルート文字）として指定するか、モーション一覧からペアを割り当ててください。フレームワークスキルが最初の描画を何も表示されない状態に保ちます。以降のセッションでもこの方針を維持できるよう、プロジェクトの計画またはメモに記録してください。
• 個別のエフェクト。 名前を指定されたエフェクトだけを適用します。パーティクルボタンの指示から、ページ遷移、フォント変更、ヒーローシーケンスまで含める必要はありません。
• 雰囲気の指定、またはエフェクト名の指定なし。 「高級感を出す」「アニメーションを加える」のような指示では、エフェクトを選ぶ前に雰囲気の見つけ方を読んでください。プロジェクトから雰囲気を読み取り、実装前に計画を1、2行で伝えてください。
• 不明確な場合。 プロジェクト自体の手がかりから、求められる雰囲気とモーションの量が判断できる場合は、計画を1、2行で伝えて実装してください。手がかりから判断できない場合に限り、一度だけ質問してください：「すべての要素にフル処理を適用しますか、それともだけにしますか？」雰囲気も不明な場合は、その点も含めて質問してください。
• フル処理の場合も、動きを減らす設定、スクリプトなしでの読みやすさ、フレームワークスキルの初期化とライフサイクルに従います。

セットアップと調整

• インストールされている GSAP のバージョンと型定義を確認してください。使用するプラグインはすべて 3.13 以降で無料です。SplitText のレシピには 3.13 以降（SplitText.create、smartWrap、mask、aria）が必要です。easeReverse には 3.15 以降が必要です。各レシピに依存関係が記載されています。使用するものだけを登録してください。API の詳細には公式 GSAP スキルを使用してください。
• レシピではモジュールスコープでプラグインを登録するため、サーバー上でも安全ですが、インポートするのはクライアントコードだけにしてください。プロジェクトでプラグインを一元登録している場合は、コピー側の登録を削除してください。
• フル処理が適用される場合を除き、指定されたエフェクトだけを追加してください。適用範囲を選ぶを参照してください。
• レシピ内の定数は編集可能な初期値であり、ブランドのルールではありません。対象に合わせてタイミング、スタッガー、広がり、強度を調整してください。アプリで実行時の設定が必要な場合に限り、定数を追加で公開してください。
• ウェイトエフェクトには、特定のフォントではなく、読み込み済みの可変ウェイト軸が必要です。エンドポイントと静止時のウェイトを書体に合わせてください（例では 400～800 を使用しています）。または、トランスフォームのみのエフェクトを使用してください。
• パーティクルキャンバスには CSS の color を指定します。十分なコントラストが得られる既存のブランドカラーを使用してください。操作部の形状とフォーカスのスタイルは維持してください。
• style-animaxxing は、指定された見た目が求められる場合にのみ使用してください。このスタイルはこれらのレシピを選択して設定します。

必要な部分だけ読む

タスク	リファレンス
雰囲気がまだ定まっていない：本格的な演出、新しいプロジェクト、またはムードを伝えるユーザー	雰囲気を見つける
イン／アウトのエフェクトを選び、デフォルトを設定し、コントローラーと連携する	モーションの語彙
すべての ease オプションに使うブランド独自のシグネチャーカーブ	シグネチャーカーブ
読み込み時のちらつき、認証に応じて表示されるコンテンツ、レイアウトのずれ	インストール済みのフレームワークに対応するスキルの references/initialization.md、「データの準備とレイアウトの安定性」
文字単位のアニメーション：フォントの準備、カーニング、マスク、分割／復元の安定性、テキスト行内でのウェイトや幅の変化	テキストの安定性
文字、単語、行の出現／退出、スクランブルやグリッチ、収縮／爆発、楕円形のライン表示、蛍光ペン風のラインスイープ	分割して出現させる
見出しの散乱など、ページ上のアイテム	ルート文字
話すようなテンポで現れる短い表示テキスト	話すように表示
キャレットの背後に入力されるテキスト、削除されるテキスト、単語がリストを順に再入力する演出	タイプライター
見出しに広がる穏やかな波紋	波
スクロールに連動する表示やポップイン、スクラブ表示のステートメント、パララックスやフッターの表示、ピン留めされたシーン、カードの積み重ね、次のシーンへのズームスルー、横方向の動きとその中でのドリフト、セクション間のウェイポイントを移動する要素、進行状況、速度に応じた傾き、セクションごとのヘッダーテーマ、スクロール時に隠れるヘッダー	スクロールエフェクト
マグネティックボタン、傾くカード、スポットライト表示、カーソル追従とスクロールするラベル、慣性のあるホバー、近接スケーリングとドックエフェクト、画像の軌跡、ドラッグ＆スローのトラック、スワイプで閉じる演出	ポインターエフェクト
無限にドラッグできるギャラリー：スナップ、ホイール、ドリフトに対応したループ、両軸で折り返す2Dグリッド、ドラッグやフリックで配る扇形のカードスタック	無限ドラッグ
ハンドルのドラッグやキーボード操作で並べ替えるリスト	並べ替え可能
ホイールフリック、スワイプ、キー操作で切り替わる全画面セクション	セクションページャー
インタラクションやタイムラインで任意に有効化できるサウンド、環境音のベッド	サウンドキュー
線画、アイコンのモーフィング、複数の形状を流れるシェイプ、パスに沿って動くマーク、スクロールに応じてモーフィングするセクションの縁、パスに沿うテキストやバッジの周りを回るテキスト	SVG エフェクト
版画表現：ドライブラシで塗り重ねる画像やブロック、粒子を通してインクが乗るテキストやブラシで書かれるテキスト、見当を合わせるようにずれる二度刷り、角を引き上げて剥がす演出	版画エフェクト
しきい値とアーチ：アーチから開いて枠を埋める画像、スクロールして次の画像へと続く出入り口、カードからアーチへ飛び込んでその形になる画像	出入り口
視線を引いてから静止する一拍（ライブドットから広がるリング、鼓動、バッジの弾み）や、画面上で浮遊、ドリフト、呼吸、軌道運動を続け、ポーズできる環境ループ	パルスと環境演出
数値のカウントアップ、値に向かって回転するオドメーターの数字、ループするマーキー、切り替わるロゴウォール	カウンターとマーキー
Lenis または ScrollSmoother によるイージング付きページスクロール	スムーズスクロール
カーテン状のページ遷移、傾き、タイトル表示、clip-path ワイプ、ドリフトするカバー、曲線的なSVGのスワイプカバー、初回訪問時のプリローダー	ページカバー
フィルター、並べ替え、レイアウトの展開、ページ間の共有要素モーフィング	レイアウトフリップ
画像のワイプ表示、液体を注ぐような表示、ホバー時の画像プレビュー、スクロールスクラブに連動する動画、Canvas のフレームシーケンス	メディアエフェクト
ラベルのロール、下線のスイープ、方向に応じた塗りつぶし、本文中のテキストのホバー時のウェイトや幅の変化、ホバーやフォーカス時の画像ズーム、液体風のホバー（ビーズ状の下線、丸みのある塗りつぶし、ジェリーボタン）	ホバーエフェクト
どの入力方法でも、押すと押しつぶされて波紋が広がるコントロール	押下フィードバック
エラーや拒否された操作を示すシェイク	アクセント
メニューオーバーレイ、逆向きのイージングによる中断可能な出現／退出、ダイアログの出現と退出、アコーディオンの高さ、スライドするタブインジケーター、読み込み中・成功・失敗を示すボタン	コンポーネントのモーション
コールトゥアクションでの飛散	発射
重力に従って放たれる紙吹雪や絵文字の雨	物理エフェクト
パーティクルを使ったボタン、カード、リンク、コマンドフィールド	パーティクルエフェクトとフィールド／アタッチヘルパー
タッチ、フォーカス、解除されないホバー、モバイル向けパーティクルの予算	入力とデバイス
セットアップの一部をロールバックし、変更したコンテンツを復元する	エフェクトの復元
エフェクトを検証し、別のブランドで再利用する	検証、続けてフレームワークに関連するチェック

レシピの契約

選択したレシピと、そのレシピが指定するローカルヘルパーだけをコピーしてください。レシピごとに返す値の形は異なります（タイムライン、{ timeline, revert }、停止関数、パーティクル制御など）。共通のインターフェースがあると想定しないでください。

フレームワークのフェーズ	エフェクトの役割
初期状態	フレームワークの描画前／スクリプトなしの仕組みを使って、ターゲットを準備します
イントロ	入場ビルダーまたは enter(delay)
安定後	一時的なスタイルをクリアします。必要に応じて idle() またはウェーブを使用します
アウトロ	退出ビルダー、exit()、または blastOff(...)
終了状態	完了を通知し、コントローラーが次のアクションを決定します
アンマウント	コントローラーがレシピの停止、destroy、または revert ハンドルを呼び出します

• レシピをコピーする際は、ハンドルが返される前に失敗した場合も含めて、エフェクトの復元を適用します。
• ビルダーは、ナビゲーション、マウント、ページライフサイクルの購読、実行タイミングの決定を行いません。コントローラーがビルダーを呼び出し、フェーズの状態を管理します。
• 非表示の開始状態にしても、不完全なデータが準備済みになるわけではありません。コントローラーが解決済みのターゲットまたは確保済みの領域を渡します。ゲストコンテンツや空のコンテンツを隠すために入場エフェクトを使わないでください。
• 分割したマークアップは、エフェクトで必要な間だけ維持します（スピークインが完了し、アクティブなウェーブが継続している間）。コントローラーのクリーンアップ境界で元に戻し、アクセシブルなテキストとネストされたコントロールを保持します。
• overwrite: "auto"を使用し、フェーズが終わったら一時的なスタイルとwill-changeをクリアします。
• 開始位置はgsap.setまたはfromToで設定し、トゥイーンでも動かすCSS変形では設定しないでください。GSAPはCSSのtranslateY(100%)をピクセル単位のyとして読み取り、その上にyPercentを加算するため、カバーは高さ1つ分だけ手前で止まります。fromトゥイーンが到達する静止位置としてなら、CSS変形を使用しても問題ありません。
• モーションの軽減設定では、ドキュメントに記載された安定状態または退出状態に到達し、完了コールバックも引き続き実行されます。常時動くエフェクトは使用しません。アプリによるオーバーライドも含め、プロジェクトの設定ヘルパーを使います。ビルダーは構築時に設定を読み取ります。設定が変更されたら、コントローラーがティアダウンして再構築します。
• 親タイムラインを停止しても、ネストされたビルダーの割り込みコールバックは呼び出されません。親を停止した後、スプリットランナーのrevertTextなど、各ビルダーのrevertを呼び出します。
• 1つのターゲットにつきエフェクトは1つです。2つの所有者が同じ要素の変形を書き換えてはいけません。アウトロでターゲットを動かす前に、ポインターエフェクトと常時エフェクトを停止します。
• 常時エフェクトでは、所有者が画面外で一時停止し、退出時に停止できるよう、制御手段を公開します。5秒を超えてループする場合は、ユーザーが一時停止できるようにします（WCAG 2.2.2）。
• パーティクルの入力と密度は、フィールドの契約に従います。コントロールはホバーなしでも機能します。
• テキストは、初回描画から静止状態まで改行を維持します。計測または分割の前にフォントの読み込みを待ち、読み込みが完了するまではテキストを非表示にします（非表示にする時間は短くします）。折り返しが発生するテキストでは、字間、幅、太さをトゥイーンしないでください。分割した行が静止時の改行と一致する場合を除き、段落は1つのブロックとしてアニメーションさせます。確認方法は検証を参照してください。
• 幅が変わると、分割の計測結果が無効になることがあります（リサイズ）。再構築するかどうかはコントローラーが判断します。レシピはページを再マウントしません。