用途:这是动效系统的基础层,定义下游技能(motion-patterns、motion-advanced)继承的所有数值、约束与规则。在任何动画开发开始前应先加载本技能。
主要能力:产出共享的 motionTokens 对象(duration、easing、distance、scale)、5 个命名弹簧预设 springs 映射、所有组件共用的 shouldAnimate() 开关,以及基于 useReducedMotion 的无障碍默认值与零水合警告的 SSR 安全初始状态。
核心规则:仅使用 motion/react,禁止从 framer-motion 导入或混用;initial 必须与服务端输出一致;减少动效偏好覆盖一切,此时禁用所有 transform,仅允许 ≤0.2s 的透明度淡入淡出;禁止动画布局属性(width、height、top、left、margin、padding),只用 transform 与 opacity;所有时长与缓动取自 motionTokens,弹簧配置取自 springs,禁止硬编码;导入 motion/react 的文件必须加 "use client";禁止在模块顶层读取 window 或 navigator,需用 typeof window !== "undefined" 保护。
使用方式:通过 lib/motion-tokens.ts 定义令牌与弹簧,lib/motion-config.ts 提供 isLowEnd、prefersReduced、shouldAnimate、duration 等运行时标志,hooks/use-reduced-motion.tsx 提供 useSafeMotion。SSR 场景需用 mounted 状态守卫,使 initial 与服务端渲染一致。
适用场景:从零构建动画组件、设置令牌与弹簧、实现 prefers-reduced-motion 支持、排查动画初始状态导致的水合不匹配、评估动画是否应当存在。
限制:不涵盖 UI 组件模式(按钮、模态、交错)、拖拽手势、SVG、文字动画与自定义 hooks,也不涉及纯 CSS 动画、第三方动画库及动效设计决策。资料未提供安装命令、收费与平台信息。