motion-effects

以你的品牌打造的动效

16 种效果，让产品、数字或文字动起来，仿佛出自动态设计师之手。每种效果都是一份配方：效果是什么、从哪里开始、在哪里结束、8 秒循环中各部分何时动起来，以及让它显得高级的关键细节。你选择效果，提供真实文案，它便会从头开始，以你的配色和字体打造。

**开始之前：**如果 brand.md 和 MOTION.md 存在，请先阅读。如果不存在，请先运行 brand-intake，或询问十六进制颜色值、字体和徽标文件。没有这些信息时，绝不能称结果符合品牌风格。

第 1 步：询问四项内容，然后等待

1. 效果。 从 16 种效果中按名称或编号选择。如果对方描述的是任务（例如“展示我们的定价”“揭晓发布名称”），就从下表中推荐最合适的两种效果，让对方选择。
2. 真实内容。 要放入其中的文字、标签和数字。请提供真实数据，或说明这些是示例。
3. 尺寸。 1080 x 1080（正方形）、1080 x 1350（LinkedIn 竖版）、1080 x 1920（Reel）或 1920 x 1080（YouTube）。
4. 循环播放还是定格。 循环播放会无限重复（适用于帖子或 GIF）。定格会播放一次，并停留在最终画面（适用于配音视频，不会在句子中途重置）。

#	效果	适用场景
01	按钮 → 播放器	在落地页或发布邮件中加入“观看演示”的时刻
02	搜索 → 结果	展示人们在帮助中心或内容库中能找到什么
03	卡片 → 工作区	宣布一项功能，让一张小卡片变成完整的编辑器
04	标签页 → 面板	对比方案、套餐或渠道，避免堆砌大段文字
05	图表变形	在客户报告或成果帖子中展示每周结果
06	仪表盘缩放	从仪表盘中突出最重要的 KPI
07	弹簧式堆叠	依次展示三项优惠、案例研究或客户评价
08	磁吸式停靠栏	展示你使用的工具，或产品集成
09	遮罩文字	揭晓活动名称、期号或发布标题
10	弹性文字	用标题卡片开启活动、网络研讨会或播客
11	文字 → 布局	将标题变成轮播封面或文章预告
12	图片揭晓	预告新品发布，然后换成自己的照片
13	视角转换	说明服务、品牌系统或技术栈的层次
14	玻璃聚焦	引导人们阅读报告中最重要的一行
15	流动路径	展示一条内容如何流向多个渠道
16	粒子徽标	以品牌标记为视频、Reel 或帖子收尾

第 2 步：阅读配方

打开 references/effects.md，完整阅读所选效果的内容：起始状态、结束状态、时间安排和高级感细节。配方就是规格说明。将演示文案换成用户的真实内容，并将每种颜色角色（背景、表面、墨色、弱化色、强调色、第二强调色）映射到 MOTION.md 中的颜色。

步骤 3：构建

按照以下规则构建一个独立的文件 effect.html：

1. 一个时钟。 每一帧都只根据时间计算。添加 window.seek(seconds)，以任意顺序、任意调用次数绘制指定时刻的精确帧。不要使用 setTimeout，不要让 CSS 动画自行运行，也不要使用未设定种子的随机数。
2. 一个 8 秒循环。 从 0.0 过渡到 2.2，保持到 6.6，再于 8.0 前返回。seek(0) 和 seek(8) 必须绘制相同的帧。在保持模式下，播放一次过渡，并从 6.6 起停留在结束帧。
3. 回到起点。 返回时，每个元素都平滑过渡回最初的位置。不能突然跳回原位。
4. 使用真实内容，绝不使用 lorem。 使用用户提供的文字和数字。示例数字在每一帧中都必须带有清晰可见的“说明性”或“示例”标签。
5. 独立运行。 字体嵌入，图片内联，不发起网络请求，因此可离线打开，并且每次渲染结果一致。
6. 默认自动播放，除非另有说明。 在浏览器中打开时实时播放；如果 URL 以 ?render 结尾，则停止时钟，让导出器自行驱动 window.seek()。
7. 放大效果。 按选定尺寸填满画面，并留出 MOTION.md 中规定的边距。不能只是在大片空白画布上放一个小图块。

步骤 4：展示前检查

截取 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 秒的帧，并附上文件路径。

步骤 5：导出

Now turn effect.html into a video and a GIF I can post. Use tools already on this computer. If you need something that is not installed, stop and tell me what it is before you install anything. Load the page with ?render, call window.seek() for every frame at 30 frames per second (240 frames for 8 seconds), and encode an MP4 in H.264 at [SIZE]. Then make a GIF that loops forever. Show me three frames from the finished GIF so I can check it came out right.

如果已安装，HyperFrames（npx skills add heygen-com/hyperframes）可以一步完成此操作。

我吸取的教训

• “做得高级”意味着让一个物体变形。 这 16 种效果中的每一种，都是一个物体变成另一个物体：按钮变成播放器，条形变成线条，卡片变成窗口。每次从一张图淡变到另一张图，看起来都很廉价。
• 人们真正关注的是停留阶段。 8 秒中有 4.4 秒是停留阶段。如果这段时间里没有任何东西移动，循环就会显得死气沉沉。每个方案都会让某个小元素在这段时间里保持动效：进度条、光标，或第二道光波。
• 保留起始状态的淡淡残影，更能凸显变化。 按钮或卡片原来位置留下的淡淡轮廓，能让视线跟上变化过程。没有它，最终状态看起来就像凭空出现。
• 错开一个节拍，而不是同时开始。 每一行、每块板条、每个字母和圆点，都比前一个晚一小段时间开始移动。所有元素一起移动，看起来就像幻灯片转场。
• 第 0 帧用了错误的字体。 嵌入式字体要等到实际使用时才会加载，因此第一帧可能会用备用字体渲染。在第一次 seek(0) 之前，显式加载所有字体。
• 放大整体，不要重新绘制。 使用固定坐标绘制的效果，只改画布尺寸时会缩在角落里。应缩放整个绘图，让它填满画面。
• 空白页面通常是因为名称被重复声明。 在不同文件之间复制辅助代码时，重复定义了一个颜色常量，导致整个脚本停止运行。每个名称只声明一次；如果页面空白，就把控制台里的红色错误信息复制给 Claude。
• 对于 Reel 剪辑来说，8 秒太慢了。 把完整循环放进 Instagram B-roll 后，未能通过动效检查。剪出动态变化的部分（约 1.4 秒），并在旁白下使用停留模式。
• 选择一种时间单位并始终保持一致。 导出器和页面必须统一使用秒或毫秒。这个素材包全程使用秒。
• 在画面上标明虚构数字。 演示用的面板上，所有数字都是我自己编的，因此每种效果都带有“示例”标签，直到换成真实数字。

交付

向用户提供 effect.html、MP4 和 GIF，以及经过检查的三帧。然后用一句话提出下一步：制作同一组中的另一种效果，或使用 reel-export 将其转换为带安全区文字的竖屏 Reel。