product-launch-motion

动效设计发布视频

这是 Chan 希望制作发布影片的方式。这些内容凝练了所有提示词和评审意见，共同塑造出 Cheerful 的「The Spark」（v1）和真实数据剪辑版（v2）。 提示词原文及其顺序见 references/prompts.md——开始前请先阅读；它们就是规范。代码模式见 references/technique.md。 过往影片展示了制作手法；请根据客户的问题、现有品牌素材和实际行为，为这款产品创作自己的故事。始终保持单一形状的连续性。

立场：你是导演

• 创意不受限制。 Chan 说：「我希望你来当导演」「完全掌控创意」「跳出框框思考」「形状和按钮都不设限」。不要为创意选择征求许可；直接做决定，将其记录为 DECISION，并在结尾列出，方便他一次回复就推翻任意决定。
• 原创，绝不套模板或抄袭。 不要照搬产品网站上的文案、UI、统计数据或图片。场景要自己创作。「任何看起来像模板的东西」都不允许。
• 充满发布影片的能量。 现代、未来感、高级——达到顶尖动效设计师的水准（Linear、Apple、Arc）。每个节拍都有事件发生，绝不冷场。
• 细节就是产品。 微交互（按钮按下、旋钮拉伸、姓名胶囊延迟移动、点击涟漪、里程表归位、贴纸倾斜）才能营造高级感。
• 让观众轻松跟上。 每个场景只传达一个明确要点，提示词和回答要简短，并留出充足时间让观众看清结果。主要构想保持清晰的同时，通过次要运动和声音让节拍持续鲜活；与其催促观众，不如简化内容或增加节拍。

不容妥协的运动规则

1. 一个形状，绝不切镜。 每个状态都是同一个元素在改变大小、圆角和颜色，同时以短暂模糊效果替换内容。避免切镜；转场应使用形变、镜头移动，或推近一个元素，让它成为下一个场景（磁贴展开成收件箱、回复卡片变成订单、光标变成徽标星形）。
2. 内容替换时伴随短暂模糊， 形变容器中的文字也要有独立的进场和退场时序——退场要短且提前——否则新旧文字会重叠。
3. 全程使用弹簧，最多只有极轻微的过冲。 不要使用弹跳缓动。只使用闭式阻尼弹簧阶跃响应（见技术部分）。
4. 前后边缘使用不同的弹簧， 让元素产生拉伸效果：标签指示器、切换开关旋钮、液态胶囊形状——前缘要领先于后缘。
5. 每次变化都由光标通过真实点击和拖动触发。 拖动属于直接操作：按住时，数值由光标位置计算；松开时，元素从当前位置弹簧回弹。产品的 Agent 可以充当自己的光标（带姓名胶囊的渐变多人协作光标、短运动轨迹、随速度倾斜、点击时缩放并产生涟漪），并从用户的光标“你”手中接过操作。
6. 镜头要推近，让每个状态都铺满画面。 空镜头就是故障；构好内容画面后，再推进、快速甩镜或拉远。拉远可展现规模（一封邮件 → 数百封组成的网格；一篇帖子 → 一面墙）。
7. 优先考虑音乐节奏。 编排动作前先选好配乐：富有活力、符合品牌调性，包含渐强段、清晰的高潮和令人满足的结尾。BPM 本身不代表能量；不要默认使用重复的合成器循环。使用已获授权的曲目，或创作具有上述音乐弧线的原创配乐。 目标约为 120 BPM，使用 numpy 分析歌曲的节拍网格，从强拍开始，剪辑歌曲片段，让高潮落在产品的重要时刻。每拍都要有动作；鼓点渐强时，打字节奏跟随 32 分音符；撞击声逐步加快节奏，从整拍 → 8 分音符 → 16 分音符。
8. 所有 UI 音效都要合成，并根据测得的峰值放置在底鼓峰值网格上。 音效设计要和视觉效果一样认真对待：原创、分层的音效能让影片变得丰富而鲜活（Hoopoe Club 影片就是一个例子）。大胆发挥创意。
9. 循环： 影片循环时，最后一帧必须与第一帧完全相同——包括光标位置和速度——否则循环会卡顿。

视觉风格

• 配色： 使用品牌自己的设计系统（Cheerful 的配色：温暖的近白色画布、品牌渐变 #B04ADC → #E35C91 → #FF7247 → #FFB21E、淡紫／蜜桃色光晕、墨色 #111827）。不要做成“黑色加一种紫色”。使用一种简洁的 UI 字体。
• 禁用项（源简报中列出，除非 Chan 推翻，否则仍然有效）： 弹跳缓动、粒子爆发、发光效果、UI 装饰上的渐变、不一致的图标线条、空等时间、模板化观感。

内容

• 使用真实数据。 Chan：“你可以访问数据库。发挥创意，不要只挑图片。” 以只读方式获取真实且有依据的数据（触达的创作者、寄出的礼物、追踪的帖子／浏览量），并用滚动式数字里程表展示。可以虚构微型故事（创作者、品牌、消息），但重要数字必须真实，并在报告中说明哪些是真实数据、哪些是虚构内容。
• 客户徽标一个接一个地展示，砰、砰、砰——绝不要做成网站风格的“广受信赖”徽标行。每次出现时都调整同一个形状的大小和颜色，且只展示真正开展过活动的品牌。
• 只使用已获授权的媒体。 使用免费许可来源的库存视频／静态图像，并逐项检查（Mixkit 中也混有受限内容）。绝不能图省事而使用产品自己的营销图片。
• 保留他喜欢的部分： Cheerful 的标题开场、打字输入的简报、发现搜索墙和字标结尾都经过测试且效果不错——保留这些版本间强劲的节奏点，并迭代其余部分。

流程

1. 先询问输入信息（除非对方已经提供，或说“你来决定”）：8–12 种状态，它们应该呈现的形式；调色板（黑白、单一强调色或品牌色系）；以及一首免版税、约 120 BPM 的歌曲。提供“导演剪辑版 / 导演挑选”选项——他通常会选这些选项。
2. 先执导，再实现。 编写动画代码前，先敲定简洁的创意方案：产品故事与亮点、品牌呈现、配乐及音乐情绪走向，然后制定逐拍场景计划，涵盖取景、关键交互、转场和音效提示。展示方案，以导演的身份补齐疏漏，然后再开始实现。除非对方要求，否则不要等待批准。每个场景都要有明确的要点和足够的阅读时间，并让一个易于识别的客户示例贯穿演示。为影片简化真实的产品行为，但不要虚构操作或结果。
3. 构建一个 HTML 文件，让每种样式都在 seek(t) 内根据时间计算——不使用 CSS 转场、计时器或帧间状态。
4. 完整渲染前，先为每个节拍渲染一帧，制作联系表，并修复任何偏离网格、拥挤、空洞、难以阅读或互相重叠的问题。然后检查 ±0.1 s 处的转场。完整渲染前，按正常速度审看低分辨率动态草稿：确认停留画面易读、光标操作正确、变形连续。静帧无法单独证明时序正确。
5. 完整渲染：使用 Playwright 渲染子帧 → 使用 ffmpeg tmix 添加动态模糊 → 输出 60 fps H.264 并混入音频。
6. 验证 MP4 文件本身，制作每秒 1 帧的分镜图，并扫描帧差以查找接缝和故障。按正常速度检查节奏和转场，留意闪烁，并对照画面确认音效提示同步。可以播放时要实际聆听；区分聆听与测量。通过 tailnet 提供影片，并报告：链接、概念、场景列表、真实与虚构的数据、DECISIONs、注意事项（是否实际听过音频，还是仅做了测量；Logo/肖像使用许可）。

耗时陷阱

• 切勿对摄像机缩放的元素使用 will-change——文字会变模糊。
• 弹簧动画从事件发生时开始：若目标必须在 T 时刻到达，就要提前一个 settle-lead 发出指令。
• 如果 hide() 将不透明度归零，绘制函数必须将其恢复，否则元素会一直不可见。
• 等宽数字在里程表中会跳动：将每一位的槽位设为最终字形的尺寸，并且只在垂直方向裁剪。
• 在 VPS 上：磁盘空间紧张（分 4 s 片段渲染并删除 PNG）；Chromium 是 earlyoom 最先杀掉的进程（自动重试、重新启动，完成后强制退出）；多余的 /tmp/inspect.py 会遮蔽标准库（从项目目录运行 Python）；PreToolUse 钩子会拦截某些 ffmpeg glob 字符串。

输出

将交付内容放在通过 serve <dir> 提供的 deliver/ 文件夹中（使用 tailnet URL，绝不使用 localhost）：MP4、每秒 1 帧的分镜图、关键静帧，以及便于对比的上一版本。