Motion Effects 是一套动效配方集合，包含 16 种高级动效，每一种都旨在让产品、数字或文字呈现出由专业动效设计师制作的观感。每个效果都附有配方说明：它是什么、从哪里开始、到哪里结束、在 8 秒循环中各部分何时运动，以及让它看起来高级的那个关键细节。用户选择效果、提供真实内容（文字、标签、数字）、指定尺寸和模式后，效果会在用户的品牌颜色和字体下从零构建。
使用前的准备
开始前需读取品牌与动效规范文件 brand.md 和 MOTION.md（如果存在）。如果没有，需先运行 brand-intake，或者向用户询问十六进制色码、字体和 logo 文件。在这些信息缺失的情况下，不应声称结果符合品牌。
第一步：获取四项信息并等待
- 效果：用户可指定 16 种效果中的名称或编号。如果用户描述的是任务目标（如“展示我们的定价”“揭晓发布名称”），则从效果表中推荐两个最匹配的选项供用户选择。
- 真实内容：要放入效果中的文字、标签和数字。需为真实数据，或明确标注为示例。
- 尺寸：1080 x 1080（方形）、1080 x 1350（LinkedIn 竖版）、1080 x 1920（Reel）或 1920 x 1080（YouTube）。
- 循环或停留：循环模式永久重复（用于帖子或 GIF）；停留模式播放一次后停留在完成帧（用于配音下，避免在句子中途重置）。
16 种效果及适用场景
01 按钮 → 播放器：在落地页或发布邮件中添加“观看演示”时刻。 02 搜索 → 结果：展示用户在帮助中心或内容库中找到的内容。 03 卡片 → 工作区：宣布功能，一张小卡片变成整个编辑器。 04 标签页 → 面板：比较套餐、方案或渠道，无需大段文字。 05 图表变形：将每周结果放入客户报告或成果帖子。 06 仪表盘缩放：从仪表盘中拉出最重要的一个 KPI。 07 弹簧堆叠：轮流展示三个优惠、案例研究或推荐语。 08 磁力码头：展示使用的工具，或产品的集成。 09 遮罩文字：揭示活动名称、期号或发布标题。 10 弹性文字：以标题卡开启活动、网络研讨会或播客。 11 文字 → 布局：将标题变成轮播封面或文章预告。 12 图片揭示：预告产品发布，然后换入自己的照片。 13 透视位移：解释服务、品牌系统或技术栈的层次。 14 玻璃聚焦：让人阅读报告中重要的那一行。 15 流动路径：展示一份内容流向多个渠道。 16 粒子 logo：以品牌标记结束视频、Reel 或帖子。
第二步：阅读配方
打开 references/effects.md，完整阅读所选效果：起始状态、结束状态、时机、高级细节。配方即规范。将演示文字替换为用户真实内容，并将每个颜色角色（ground、surface、ink、muted、accent、second accent）映射到 MOTION.md 中的颜色。
第三步：构建
构建一个自包含的 effect.html 文件，遵循以下规则：
- 单一时钟：每一帧仅由时间计算得出。添加 window.seek(seconds)，无论调用顺序和次数如何，都绘制该时刻的精确帧。不使用 setTimeout，不使用自行运行的 CSS 动画，不使用未播种的随机。
- 一个 8 秒循环：从 0.0 运动到 2.2，保持到 6.6，在 8.0 之前返回。seek(0) 和 seek(8) 必须绘制同一帧。停留模式下播放一次运动，从 6.6 起停留在完成帧。
- 回到起点：返回过程将每个元素缓动回其起始位置，没有突跳。
- 真实内容，绝不用占位文字：使用用户的文字和数字。示例数字在每一帧都带有可见的“illustrative”或“example”标签。
- 自包含：字体嵌入，图片内联，无网络请求，可离线打开且每次渲染一致。
- 除非被要求，否则自动播放：在浏览器中打开时实时播放，当 URL 以 ?render 结尾时停止时钟，由导出器驱动 window.seek()。
- 放大效果：在所选尺寸下填满帧，边距来自 MOTION.md。不是大空白画布中的小图块。
第四步：展示前检查
- 在 0、1、2.2、4.4、6.6、7.9 和 8 秒捕获帧并逐一查看。
- 循环：第 0 帧和第 8 帧完全相同。
- 运动：第 0、1、2.2 帧各不相同。如果两帧相同，说明效果的一部分没有运行。
- 适配：没有文字超出其框，七个时刻均无裁切。
- 静帧：暂停在 4.4 秒。效果的要点应能从这一帧读出。
- 品牌：屏幕上每种颜色和字体都在 MOTION.md 中。
修复失败项，重新捕获，然后才向用户展示 2.2 和 4.4 帧及文件路径。
第五步：导出
将 effect.html 转为可发布的视频和 GIF。使用电脑上已有的工具。如果需要未安装的工具，先停下并告知用户。以 ?render 加载页面，按每秒 30 帧（8 秒共 240 帧）调用 window.seek()，以 H.264 编码指定尺寸的 MP4。然后制作永久循环的 GIF。展示 GIF 的三帧供用户检查。
如果安装了 HyperFrames（npx skills add heygen-com/hyperframes），可一步完成。
经验教训
- “让它高级”意味着一个物体改变形状。16 种效果都是某物变成另一物，从一个图片淡入到另一个图片总是显得廉价。
- 保持段是真正被观看的地方。8 秒中 4.4 秒是保持段。如果其中没有运动，循环会显得死板。每个配方在那里保持一点小运动：进度条、光标、第二波光线。
- 起始状态的残影能强化变化。按钮或卡片起始位置的淡淡轮廓让视线跟随运动。没有它，结束状态看起来像凭空出现。
- 错开一个节拍，而非全部同时。行、板条、字母和点各自比前一个稍晚开始。全部同时运动读起来像幻灯片切换。
- 第 0 帧以错误字体绘制。嵌入字体在被使用前不会加载，所以第一帧可能以回退字体绘制。在第一次 seek(0) 前显式加载所有字体。
- 放大而非重绘。用固定坐标绘制的效果在改变画布尺寸后会缩在角落。应将整个绘图缩放到填满帧。
- 空白页通常是名称声明了两次。在文件间复制辅助函数会重复颜色常量并停止整个脚本。每个名称只声明一次，如果页面空白，将控制台红色错误粘贴给 Claude。
- 8 秒对 Reel 剪辑太慢。完整循环放入 Instagram B-roll 未通过运动检查。剪掉主动运动部分（约 1.4 秒）并在旁白下使用停留模式。
- 为时间选择一个单位并保持一致。导出器和页面必须在秒或毫秒上一致。此包全部使用秒。
- 在帧上标注虚构数字。演示中所有数字都是虚构的，因此每个效果在真实数字放入前都带有“example”标签。
交付
向用户提供 effect.html、MP4 和 GIF，以及三帧检查结果。然后用一行提供下一步建议：同组的另一个效果，或用 reel-export 将其转为带安全区文字的竖版 Reel。