product-launch-video

产品发布视频工作流

使用 Remotion 制作 15-30 秒产品发布视频的可重复工作流。适用于面向 X、LinkedIn、YouTube Shorts 和落地页的功能发布、应用演示及改造前后对比。

适用场景

• 产品发布需要一段适合社交媒体的短视频
• 为 X/LinkedIn 制作新功能演示
• 产品改造前后对比短片
• 落地页主视觉视频

前置条件

• Node.js 18+
• 已克隆此仓库并运行 npm install
• ffmpeg（仅在导出 GIF 时需要）
• 产品录屏（30-60 秒，仅用作设计灵感）
• 发布文案：标题、标语、关键功能、风格方向

工作流

1. 收集输入（并行）

开始编写前，并行收集以下内容：

• 简报 — 发布帖文、落地页、单页介绍。提取：标题、标语、关键功能、风格。
• 品牌规范 — 字体、颜色、图标、Logo。如果有设计系统，整理其中的规范值；否则，从线上产品中提取。
• 录屏 — 一段展示产品实际使用情况的 30-60 秒录屏。这是你的设计灵感，也是实际 UI 文案的准确信息来源。切勿虚构真实应用中不存在的标签、Agent 名称或功能。
• 语气校准（可选）— 如果视频包含旁白，或你要以特定语气代写字幕，请收集近期帖文/视频片段，以匹配节奏和措辞。

2. 先制作分镜，再写代码

编写镜头清单表格。克制直接开始写代码的冲动。

节拍	时间	画面	叠加文字

避免反复渲染的规则：

• 使用真实的产品 UI 文案。 截取实际应用的画面，并照着其中的内容制作。虚构标签是发布内容显得不真实的头号原因。
• 从观众的问题切入（吸引点），而不是产品名称。
• 产品必须在 3 秒内出现（a16z Speedrun 关于发布视频的研究）。
• 前后对比是亮点镜头 — 围绕它设计整个视频。
• 所有文字在 720p 下都必须清晰可读（手机信息流）。最小字号为 18px 等效大小。
• 85% 以上的社交媒体观看行为都是静音的 — 将所有字幕直接嵌入视频。除非明确要求，否则不要添加旁白。

3. 使用 Remotion 构建

此仓库附带一个精简的 Remotion 脚手架。从 src/LaunchVideo.tsx 开始并进行自定义：

• 保持合成组件精简 — 随着复杂度增加，将场景、主题、字体和模拟数据分别提取到独立文件中
• 在 src/Root.tsx 中注册新的合成（如果要发布到多个平台，则每种宽高比注册一个）
• 使用 staticFile() 引用 public/ 中的资源
• 默认设置为 1920×1080、30fps、h264 crf 18 — 平台专属覆盖设置请参阅发布部分

字体加载模式（防止字符裁切和布局抖动）：

const [handle] = useState(() => delayRender('fonts'));
useEffect(() => {
  const font = new FontFace('Name', `url(${staticFile('fonts/file.otf')})`);
  font.load().then(f => { document.fonts.add(f); continueRender(handle); });
}, [handle]);

交叉淡化转场 — 在编排器/根组件层级处理，而非逐个场景处理。场景各自的淡出会与编排器冲突，导致重复淡化。

4. 渲染审查循环

# Single frame audit
npx remotion still <comp-id> out/test.png --frame 60

# Full render
npx remotion render <comp-id> out/video.mp4 --codec=h264 --crf=18

先为每个场景渲染一帧。完整渲染前修复布局/裁切问题。检查：

• 文字没有被裁切（衬线字体含下伸部时，行高 >= 1.2）
• 面板没有意外堆叠（AbsoluteFill 默认使用 flex-direction: column）
• 气泡、卡片或聊天 UI 中的内容没有被截断

5. 多 Agent 审核（发现所有问题的关键步骤）

经过 2-3 轮自我迭代后，将约 20 帧（关键时刻 + 过渡帧）渲染到 out/review/，并行启动 4 个审核 Agent。每个 Agent 都会查看 PNG 帧，并返回按优先级排序的修复清单。

1. 设计/布局评审 — 元素歪斜、未对齐、比例、裁切
2. 文字/可读性评审 — 720p 下的可读性、对比度、文字截断、错别字
3. 叙事/节奏评审 — 故事线、注意力高峰/低谷、时长是否合理、CTA 是否有力
4. 品牌一致性评审 — 字体、颜色、UI 外观是否与真实产品一致

在下一轮渲染前，将 4 份评审结果和你自己的备注汇总为一份修订计划。渲染 50 次后，这一步能帮你发现那些自己已经视而不见的问题。

6. 根据反馈迭代

在 QuickTime（或你选择的播放器）中观看渲染结果并进行迭代。常见反馈及修复方法：

• “这段文字被截断了” → 行高或溢出问题
• “感觉很笨拙” → 动画节奏太快/太慢；检查计数器数字闪动的频率
• “你编了这个标签” → 替换为屏幕录制中的真实 UI 文案
• “这里多停留一会儿” → 延长场景时长，动画节奏保持不变
• “整体有点长” → 删除冗余场景（叙事评审通常会指出该删哪些）

7. 针对正确的平台交付

渲染前，先询问用户要发布到哪些平台。 不同平台的宽高比和时长限制各不相同——后期将 16:9 视频裁切为 9:16 通常效果很差。如果视频要发布到多个宽高比不同的平台，请为每种宽高比分别创建 Remotion 合成并独立渲染。

本仓库默认使用 1920×1080 横屏尺寸。修改 src/Root.tsx 中的尺寸以适配目标平台：

平台	宽高比	建议尺寸	最长时长
X / Twitter（信息流）	16:9	1920×1080	2:20
X / Twitter（竖屏）	9:16	1080×1920	2:20
LinkedIn（信息流，横屏）	16:9	1920×1080	10 分钟
LinkedIn（信息流，正方形）	1:1	1200×1200	10 分钟
YouTube（标准）	16:9	1920×1080	—
YouTube Shorts	9:16	1080×1920	60 秒
Instagram Feed	4:5	1080×1350	60 秒
Instagram Reels	9:16	1080×1920	90 秒
TikTok	9:16	1080×1920	3 分钟

建议的交付内容包：

• 各请求宽高比对应的 MP4
• 用于嵌入和 Slack 分享的 GIF 版本（见下文“渲染命令”）
• 各平台对应的文案版本（长度和语气各不相同）
• 用于 X 和 LinkedIn 回复的帖子串/功能列表版本

来之不易的经验

• 绝不要编造产品 UI 标签。 截取真实应用的画面，并原样复现文案。这是发布视频显得尴尬的最大原因。
• 找出只有你的产品才能实现的那个瞬间，并让它占据最多屏幕时间。 每支发布视频都有一个彰显差异化的关键节点。视频的其他部分都应该为它铺垫。不要把时长平均分配给各项功能。
• 先后呈现前后对比，胜过同时呈现。 先展示“之前”状态 0.7-1 秒，再以带回弹过冲和闪色效果的方式展示“之后”状态。这样比两者同时出现更有戏剧性。
• 计数器动画：根据自然的观感调整每帧的数字变化速率。目标数字越大，就越不该塞进相同的动画时长——要相应延长。
• 片尾卡：一个标题 + CTA。 不要堆叠 3 行文案。使用着陆页上的实际标语，而不是为了显得更有冲击力而自行编造。
• 问题状态要贴近观众熟悉的情境，无需解释。 如果观众需要一句话才能理解问题所在，这个钩子就太抽象了。

渲染命令

# Preview in browser (hot-reload studio)
npm run studio

# Single frame (fastest way to audit)
npx remotion still <comp-id> out/frame.png --frame 60

# Full video
npx remotion render <comp-id> out/video.mp4 --codec=h264 --crf=18

# GIF (for embeds — requires ffmpeg)
ffmpeg -y -i out/video.mp4 \
  -vf "fps=15,scale=960:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=128[p];[s1][p]paletteuse=dither=bayer:bayer_scale=3" \
  out/video.gif