joepui Motion Ref
把用户的产品场景翻译成合适的 UI 动效方案。默认用户不懂动画术语；先理解问题，再读取最小必要参考，最后给出可直接落地的方案。
核心原则
- 有目的：每个动画都要解决问题，例如确认操作、缓解等待、表达层级、引导注意。
- 快且轻：常规交互控制在 200-500ms；超过 500ms 容易显得卡，低于 100ms 用户难感知。
- 一致性：同类交互使用同一套时长、缓动和反馈强度。
- 无障碍：代码方案必须包含
prefers-reduced-motion: reduce适配。
工作流程
- 判断用户是在要 代码方案 还是 视频 motion prompt；不明确时默认代码方案。
- 判断场景是否清晰：
- 清晰：读取最相关的场景路由或分类参考，直接推荐 1-3 个动效。
- 模糊：先给 2-3 个方向让用户选，不要一次读取全部参考。
- 组合需求：按涉及的 UI 部件分别读取对应分类参考。
- 只读取当前任务需要的文件。禁止为了保险读取全部
ref/或全部references/。 - 输出时使用产品语言说明“解决什么问题”，再给实现代码或视频提示词。
按需读取导航
先读哪个 reference
| 用户需求 | 读取文件 | 读取条件 |
|---|---|---|
| 用户用产品问题描述需求，例如“加载白屏”“点了没反应”“想高级一点” | references/scene-routing.md |
需要从场景匹配动效，或需要把模糊描述转成候选方向 |
| 用户要求最终方案、代码、可调参数、视频 prompt | references/output-format.md |
已经选定动效，或准备输出最终答案 |
再读哪个分类 ref
读取 references/scene-routing.md 后，根据匹配结果只打开相关分类文件。若用户已经明确说出分类或动效，也可直接读取对应分类文件。
| 分类 | 读取文件 | 读取条件 |
|---|---|---|
| 加载、等待、白屏、进度、聊天输入中、语音识别 | ref/01-loading.md |
等待状态或加载反馈 |
| 按钮点击、提交中、成功、失败、长按确认、复制成功 | ref/02-button-feedback.md |
操作反馈发生在按钮或点击动作上 |
| 数字、文字、倒计时、标题、滚动字幕、光泽文字 | ref/03-text-data.md |
文本或数据本身需要动态变化 |
| 弹窗、Toast、Tooltip、Popover、抽屉、命令面板 | ref/04-overlay.md |
独立浮层或提示层进入/离开 |
| 页面跳转、Tab、侧栏、共享元素、底部导航 | ref/05-navigation.md |
页面、视图或导航状态切换 |
| 输入框、表单校验、开关、单选、验证码、滑块、步骤 | ref/06-form-input.md |
表单控件或输入流程 |
| 滚动出现、阅读进度、吸顶缩小、图片揭示 | ref/07-scroll.md |
动效由滚动触发或跟随滚动 |
| 图标、Logo、角标、点赞、铃铛、复制图标 | ref/08-icon.md |
小图标或标识发生状态变化 |
| 轮播、列表增删、拖拽排序、手风琴、头像堆叠、滑动操作 | ref/09-carousel-list.md |
列表或集合项交互 |
| 主题、空状态、在线状态、收藏、已读未读、成功失败状态 | ref/10-state.md |
全局或组件状态变化 |
| 背景、高级感、发光、粒子、磁性光标、扫描线、3D 悬浮 | ref/11-ambient.md |
氛围、品牌感或背景质感 |
| 图表、仪表盘、统计卡片、折线、环形图、排名、时间线、散点、分布、占比、雷达图 | ref/12-data-viz.md |
数据可视化入场、趋势对比、分布展示或数值强调 |
| 淡入、上滑、缩放、弹性、序列、模糊、折叠展开 | ref/13-enter-exit.md |
通用元素出现、消失或列表入场 |
输出要求
输出最终方案前，必须读取：
- 至少一个相关
ref/*.md分类文件。 references/output-format.md。
从 ref/*.md 中提取视觉描述、适用场景、时长/参数、实现要点。不要凭记忆补动画参数。若多个动效组合跨分类，只读取涉及到的分类文件。