组件还是原子动效：从合适层级开始

组件面向一个可直接放进产品的完整交互，例如复制按钮、抽屉、筛选网格、上传队列或行内校验。它同时处理控件结构、业务状态、键盘与焦点路径、错误和恢复、减弱动效以及运行依赖。Motion Lexicon 的组件页面提供真实预览、实际 React 源码、shadcn Registry 安装入口和关联原子动效。团队可以从可运行的整体开始，再把文案、数据与视觉语言接入自己的设计系统。

原子动效聚焦一个行为规则，例如淡入、滑入、交错、缓动、按压反馈或交叉淡入淡出。它适合界面结构和业务状态已经明确，当前任务只需要解决对象如何进入、退出、响应输入或保持连续性的场景。原子动效页面给出参数、实现规则、相关术语、减弱动效策略、源码与 Registry 安装入口。清楚的边界让同一规则可以进入不同组件，也让设计与工程能用相同词汇讨论节奏、空间和中断。

先列出需求涉及的对象与状态。一个按钮需要等待、成功、失败和再次操作，一组筛选控件需要更新命中数量、列表、空状态和焦点位置，一个抽屉需要管理触发器、遮罩、焦点锁定、关闭手势与返回焦点；这些需求都拥有完整交互边界，组件能提供更接近成品的起点。组件把相互依赖的状态放在同一契约里，团队可以直接验证真实任务是否顺畅。

再检查产品是否已经拥有可靠结构。现有菜单已经处理焦点和键盘导航，当前只想让高亮在选项间连续移动；现有列表已经处理筛选数据和空状态，当前只想确定新旧卡片如何交接；现有按钮已经覆盖请求状态，当前只想调整按压反馈。此时原子动效给出更小的改造面。团队保留原有语义和状态源，只把明确的动效规则接入对应对象，并在真实布局中验证。

从组件开始时，先运行完整交互，再查看页面列出的基础动效。复制按钮把按压反馈和文字形变组合在同一位置；筛选网格把交叉淡入淡出、交错和位移用于不同阶段；抽屉把滑入、弹簧与方向关系放进焦点完整的层级里。关联链接解释组件为何这样移动，也指出可以独立调整的规则。修改原子动效参数后，要回到组件的等待、错误、重复操作与减弱动效路径中复测。

从原子动效开始时，把行为放回现有组件契约。为卡片加入交错，需要同时确认数据顺序、稳定 key、首屏数量和重复筛选；为菜单加入方向感过渡，需要同时确认导航层级、返回方向与焦点目标；为按钮加入文字形变，需要同时确认宽度、状态文案和辅助技术播报。原子动效提供精确规则，产品组件继续拥有业务事实。这样的所有权分工能防止局部效果脱离状态，也让复用保持清楚。

改造范围可以分成内容、规则和结构三层。内容层替换名称、文案、图标、颜色和数据，完整状态关系保持稳定；规则层调整时长、缓动、距离、出现顺序和减弱动效表达；结构层改变触发器、参与对象、状态图、焦点顺序与恢复路径。内容层通常适合直接采用组件，规则层适合沿关联原子动效精调，结构层需要重新确认组件公共 API 和业务状态源。先写清层级，评审和测试就能围绕同一边界进行。

技术成本也应进入选择。组件页面列出运行引擎、依赖和成本等级，适合在安装前判断 Motion、GSAP、Three.js、WebGL 或 CSS 是否符合项目约束。原子动效通常拥有更窄依赖和更小 API，适合已有设计系统逐项吸收。两条路径都要检查服务端渲染、布局稳定、合成属性、交互中断和 `prefers-reduced-motion`。页面预览帮助判断感觉，源码与 Registry 文件帮助确认真实交付内容，产品环境负责最后验收。

实际工作可以沿一条短链路推进：用一句话写出用户事件和预期结果；列出对象、状态、焦点与恢复；判断需要完整组件还是单一原子动效；在对应目录打开真实预览；检查源码、依赖和关联规则；安装到产品分支；用真实数据测试默认、失败、重复操作与减弱动效。每一步都留下可验证证据，选择也能从视觉偏好转成对任务、状态和运行边界的共同判断。

复用结果还可以改进目录。一个组件在多个产品中反复出现相同的局部规则，说明对应原子动效值得补充参数、术语或评审说明；一个原子动效经常与相同控件结构、状态和无障碍路径组合，说明现有组件可以扩展公共 API，或新的组件候选已经形成。贡献时记录真实事件、边界、失败方式和验证结果。这样组件保持完整可用，原子动效保持清晰可复用，二者共同形成可持续演进的动效语言。