motion-launch-video

动态设计发布视频

这是 Chan 对发布影片制作方式的要求。以下内容提炼自制作 Cheerful 的“The Spark”（v1）和真实数据剪辑版（v2）的所有提示词与评审意见。 提示词原文按顺序收录在 references/prompts.md 中——开始前请先阅读；它们就是规格说明。代码模式见 references/technique.md。 可复制参考的完整成片位于 ~/code/cheerful-motion/launch2/。

立场：你就是导演

• 创意不受限制。 Chan 说过“我希望你来当导演”“充分发挥创意自主权”“跳出框框思考”“形状和按钮都没有限制”。不要为创意选择征求许可；直接做决定，将其记录为 DECISION，并在最后列出，这样他可以一次回复就推翻任意决定。
• 原创，绝不套模板，绝不照搬。 不要整段挪用产品网站上的文案、UI、统计数据或图片。自己构思场景。“任何看起来像模板的东西”都禁止。
• 发布影片的气势。 现代、未来感、高端——达到顶尖动态设计师（Linear、Apple、Arc）的水准。每个节拍都要有变化，不能有冷场。
• 对细节的关注就是产品本身。 微交互（按钮按压、旋钮拉伸、姓名标签延迟、点击涟漪、里程表归位、贴纸倾斜）才能营造出高级感。

不可妥协的动态规则

1. 同一个形状，绝不切镜。 每个状态都由同一个元素改变尺寸、圆角和颜色，并通过短暂模糊切换内容。无需切镜；转场应使用形变、镜头运动、推进至元素并让它成为下一个场景（磁贴展开成收件箱、回复卡片变成订单、光标变成 Logo 星形）。
2. 内容切换时要有短暂模糊，形变容器中的文字也要有独立的进入和退出时序——退出要短且提前——否则新旧文字会重叠。
3. 处处使用弹簧，超调最多一点点。 不要有弹跳式缓动。只使用闭式阻尼弹簧阶跃响应（见 technique）。
4. 前后边缘使用不同的弹簧，让元素产生拉伸效果：标签指示器、切换旋钮、液态胶囊——前沿要领先于后沿。
5. 每次变化都由光标通过真实点击和拖动驱动。 拖动属于直接操控：按住时，根据光标位置计算数值；松开后，从当前位置弹回。产品的 Agent 也可以成为自己的光标（渐变色的多人协作光标，带有姓名标签、短暂运动轨迹、随速度倾斜，点击时缩放并出现涟漪），接过用户光标（“你”）的控制权。
6. 镜头要推进，让每种状态都铺满画面。 画面留白是缺陷；要先对准内容，再推进、甩镜或拉远。拉远以展现规模（从一封邮件变成数百封的网格；从一篇帖子变成一面墙）。
7. 节奏以音乐为先。 约 120 BPM，用 numpy 分析歌曲的节拍网格，从强拍开始，并裁剪歌曲片段，让高潮落在产品的关键时刻。每个节拍都要有变化；打字要配合军鼓渐强段，以 32 分音符为节奏；重击要逐渐加快节拍，从每拍一次到八分音符，再到十六分音符。
8. 所有 UI 音效都要合成，并根据测得的峰值定位到踢鼓峰值网格上。
9. 循环： 作品循环播放时，最后一帧必须与第一帧完全一致——包括光标位置和速度——否则循环会卡顿。

视觉风格

• 调色板： 使用品牌自身的设计系统（Cheerful 使用暖调近白色画布、品牌渐变 #B04ADC → #E35C91 → #FF7247 → #FFB21E、淡紫色/桃色光斑、墨色 #111827）。不要用“黑色加一种紫色”。使用一种简洁的 UI 字体。
• 禁止项（来自原始简报，除非 Chan 推翻，否则仍然有效）： 弹跳式缓动、粒子爆发、辉光、应用于 UI 装饰元素的渐变、图标描边不一致、冷场、模板感。

内容

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

流程

1. 先索取输入（除非对方已经提供，或说“由你决定”）：8–12 个状态，说明形状要变成什么；配色（黑白、单一强调色或品牌色系）；以及一首免版税、约 120 BPM 的歌曲。 提供“导演剪辑版／导演选择”选项——他通常会选这些。
2. 写代码前，先在节拍网格上展示状态列表（小节／节拍表格：发生什么、哪个元素变形成什么、对应什么音效）。
3. 构建单个 HTML 文件，所有样式都在 seek(t) 中根据时间计算——不使用 CSS 过渡、不使用计时器，也不在帧与帧之间保留状态。
4. 完整渲染前，每个节拍先渲染一帧，制作接触表，修复任何偏离网格、拥挤、空洞、难以辨认或相互重叠的问题。然后检查 ±0.1 秒处的过渡。
5. 完整渲染：使用 Playwright 子帧 → ffmpeg tmix 运动模糊 → 60 fps H.264 + 混音。
6. 验证 MP4 文件本身（每秒 1 帧的分镜图、帧差扫描以检查拼接处／故障），通过 tailnet 提供服务，并报告：链接、创意概念、场景列表、真实数据与虚构数据、DECISIONs、注意事项（音频未经聆听——请明确说明；Logo／肖像使用许可）。

容易踩坑、白白浪费数小时的地方

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

输出

将交付物放入 deliver/ 文件夹，并使用 serve <dir> 提供服务（tailnet URL，绝不能用 localhost）：MP4、每秒 1 帧的分镜图、关键静帧，以及用于对比的上一版。