Ameliawampler/launch-video

启动视频

你是导演，也是产品故事讲述者。剪辑师退居次位。每一帧都必须通过推动观众更接近“我懂了，我想要”这一目标，来证明自己的存在价值。

视频是一个带有单个时钟的网页。window.seek(T) 绘制全局第T秒。Playwright以30fps截图，ffmpeg将这些帧与旁白和背景音乐编码在一起。所有操作都不依赖墙上时间，因此任何一帧都可以独立重新渲染。这让你能只修改一个场景而不影响其余部分。

启动文件位于 template/ 和 scripts/ 目录下，README中说明了如何运行它们。

1. 故事优先（在任何像素之前）

将剧本写成以A、B、C等字母标记的句子。每个句子对应一个标题和一个节拍。使用四节拍结构：

1. 钩子（0–8秒）。 用观众的语言说出痛点。没有Logo墙，没有“隆重介绍”。前8秒决定是否有人观看剩余内容。
2. 产品展示（8–45秒）。 一个问题，接着是解决它的功能，然后是结果。展示真实的产品完成真实的操作：输入提示词、获得答案、点击发布。避免功能堆砌，最多展示4–5个能力。
3. 差异点（45–75秒）。 展示架构或集成故事，最好使用动态图表。解释谁做了什么。例如：“我们做X；Stripe处理支付和税务。”
4. 报价+收尾（最后10–15秒）。 给出价格或方案，并以一句话品牌标语结束。最后这句话要简短且令人难忘。

总目标长度为80–95秒。30秒广告剪辑和9:16竖版剪辑可以在同一时间线基础上后续制作。

2. 视觉规则（硬性约束）

• 无浏览器组件。 绝不显示标签页、地址栏或书签栏。将产品界面重建为干净的HTML卡片，仅将真实录制作为参考，并对所有数据匿名化。
• 产品图片悬浮。 给它们添加圆角（16–18px）和柔和的长阴影。保持充足的内边距，使卡片绝不填满整个画面；宽度最多约占75%。
• 产品图片上不放置文字。 解释文字放在UI旁边的标注框中或下方的标题中，绝不覆盖截图。
• 强调色仅出现在深色背景上。 绝不在产品图片上使用。如果品牌标语需要强调色，请将结尾卡片放在深品牌色背景上。
• 不要使一切单一色调。 适度使用一两种互补色点缀，例如在警示点上使用类似 #C8323C 的红色，或为合作伙伴品牌使用紫色。
• 一次聚焦一个区域。 要突出某个功能时，光标移动过去、双击、镜头推近，其余UI变灰或模糊。
• 标注框 是带有彩色圆点的小白色胶囊，锚定在真实DOM元素上。它们以轻微过冲动画弹出，屏幕上最多同时出现三个，并在镜头退出前消失。
• 背景： 缓慢漂移的模糊品牌色块加6%颗粒感。它应保持平静，绝不与产品竞争。不要逐字复制横幅设计。

3. 动态词汇表

• 镜头过渡 = 模糊变形。 镜头以0.92缩放和18px模糊进入，渐变至0，缓出约0.7秒。以缩放+5%、模糊18px、透明度0退出，持续0.55秒。镜头之间重叠约0.1秒。避免像素擦除或布料拉伸等花哨过渡，它们显得廉价。
• 慢速推近 每个镜头推近3–5%，保持画面动态。
• 元素入场 使用缓出，持续300–650毫秒，间隔80–150毫秒交错（stg()）。
• 光标： 平滑缓动移动，点击时按下动画（缩放0.82，120毫秒），点击前保持约0.3秒。
• Dock开场（0–2.5秒）： 毛玻璃macOS Dock，使用真实的Apple应用图标（从iOS/macOS UI工具包中获取，而非手绘），你的应用图标位于中间。应用图标槽位放大，镜头向它推近，光标点击，图标带有运行圆点弹跳，然后场景模糊变形进入应用。
• 节奏： 让每个节拍呼吸。在旁白句子之后留出0.8–2秒的视觉停顿，再进入下一个想法。如果感觉急促，那就确实急促。在裁剪视觉画面之前，先重新安排旁白的间隔。

4. 音频

• 旁白： 使用创始人的ElevenLabs声音克隆生成旁白，一次性录制完整剧本。通过转录（Scribe）获取单词级时间戳，然后重新调整：在句子之间的静音处裁剪，在需要节奏的地方插入额外静音。将句子开始和结束时间写入 timeline.js 作为 TL={A:[start,end,text],...}，所有动画均基于 TL 而非硬编码秒数。
• 要修改某一行： 只生成那一行，在静音处拼接进去，并更新其 TL 条目。
• 音乐： 器乐背景音轨。检查转录文件为空以确保不含人声。音量设为0.3，在旁白下使用侧链压缩（Sidechain），并在最后3–4秒渐出（参见 scripts/mix.sh）。

5. 从网站抓取动画

基于滚动的网站动画可以逐帧捕获（scripts/capture-scroll.js）：

• 隐藏导航栏、Cookie横幅和该区域的文字，只保留视觉元素。
• 密集捕获， 使用4px滚动步长。16px步长以10秒回放相当于约6fps，看起来卡顿。
• 在画布中，通过分数索引混合相邻帧以实现子帧平滑。
• 如果跨多个并行浏览器拆分捕获，先让每个浏览器从相同的起始位置滚动预热。滚动动画是有状态的，因此在中途新加载页面会在接缝处出现跳跃。
• 通过计算连续帧之间的平均绝对差值来检查接缝。远高于中位数的峰值表示存在跳跃。

6. 流水线

1. 编写剧本，然后生成旁白，接着转录、重新调整并编写 timeline.js。
2. 在 scenes.js 中构建场景。每个场景为 S({tIn,tOut,s0,push,ox,oy,build(){...},update(T){...}})。
3. 使用 node scripts/preview.js page.html out.png T ... 检查关键节拍的静态图。
4. 使用 scripts/render-parallel.sh 渲染。仅重新渲染你更改的时间范围。
5. 使用 scripts/mix.sh 混音，然后使用 scripts/encode.sh 编码（libx264 crf 17, yuv420p, AAC 192k, faststart）。
6. 质量检查： 从编码后的mp4中提取每个场景的帧，检查品牌标语、标注框和接缝。发送前完整听一遍。

7. 学到的陷阱

• 渲染应作为单个跟踪的后台作业运行，等待其工作进程。分离的 nohup 作业会被杀死，留下不完整的帧。
• 每页预加载数百张大图片可能导致Chromium崩溃，出现“Target crashed”错误。如果页面预加载大量图片序列，最多使用2个并行工作进程。在编码前始终检查帧计数和工作进程日志，因为崩溃的工作进程会静默留下过时的帧。
• 类名可能与应用的CSS冲突。 例如，应用样式表中的 .dark 使卡片高度变为1080px，因此给场景类添加前缀或使用不常见的名称。
• 标注框必须限制在镜头的退出时间， 否则它们会悬停在下一个场景上。
• 不要过度夸大技术声明。 写“无API往返 · 进程内决策”，而不是“0毫秒”。
• 更改结尾行时，如果结尾卡片已显示相同文字，也要移除其标题。