style-animaxxing

Animaxxing スタイル

Animaxxing のルックです。黒、白、ニュートラルグレー、大きなサンセリフ体と小さな大文字のモノスペース体、極細の罫線、散らばる文字、パーティクルで組み上げるコントロールが特徴です。

このスキルはビジュアルデザインを担当し、モーションがデザインをどう支えるかを選択します。animaxxing は、再利用可能な Vanilla TypeScript と GSAP のレシピを提供します。対応する gsap-<framework> スキル（gsap-vanilla を含む）は、マウント → 初期状態 → イントロ → 定常状態 → アウトロ → 終了状態 → アンマウント、ナビゲーション、中断、クリーンアップのタイミングを担当します。

適用範囲を選択する

• 全体のスタイル変更は、依頼で許可されている場合にのみ適用し、それ以外では既存のブランドを維持します。Animaxxing への明示的な再デザインには、追加の確認は不要です。
• 全体的なスタイル変更では、animaxxing と対応するフレームワークスキルをインストールして読み込み、以下のサーフェスの選択肢を使用します。どちらかが利用できない場合は、不足しているスキルを明示します。レシピやライフサイクルの指針を独自に作成してはいけません。
• アニメーションを最小限にする、または使わないデザインでは、トークンとレイアウトを適用し、ディスプレイエフェクトを減らすか省略します。静的なスタイル変更にモーションスキルや GSAP は必要ありません。
• 別のブランドにエフェクトを適用する場合は、これらのフォント、色、レイアウト規則を適用せず、animaxxing を直接使用します。

段階的に適用して読み込む

全体のスタイル変更では、以下の順序で作業します。範囲を絞った変更では、関連するリファレンスのみを読み込みます。

タスク	リファレンス
色、フォント、スケール、余白、フォーカス、ライト／ダークテーマ	トークン
Poster／Statement／Label／Annotation／BodyCopy の役割、ヘッダー、グリッド、レール、台帳、カード	タイポグラフィとレイアウト
エフェクトの選択、サーフェスへの割り当て、Animaxxing のペース設定	モーションのアートディレクション、続いて animaxxing の選択したリファレンス
変更後の見た目の確認	検証。モーションでは、モーションスキルとフレームワークスキルの関連する確認項目も使用します。

デザイン上の制約

• 可変フォントの Rethink Sans（400–800）と JetBrains Mono（100–800）を、プロジェクトのフォントパイプラインを通じて読み込みます。プレーンな CSS トークンを使用するか、プロジェクトで Tailwind v4 を使用している場合は、そのマッピングを使用します。
• ニュートラルなトークンカラーのみを使用し、装飾的なシャドウやグラデーションは使いません。既定では極細の罫線、コントロール／カードには 2px のボーダー、角丸は小さくします。
• 左端を揃え、右端は不揃いにします。ポスター用の文字は意図的に切り取ってもかまいませんが、本文や注釈は切り取ってはいけません。注釈は 11px 以上にし、大文字のモノスペース体はメタデータに使用し、本文には使用しません。
• 本文は動かしません。ディスプレイ用テキストは散らしたり、分割したり、波打たせたりできます。全体的なスタイル変更では、ヒーローのサブ見出しが「話しながら現れる」例外となります。
• 通常の UI モーションにはトークンのリファレンスに記載された継続時間、イージング、距離の値を使用し、ディスプレイエフェクトでは意図的に大きく動かします。実装とテキストの安定性チェックはモーションスキルが担当します。
• モーションはこのアートディレクションの一部ですが、依頼された強度を優先します。すべてのエフェクトを省略した場合や、モーションを減らす設定でも、レイアウトの読みやすさを維持します。

構成の境界

エフェクトを選択して設定します。実装をこのスキルにコピーしてはいけません。インストール済みの animaxxing スキルから、スキルフォルダーがディスク上で隣り合っていると想定せずに、名前でレシピファイルを読み込みます。フレームワークコントローラーは選択したビルダーを呼び出し、各フェーズの状態とクリーンアップ用ハンドルを管理します。このスキルはルーティングフックをインストールせず、ナビゲーション待機を管理せず、マウント、アンマウント、再生のタイミングも決定しません。

読みやすいデザイン

静的なスタイルでも、意味のあるコンテンツは読める状態に保ちます。不可視の開始処理には、対応するインストール済みフレームワークスキルの references/initialization.md を使用します。エフェクトのロールバックは、animaxxing の references/effect-restoration.md が担当します。このスタイルに、無条件の非表示設定、準備完了タイマー、ルート復旧処理を追加してはいけません。初期化に成功した場合は、選択された振り付けを維持します。