独立套件入口：http://127.0.0.1:18309/#motion。以下规则属于莱茵设计；宿主按实际交互选择配方。
2026-10-22，用户指定 Transitions.dev 作为UX与动画参考。本文件补充组件规范，保留Rhine Design的苔绿、暖白、三角几何与清晰文字。以下参数是本项目设计决定，不是对参考站时长或曲线的测量结果。
用户已进一步授权实现展台：/#motion目前提供12组可播放、重播、复位的真实示例，支持原速/4倍慢放、逐例减少动态及全局偏好。main组件共46个（npm0.3.0为40个）；实验性配方仍限定于展台，后续按“展台评审 → 通用组件采用 → App接入”推进。
- 首页：分类导航、独立演示卡、主动播放按钮，以及示例名称和简短用途说明。实际浏览并点击卡片尺寸示例；未对全过程录屏或逐帧计时。
- 动效目录：核对了菜单、弹窗、面板、状态文字、图标、骨架到内容、提示气泡与折叠等参考类型。目录提供的说明是选型依据，不代表逐项完成交互验收。
- 示例详情与文档：预览、CSS与React视图并列，动效参数集中管理。Rhine Design继续使用自己的token与组件契约，不复制另一套参数体系。
- 动作有来源。 菜单、气泡从触发位置展开；碰撞避让改变位置时，动画方向随最终位置变化。按钮点击立即响应，视觉过渡不排队阻塞下一次操作。
- 前后是同一个对象。 展开说明保留原入口；加载后保留内容位置；刷新保留旧数据，失败留出重试。账号卡的关键详情继续常显，选择时不改变卡片大小。
- 一次只有一个视觉重点。 打开弹窗时处理遮罩与面板即可，不再让标题、字段和按钮逐个飞入；数据表不按行排队进入。
- 动效可被主动比较。 展台后续为每种动效提供静态起点、播放/切换、重播、参数说明及减少动态对照。重播只改变本地演示状态，不重新执行复制、请求、确认等真实动作。
- 解释适用条件。 示例卡写清“触发 → 变化 → 结束状态”，并显示已实现/设计候选；筛选只改变展台展示范围，不改变组件业务值。宽屏并排对照，窄屏单列，播放按钮位置稳定。
动效实验室已为12组配方提供上述播放控制、状态说明、参数和逐例减少动态开关；并排卡片可分别设置偏好作比较。既有组件目录保留普通交互示例，不给每个无动画组件添加播放按钮。
| 参考方向 | Rhine Design使用方式与参数 | 当前状态 / 下一步 |
|---|---|---|
| 尺寸变化、折叠揭示 | Disclosure用200ms高度过渡，内容不缩放；从当前高度反向，展开结束恢复自然高度；账号选择不触发尺寸变化 | 已有可中断Disclosure；不新增通用卡片变形 |
| 菜单与气泡 | Menu/Popover/Combobox进入160ms、opacity与≤3px位移；位移朝向最终锚点方向，关闭即时归还焦点 | 实验室Menu/Popover已有四向候选；通用默认仍为原有动画，Combobox暂未单列方向演示 |
| 模态打开与关闭 | Dialog/ConfirmDialog进入160ms淡入；表单文字保持原尺寸；关闭即时，焦点归还不等待视觉退出 | 已实现；继续保留现有语义和时长 |
| 加载到内容 | 初次加载沿用1400ms骨架轻脉冲，内容就绪即替换；180ms内容淡入，骨架占位匹配最终结构 | 实验室已实现合成加载衔接，未接业务；刷新不重播骨架 |
| 状态文字与图标切换 | 复制/保存完成后可试验120ms结果淡入；按钮保持尺寸、焦点与可访问名称；只在真实成功后显示勾选反馈 | 实验室已实现合成结果淡入；不会调用保存/复制，通用CopyButton行为不变 |
| 提示气泡 | 鼠标悬停延迟300ms，键盘focus无等待；进入160ms，离开/Escape即时关闭，可移入气泡阅读 | 已实现；不新增指针跟随或跨按钮滑动 |
| 通知 | Toast进入180ms、≤3px；成功默认5秒，hover/focus/页面隐藏暂停；错误和警告常驻 | 已实现；不为了参考视觉新增通知堆栈 |
| 选项切换 | Tabs指示与面板180ms，Switch滑块120ms；选中值立即更新，快速反向响应最新意图 | 已实现；保留现有下划线/滑块，不新增测量式滑动胶囊 |
| 数字变化 | 请求量、费用、配额直接显示最终值，tabular-nums稳定对齐；未知保持“—” | 保留静态Metric，不采用滚轮、逐位翻转或从零计数 |
菜单方向候选：最终位于触发点下方时从translateY(-3px)归零，上方从translateY(3px)归零；左/右侧对称处理。只修改视觉transform，不干预Radix的定位计算或焦点管理。需要先在四向和视口边缘展台验收，再推广到组件。
入口为MotionGallery.tsx和展台动效CSS。每张卡初始静态，播放后可反复重播，复位清理双帧调度和合成结果计时；只重建该卡的演示内容，外层控制按钮保持焦点。加载/结果使用明确的700ms合成等待，不连接接口或系统剪贴板；慢放只改变视觉过渡，不延长这段等待。
弹窗使用现有Dialog和焦点限制。弹窗内“重播弹窗入场”重启CSS动画，不卸载内容或复制焦点树；减少动态时没有可重播的视觉动画。Toast演示使用duration=0便于观察，通用Toast默认5秒规则不变。Popover/Menu/Tooltip增加可选open/onOpenChange/side用于受控展示；原有调用方式和默认行为保持不变，受控时须成对提供open与onOpenChange。
四向效果只匹配.ds-motion-card内的实际Radix浮层，通过最终data-side选方向。Portal仍挂最近主题根，逐例减少动态和慢放均继承到浮层。新增配方不写进业务页或全局组件CSS；不把候选标签改为生产能力。
实验室小于760px视口时，左右方向请求优先转换为bottom，再由Radix决定上下避让。实测两侧都容不下300px气泡时，仅依赖左右flip可能仍越界；不以组件库已有碰撞功能代替窄窗验收。
- 继续使用tokens.css：按下80ms、交互120ms、浮层160ms、面板180ms、通知/折叠200ms、进度/品牌240ms；Toast用面板180ms，Notice用通知200ms。正文与数值不做缩放或模糊。
--rhine-ease-standard为cubic-bezier(.2,0,0,1)；Disclosure收起用现有exit曲线。--rhine-motion-distance为3px；新增配方先复用这些变量，不新增逐组件硬编码时长。- 动画仅声明需要变化的属性，不用
transition: all。一般用opacity/transform；高度测量仅用于必要的Disclosure布局变化，不用整页高度动画掩盖布局跳动。 - 快速反向从当前画面续接，旧动画取消；卸载清理动画和计时器。初始渲染、窗口恢复或普通重渲染不重复播放操作成功效果。
- 语义先于装饰：checked、aria-expanded、真实结果和焦点即时更新；内容淡入不延迟可读状态。不要为了动画同时保留两份可聚焦控件或重复live播报。
- 系统减少动态始终优先，手动减少动态也作用于Portal。关闭位移、脉冲和过渡后仍能识别加载、成功、失败；通知停留计时与视觉动画分别处理。
采用状态连续性、方向来源、短促反馈与可重播的展示方式。数字翻转、文字模糊、错误抖动、弹簧回弹、彩屑、液态菜单、3D倾斜及循环扫光不进入当前工作区规范；它们不帮助凭证选择或用量阅读。通用Logo保持240ms三角归位，不用装饰循环表示业务运行。用户另行要求的启动编排允许品牌专属720ms/18px旋转展开归位；仅在展台演示，实际App就绪不得等待完整分镜。
参考站是设计来源，组件复用入口仍是本仓库。当前CSS/Web Animations及Radix已能承载上述方案，本次不引入额外动画库、CLI、远程Builder或评分流程。未来需要复用外部源码时单独核对许可与依赖，参考授权不等于已取得代码授权。
授权移交的 OrbitBackdrop 是独立艺术背景，保留原有环节点、曲线、发射箭头、光晕与透视；不修改通用 Logo、加载或交互配方。组件拥有 Canvas 绘制和生命周期，默认提供暂停 / 继续按钮；业务只组合布局，不另写一套动画。它不表示加载、进度或操作成功，普通业务刷新不触发重播。
系统、显式 prop 和祖先的减少动态偏好均可停帧，内层跟随系统不覆盖外层减少动态，reducedMotion={false} 不能覆盖系统偏好。窗口不超过 760px、页面隐藏、组件离屏或零尺寸时也保持静态；恢复沿冻结时间继续，不追赶。resize 静态重绘，DPR 上限为 2，卸载清理 rAF、监听器与 observers；Canvas 不可用时保留静态艺术和内容。
展台 /#orbit 使用真实公开组件，提供暂停 / 继续、局部重播、手动减少动态及系统 / 全局偏好继承。重播只重建艺术组件，外层业务内容不重建。此艺术背景不计入 /#motion 的 12 组配方；npm 0.5.0 及以前不包含它。API、三主题可读性与验收清单见轨道背景契约。
每项候选先在真实组件展台展示，再更新实现状态。检查鼠标/键盘、快速反向、重复点击、加载成功与失败、长文本、400/520/880宽度、200%缩放、系统/手动减少动态；浮层额外检查四向避让与嵌套Escape。对比前后截图核对布局，对动画全过程录屏或采样核对时序，中间帧与最终帧分别记录。
首次内容切换不闪空白、不让操作目标跳位；刷新不丢旧数据；退出后无透明遮挡层和遗留焦点；无隐藏控件可Tab到。文档参数、DOM存在与单张截图不能代替完整动效或宿主原生平台原生验收。
2026-10-22展台验证：Chrome通过400/520/880/1200宽度、200%缩放、10组播放/复位、快速重播取消旧结果、四向位置/位移采样、菜单键盘、弹窗内重播保焦点与关闭归还、折叠中途反向、通知关闭、Tooltip Escape、逐例/全局/系统减少动态。采样确认4倍慢放的内容淡入720ms、反馈480ms、浮层640ms、折叠800ms及品牌960ms；未将合成浏览器结果扩展为原生或业务验收。
新增抽屉与步骤两组示例，实验室现为12组。Drawer继承160ms浮层token，从右侧3px淡入；弹层内重播只重启CSS动画，焦点与内容不重建。Steps当前段使用180ms/3px进入，由业务校验推进。表单错误直接呈现并定位，无抖动效果。完整适用场景、减少动态与告警规则见交互规范。