motion 是做什么的？
概述
Motion 用于阐明层级和反馈——而非装饰。请按名称选择系列/模式，然后手工编写（CSS / Motion / GSAP）。不要默认使用第三方注册表安装。
完整目录：references/motion-families.md（12 个系列 · 144 个模式）。
使用场景
- 微交互（悬停、聚焦、按压）
- 进入/退出或布局过渡（区块切换、抽屉、模态框）
- 滚动关联、文本、轮播、首屏或其他命名模式
- 默认（轻量）： 应用外壳 / 仪表盘 / 多区块
/ui—— 区块淡入 + 抽屉滑动 + 平滑滚动（除非用户禁止）
跳过场景
- 仅静态 token/颜色调整
- 用户要求零动效 / “tanpa animasi”
- 检查/解释现有动效 → 转至
motion-inspection
偏好减少动效的用户仍需状态变化和可用的即时/不透明度回退；可跳过空间/装饰效果，但不能跳过交互契约。
车道
| 车道 | 用途 | 默认值 |
|---|---|---|
| 产品 / 外壳 | 应用外壳、设置、仪表盘 | fade-up / page-crossfade、drawer-slide、press-scale、lift-hover |
| 营销 / 表现性 | 着陆页、活动页 | 从目录中选取 1–2 个系列 + 1–2 个模式 —— 每视口动效预算 2–3 个 |
系列用途（快速参考）
| 系列 | 适用场景 | 不适用场景 |
|---|---|---|
| 微交互 | 切换、Toast、点赞、进度条 | 首屏 / 滚动故事 |
| 悬停与交互 | 抬起、按压、磁性、倾斜 | 页面进入 |
| 基于滚动 | 粘性、水平滚动、滚动缩放 | 仅按钮级微交互 |
| 揭示与擦除 | 进入淡入、分割、遮罩、抽屉 | 仅使用无限循环作为唯一动效 |
| 文本动效 | 文字揭示、打字机、跑马灯 | 表单 / 密集设置 |
| 轮播与连续流 | 跑马灯、胶片条、吸附 | 单个 CTA 焦点页面 |
| 网格动效 | Bento、翻转网格、重排 | 单按钮外壳 |
| 聚焦与强调 | 中心舞台、调暗兄弟元素 | 全页噪音 |
| 堆叠与散落 | 牌组、扇形、滑动牌组 | 管理后台表格 |
| 首屏区块动效 | 视差 / 浮动设备 / 极光 | 应用外壳（最多 1 个标志性效果） |
| 变形与变换 | 共享元素、FAB 变形 | 每一个导航 |
| 3D 与透视 | 轨道、翻页封面流 | 默认产品 UI |
工作流程
- 车道 —— 产品外壳 vs 营销
- 系列 —— 匹配用途（最多 2 个系列）
- 模式 —— 从
motion-families.md中命名 1–2 个；阅读定义 + 手工编写提示 - 契约 + 实现 —— 记录触发条件/状态标识、属性、中断、输入替代方案和偏好减少动效的终点的（
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 中规定了图表更新、披露和流跟随；向上滚动的用户保持控制权。
严格规则
- 手工编写基于模式名称——注册表安装不是默认方案
- 不要在一个视口内叠加首屏 + 3D + 文本 + 聚焦 + 轮播
- 营销：最多一个首屏标志性模式
检查清单
- 已选择车道（产品 vs 营销）
- 系列用途与要求匹配（≤2 个系列）
- 已列出命名模式（视口中 ≤2–3 个动效）
- 已根据定义手工编写（非注册表作为答案）
- 已处理
prefers-reduced-motion - 已检查快速反向、嵌套动效、聚焦/键盘和手势取消（如适用）；最终数据/状态保持真实
- 无布局抖动 / 装饰性垃圾
- 已填写约定 Motion 行
深度资料
- 词汇：
references/motion-families.md - 配方：
references/motion.md - 微工艺重叠：
polish - 演示外壳：本地
test/沙箱（可选；不发布）