motion は何をしますか？
概要
Motionは階層構造とフィードバックを明確にします。装飾ではありません。ファミリー/パターンを名前で選択し、手書き（CSS / Motion / GSAP）で実装してください。サードパーティのレジストリインストールをデフォルトとしないでください。
完全なカタログ: references/motion-families.md（12ファミリー · 144パターン）。
使用すべき場合
- マイクロインタラクション（ホバー、フォーカス、プレス）
- エントリー/イグジットまたはレイアウト遷移（セクション切り替え、ドロワー、モーダル）
- スクロール連動、テキスト、カルーセル、ヒーロー、その他の名前付きパターン
- デフォルト（軽量）: アプリシェル / ダッシュボード / 複数セクションの
/ui— セクションフェード + ドロワースライド + スムーズスクロール（ユーザーが禁止していない場合）
スキップすべき場合
- 静的なトークン/カラーのみの調整
- ユーザーが「アニメーションなし」、「tanpa animasi」を要求した場合
- 既存のモーションの調査/説明 →
motion-inspection
動きを抑えたユーザーにも状態変化と使用可能な即時/不透明度のフォールバックは必要です。空間的/装飾的効果はスキップしますが、インタラクションの契約はスキップしません。
レーン
| レーン | 用途 | デフォルト |
|---|---|---|
| プロダクト / シェル | アプリアイコン、設定、ダッシュボード | fade-up / page-crossfade、drawer-slide、press-scale、lift-hover |
| マーケティング / 表現 | ランディング、キャンペーン | カタログから1～2ファミリー + 1～2パターンを選択 — ビューポートあたり2～3モーションに予算化 |
ファミリー別用途（クイックリファレンス）
| ファミリー | 対象 | 非対象 |
|---|---|---|
| マイクロインタラクション | トグル、トースト、いいね、プログレス | ヒーロー / スクロールストーリー |
| ホバー＆インタラクション | リフト、プレス、マグネティック、ティルト | ページエントリー |
| スクロールベース | スティッキー、水平、スクロールズーム | ボタン専用マイクロ |
| リビール＆ワイプ | エントリーフェード、スプリット、マスク、ドロワー | 唯一のモーションとしての無限ループ |
| テキストモーション | ワードリビール、タイプライター、マーキータイプ | フォーム / 高密度設定 |
| カルーセル＆連続フロー | マーキー、フィルムストリップ、スナップ | 単一CTAフォーカスページ |
| グリッドモーション | ベントー、フリップグリッド、リフロー | ワンボタンブラウザ |
| スポットライト＆フォーカス | センターフォーカス、兄弟要素を暗く | ページ全体ノイズ |
| スタック＆スキャッター | デッキ、ファン、スワイプデッキ | 管理テーブル |
| ヒーローセクションモーション | パララックス / フロートデバイス / オーロラ | アプリシェル（最大 1 シグネチャー） |
| モーフ＆トランスフォーム | 共有要素、FABモーフ | すべてのナビゲーション |
| 3D＆パースペクティブ | オービット、カバーフロー | デフォルトのプロダクトUI |
ワークフロー
- レーン — プロダクトシェル vs マーケティング
- ファミリー — 用途に合わせる（最大2ファミリー）
- パターン —
motion-families.mdから1～2を指定し、定義と手書きヒントを読む - 契約 + 実装 — トリガー/状態ID、プロパティ、中断、入力代替、動き抑制エンドポイントを記録（
motion.md）。transform/opacityを優先。開示やモーフで必要な場合は、境界のある測定サイズ/レイアウトを使用。 - 予算 — ビューポートあたり2～3の意図的なモーションに抑える
- アクセシビリティ —
prefers-reduced-motion: reduce（不透明度/即時フォールバック）。モーションのみで意味を伝えない。 - 報告 — 命名規則:
Motion: light shell | families: Hover+Reveal | patterns: lift-hover, fade-up。ソース/状態チェックと実際のターゲット再生・パフォーマンス測定を区別。
シェルデフォルト（プロダクト）
- セクションエントリー:
fade-up～250～300ms - モバイルドロワー:
drawer-slide+ 背景フェード - コントロール:
press-scale（0.96） scroll-behavior: smooth（動き抑制時は無効）
スムーズスクロールは受信データの自動スクロールを許可しません。プロダクト状態のレシピはreferences/motion.mdにあり、チャート更新、開示、ストリームフォローを管理します。上にスクロールする読者は制御を維持します。
厳格なルール
- パターン名から手書き — レジストリインストールはデフォルトではない
- 1つのビューポートにヒーロー + 3D + テキスト + スポットライト + カルーセルを重ねない
- マーケティング: 最大1つのヒーローシグネチャーパターン
チェックリスト
- レーンが選択されている（プロダクト vs マーケティング）
- ファミリーの用途が要件に合っている（最大2ファミリー）
- 名前付きパターンがリストされている（ビューポート内のモーションは最大2～3）
- 定義から手書きされている（レジストリで回答しない）
-
prefers-reduced-motionが処理されている - 高速逆転、ネストされたモーション、フォーカス/キーボードおよびジェスチャーキャンセルが該当箇所でチェックされている。最終的なデータ/状態は真実を保つ。
- レイアウトスラッシング/装飾スパムがない
- Motionラインの命名規則が記入されている
詳細
- 語彙:
references/motion-families.md - レシピ:
references/motion.md - マイクロクラフトとの重複:
polish - デモシェル: ローカル
test/サンドボックス（任意。出荷しない）