motion 是做什麼的？
概述
Motion 用以釐清階層與回饋，而非裝飾。請依名稱選取家族/模式，然後直接手寫（CSS / Motion / GSAP）。不要預設使用第三方套件註冊安裝。
完整目錄：references/motion-families.md（12 個家族 · 144 個模式）。
使用時機
- 微互動（hover、focus、press）
- 進場/離場或版面轉場（區塊切換、抽屜、模態框）
- 與滾動、文字、輪播、首頁或其他命名模式相關
- 預設（輕量）： 應用程式 Shell / 儀表板 / 多區塊
/ui— 區塊淡入 + 抽屜滑入 + 平滑滾動（除非使用者明確禁止）
不應使用
- 僅靜態 Token/顏色微調
- 使用者要求零動畫 / “tanpa animasi”
- 檢查/解釋現有動畫 → 請使用
motion-inspection
偏好減少動畫的使用者仍需要狀態變更以及可用的即時/透明度降級方案；可以跳過空間/裝飾性效果，但不能省略互動合約。
軌道
| 軌道 | 用途 | 預設值 |
|---|---|---|
| 產品 / Shell | 應用程式 chrome、設定、儀表板 | fade-up / page-crossfade、drawer-slide、press-scale、lift-hover |
| 行銷 / 表達性 | 登陸頁、行銷活動 | 從目錄中選取 1–2 個家族 + 1–2 個模式 — 每個視口預算 2–3 個動畫 |
家族用途（速查）
| 家族 | 用途 | 不適用 |
|---|---|---|
| 微互動 | 切換開關、提示訊息、按讚、進度條 | 首頁 / 滾動故事 |
| Hover & 互動 | lift、press、magnetic、tilt | 頁面進場 |
| 基於滾動 | sticky、horizontal、scroll-zoom | 僅限按鈕的微互動 |
| 揭示與擦拭 | 進場淡入、split、mask、drawer | 無限循環作為唯一動畫 |
| 文字動畫 | 文字逐字揭示、打字機、跑馬燈文字 | 表單 / 密集設定頁 |
| 輪播與連續流動 | 跑馬燈、filmstrip、snap | 僅單一 CTA 的焦點頁面 |
| 網格動畫 | Bento、翻轉網格、reflow | 單一按鈕的 chrome |
| 聚光燈與聚焦 | 中心舞台、暗淡同級元素 | 整頁噪音 |
| 堆疊與散佈 | Deck、扇形展開、滑動卡片 | 管理後台表格 |
| 首頁區塊動畫 | 視差 / 浮動裝置 / 極光 | 應用程式 Shell（最多 1 個簽名式動畫） |
| 變形與轉換 | 共享元素、FAB 變形 | 每個導航項目 |
| 3D 與透視 | Orbit、coverflow | 預設產品 UI |
工作流程
- 選擇軌道 — 產品 Shell 或行銷
- 選擇家族 — 匹配用途（最多 2 個家族）
- 指定模式 — 從
motion-families.md中命名 1–2 個模式；閱讀定義與手寫提示 - 定義合約並實作 — 記錄觸發/狀態識別、屬性、中斷處理、替代輸入方案及減少動畫終點（
motion.md）。優先使用transform/opacity；僅在需要揭露或變形時使用有範圍的測量尺寸/版面。 - 預算控制 — 每個視口 ≤2–3 個有意義的動畫
- 無障礙 —
prefers-reduced-motion: reduce（opacity/即時降級方案）；絕不依賴動畫作為唯一傳達意義的方式 - 回報格式 — 慣例：
Motion: light shell | families: Hover+Reveal | patterns: lift-hover, fade-up；區分來源/狀態檢查與實際目標播放及效能測量。
Shell 預設值（產品）
- 區塊進場：
fade-up~250–300ms - 行動裝置抽屜：
drawer-slide+ 背景淡入 - 控制項：
press-scale(0.96) scroll-behavior: smooth（在減少動畫模式下停用）
平滑滾動不代表可以自動滾動新進資料。產品狀態的食譜由 references/motion.md 管控圖表更新、揭露與串流跟隨；向上滾動的讀者應保有控制權。
嚴格規則
- 直接手寫 基於模式名稱 — 套件安裝不是預設方案
- 不要在單一視口同時使用 Hero + 3D + Text + Spotlight + Carousel
- 行銷：最多一個 Hero 簽名式模式
檢查清單
- 已選擇軌道（產品 vs 行銷）
- 家族用途符合需求（≤2 個家族）
- 已列出命名模式（視口中 ≤2–3 個動畫）
- 已從定義直接手寫（非以註冊套件作為解答）
- 已處理
prefers-reduced-motion - 已檢查快速反向、巢狀動畫、焦點/鍵盤及手勢取消（如適用）；最終資料/狀態保持真實
- 無版面跳動 / 裝飾性垃圾動畫
- 已填寫慣例 Motion 行
進階參考
- 詞彙表：
references/motion-families.md - 食譜：
references/motion.md - 微互動重疊領域：
polish - 展示 Shell：本地
test/沙盒（可選，不隨產品發佈）