motion-physics

スプリングモーション

汎用的なフェードやスライドのエフェクトを、@vueuse/motion のスプリング物理に置き換えます。

トランジションの座標を勝手に考案しないでください。以下の3つのプリセットを使用してください。シェルとデータのコンポーネントは、引き続き @quasar-foundation と @primevue-aura を使用します。同じビュー内でカードが詳細表示へと拡大する場合は @layout-morph（Quasar の v-morph）を使用し、位置にスプリングを適用しないでください。

エージェントがこのスキルを有効にするタイミング

• カード、モーダル、リスト項目を DOM に追加するとき。
• カードのホバー状態、フォーカス時の奥行き、ボタンをタップした際の圧縮。
• データリストやダッシュボードパネルを順番に表示するとき。

インストール

npm install @vueuse/motion

src/main.js で、PrimeVue の後に MotionPlugin を登録します。ブートストラップのコードブロックは @primevue-aura にあります。

物理プロファイル

// src/design/motion-presets.js
export const MotionPresets = {
  // Snappy feedback for clicks, toggles, and icon buttons
  microFeedback: {
    hovered: { scale: 1.02, transition: { type: 'spring', stiffness: 400, damping: 25 } },
    tapped: { scale: 0.97, transition: { type: 'spring', stiffness: 500, damping: 30 } }
  },

  // Structural panel / dialog entry
  modalEnter: {
    initial: { opacity: 0, scale: 0.95, y: 15 },
    enter: {
      opacity: 1,
      scale: 1,
      y: 0,
      transition: { type: 'spring', stiffness: 280, damping: 22 }
    }
  },

  // Stagger helper for lists / tables
  staggerItem: (index) => ({
    initial: { opacity: 0, y: 12 },
    enter: {
      opacity: 1,
      y: 0,
      transition: {
        delay: Math.min(index * 35, 200), // Cap max delay to prevent slowness
        type: 'spring',
        stiffness: 320,
        damping: 24
      }
    }
  })
};

演出がプリセットに合致する場合は、そのプリセットを使用してください。ディレクティブのデフォルト値を適用するのは、3つのプリセットのいずれにも合致しない場合に限ります。

• インタラクティブ要素：{ type: 'spring', stiffness: 350, damping: 25 }
• ダイアログとオーバーレイ：{ type: 'spring', stiffness: 280, damping: 22 }（modalEnter と同じ）

AI らしい過剰なモーションを避けるルール

• 線形トランジションは禁止です。空間的な移動（x、y、scale）には、ease-in-out や linear のタイミングを使用しないでください。常にスプリングの減衰を使用してください。
• アニメーションの遅延に上限を設けてください。リストの項目ごとの遅延を40msより長くしたり、合計遅延を200msより長くしたりしないでください。staggerItem は35msを使用し、上限は200msです。
• 連続ループは禁止です。アクティブなローディング状態で明示的に求められている場合を除き、UI 要素でループするパルス、無限回転、浮遊アニメーションを避けてください。
• prefers-reduced-motion に対応してください。空間的なスプリングをスキップし、瞬時の不透明度変更を使用してください。

手順

1. src/design/motion-presets.js から MotionPresets をインポートします。数値をコンポーネントにコピーして、単発の値として使用しないでください。
2. 演出に合ったプリセットを v-motion にバインドします。
3. ユーザーがそのモーションを求めていない限り、PrimeVue または Quasar がすでに制御しているレイアウトプロパティ（ドロワーの幅、仮想スクローラーの位置など）をアニメーションさせないでください。
4. ローディングインジケーターはループしてもかまいません。それ以外はすべて一度だけ再生します。

タスク完了時：次のスキルを提案

このスキルのユーザーリクエストが完了したら、次に実行する内容を提案してください。

1. 次を実行します。

   python .agents/skills/heyeddi/scripts/suggest_next_skill.py --current-skill motion-physics --project-root .
   

2. スクリプトの ### Next step ブロックを、最終返信に含めてください。