motion-foundations

Motion 基礎

Motion 系統的基礎層。定義了所有值、約束和規則，下游技能（motion-patterns、motion-advanced）都繼承於此。請在任何動畫工作開始前載入此技能。

何時啟用

• 從頭開始建立任何動畫元件
• 設定代幣、彈簧預設或緩動值
• 實作 prefers-reduced-motion 支援
• 偵錯動畫初始狀態造成的 hydration 不匹配
• 評估某個動畫是否應該存在

產出

此技能會產出：

• 一個共享的 motionTokens 物件（持續時間、緩動、距離、縮放）
• 一個共享的 springs 預設映射（5 個命名配置）
• 一個供所有元件使用的 shouldAnimate() 閘道
• 透過 useReducedMotion 實現的無障礙合規動畫預設值
• 零 hydration 警告的 SSR 安全初始狀態

原則

Motion 必須達到以下至少一項，否則必須移除：

• 引導注意力
• 溝通狀態
• 保持空間連續性

反應速度永遠優先於流暢度。一個導致輸入延遲的 60 fps 動畫比沒有動畫更糟糕。

規則

這些規則沒有商量餘地。它們適用於系統中的每個元件。

1. 僅使用 motion/react。絕不從 framer-motion 導入。絕不在同一個樹中混用兩者。
2. initial 必須與伺服器輸出匹配。如果伺服器渲染 opacity: 1，則 initial prop 也必須是 opacity: 1。沒有例外。
3. 減少動畫優先於一切。當 useReducedMotion() 返回 true 或 prefersReduced 為 true 時，所有變換都會被停用。僅允許 ≤ 0.2 秒的不透明度淡入淡出作為備用方案。
4. 絕不對佈局屬性進行動畫。width、height、top、left、margin、padding 禁止出現在 animate 中。僅使用 transform 和 opacity。
5. 所有代幣值來自 motionTokens。禁止在元件檔案中使用硬編碼的持續時間和緩動。
6. 所有彈簧配置來自 springs 映射。禁止內聯的 stiffness/damping 值。
7. 每個導入 motion/react 的檔案都必須有 "use client"。
8. 絕不在模組層級讀取 window 或 navigator。必須使用 typeof window !== "undefined" 進行保護。

決策指南

選擇持續時間

代幣	使用時機
instant	工具提示顯示/隱藏、焦點環、徽章更新
fast	按鈕回饋、圖示切換、晶片切換
normal	模態框開啟、卡片展開、頁面元素進入
slow	英雄區進入、全頁面過渡
crawl	刻意說故事；謹慎使用

選擇彈簧

預設	使用時機
snappy	預設 UI — 按鈕、晶片、導航項目
gentle	卡片、模態框、面板輕柔著陸
bouncy	俏皮時刻 — 空白狀態、引導流程
instant	工具提示、彈出面板、下拉選單
release	拖曳釋放 — 自然物理感覺

何時完全停用動畫

在以下情況下停用（使 shouldAnimate() 返回 false）：

• prefersReduced 為 true
• isLowEnd 為 true 且動畫非必要
• 元素在畫面外且永遠不會進入視口
• 動畫純屬裝飾且無 UX 用途

核心概念

代幣系統

// lib/motion-tokens.ts
export const motionTokens = {
  duration: {
    instant: 0.08,
    fast:    0.18,
    normal:  0.35,
    slow:    0.6,
    crawl:   1.0,
  },
  easing: {
    smooth: [0.22, 1, 0.36, 1],
    sharp:  [0.4, 0, 0.2, 1],
    bounce: [0.34, 1.56, 0.64, 1],
    linear: [0, 0, 1, 1],
  },
  distance: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 48,
  },
  scale: {
    subtle: 0.98,
    press:  0.95,
    pop:    1.04,
  },
}

export const springs = {
  snappy:  { type: "spring", stiffness: 300, damping: 30 },
  gentle:  { type: "spring", stiffness: 120, damping: 14 },
  bouncy:  { type: "spring", stiffness: 400, damping: 10 },
  instant: { type: "spring", stiffness: 600, damping: 35 },
  release: { type: "spring", stiffness: 200, damping: 20, restDelta: 0.001 },
}

執行時期旗標

// lib/motion-config.ts
export const motionConfig = {
  isLowEnd() {
    return (
      typeof navigator !== "undefined" &&
      navigator.hardwareConcurrency <= 4
    )
  },

  prefersReduced() {
    return (
      typeof window !== "undefined" &&
      window.matchMedia("(prefers-reduced-motion: reduce)").matches
    )
  },

  shouldAnimate({ essential = false } = {}) {
    if (this.prefersReduced()) return false
    if (!essential && this.isLowEnd()) return false
    return true
  },

  duration() {
    return this.isLowEnd() || this.prefersReduced()
      ? motionTokens.duration.instant
      : motionTokens.duration.normal
  },
}

無障礙

優先級順序（從高到低）：

1. prefers-reduced-motion: reduce — 停用所有變換，將不透明度轉場限制在 ≤ 0.2 秒
2. 低端裝置檢測 — 減少持續時間，移除非必要的動畫
3. 設計偏好 — 其他所有情況

Motion 必須優雅降級。它絕不能突然消失，導致佈局位移或混淆方向感。

// hooks/use-reduced-motion.tsx
"use client"
import { useReducedMotion } from "motion/react"

export function useSafeMotion(fullY: number = 16) {
  const reduce = useReducedMotion()
  return {
    initial: { opacity: 0, y: reduce ? 0 : fullY },
    animate: { opacity: 1, y: 0 },
    exit:    { opacity: 0, y: reduce ? 0 : -fullY },
  }
}

/* globals.css */
@media (prefers-reduced-motion: reduce) {
  .motion-safe-transition  { transition: opacity 0.15s; }
  .motion-reduce-transform { transform: none !important; }
}

<!-- Tailwind -->
<div class="motion-safe:animate-fade motion-reduce:opacity-100"></div>

SSR / hydration 安全性

規則：initial 必須始終與伺服器渲染的內容匹配。

// 錯誤 — 伺服器渲染 opacity:1 但 initial 設為 0 → hydration 不匹配
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />

// 正確 — 使用 AnimatePresence 或延遲到客戶端掛載
"use client"
const [mounted, setMounted] = useState(false)
useEffect(() => setMounted(true), [])

<motion.div
  initial={{ opacity: mounted ? 0 : 1 }}
  animate={{ opacity: 1 }}
/>

程式碼範例

端到端：代幣 + 彈簧 + 無障礙 + SSR 保護

// components/fade-in-card.tsx
"use client"

import { useState, useEffect } from "react"
import { motion } from "motion/react"
import { motionTokens, springs } from "@/lib/motion-tokens"
import { useSafeMotion } from "@/hooks/use-reduced-motion"
import { motionConfig } from "@/lib/motion-config"

interface FadeInCardProps {
  children: React.ReactNode
  delay?: number
}

export function FadeInCard({ children, delay = 0 }: FadeInCardProps) {
  // SSR 保護 — initial 必須與伺服器輸出匹配（opacity: 1）
  const [mounted, setMounted] = useState(false)
  useEffect(() => setMounted(true), [])

  // 無障礙 — 當偏好減少動畫時停用變換
  const safeMotion = useSafeMotion(motionTokens.distance.md)

  // 裝置閘道 — 在低端硬體上跳過動畫
  if (!motionConfig.shouldAnimate() || !mounted) {
    return <div>{children}</div>
  }

  return (
    <motion.div
      initial={safeMotion.initial}
      animate={safeMotion.animate}
      exit={safeMotion.exit}
      transition={{
        ...springs.gentle,
        delay,
      }}
      whileHover={{ scale: motionTokens.scale.pop }}
      whileTap={{ scale: motionTokens.scale.press }}
    >
      {children}
    </motion.div>
  )
}

約束 / 非目標

此技能不涵蓋：

• UI 元件模式（按鈕、模態框、交錯）→ 請參閱 motion-patterns
• 拖曳、手勢、SVG、文字動畫、自訂 Hook → 請參閱 motion-advanced
• 純 CSS 動畫或未使用 motion/react 的 Tailwind animate-* 類別
• 第三方動畫函式庫（GSAP、anime.js 等）
• Motion 設計決策（何時動畫、強調什麼）— 這是設計問題，而非程式碼約束

反模式

反模式	違反規則	修正
import { motion } from "framer-motion"	規則 1	使用 motion/react
initial={{ opacity: 0 }} 用於 SSR 元件	規則 2	添加掛載保護
跳過 useReducedMotion 檢查	規則 3	使用 useSafeMotion Hook
animate={{ width: "100%" }}	規則 4	改用 scaleX 變換
內聯 transition={{ duration: 0.4 }}	規則 5	使用 motionTokens.duration.normal
內聯 { stiffness: 300, damping: 30 }	規則 6	使用 springs.snappy
缺少 "use client" 指令	規則 7	添加到檔案頂部
在模組層級使用 navigator.hardwareConcurrency	規則 8	包裝在 typeof navigator !== "undefined" 中

相關技能

• motion-patterns — 使用此處定義的代幣和彈簧來建立按鈕、模態框、交錯、頁面過渡和滾動模式。不重新定義任何值。
• motion-advanced — 使用此處定義的代幣和彈簧來實現拖曳、SVG、文字和手勢模式。在此基礎上添加 useAnimate 序列和自訂 Hook。