Back to Details

product-launch-video

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Product Launch Video Workflow

产品发布视频制作工作流

A repeatable workflow for producing 15-30s product launch videos using Remotion. Built for feature launches, app demos, and before/after transformations destined for X, LinkedIn, YouTube Shorts, and landing pages.
一套可复用的工作流，使用Remotion制作15-30秒的产品发布视频，适用于功能上线、应用演示以及前后效果对比类视频，可发布至X（原Twitter）、LinkedIn、YouTube Shorts及落地页。

When to use

适用场景

  • Product launch needs a short, social-ready video
  • New feature demo for X/LinkedIn
  • Before/after product transformation clip
  • Landing page hero video
  • 产品发布需要制作适合社交平台的短视频
  • 为X/LinkedIn制作新功能演示视频
  • 产品前后效果对比短视频
  • 落地页主视觉视频

Prerequisites

前置条件

  • Node.js 18+
  • This repo cloned and 
    npm install
    run
  • ffmpeg (only if exporting GIFs)
  • A screen recording of the product (30-60s, used as design inspiration only)
  • The launch copy: headline, tagline, key features, tone direction
  • Node.js 18+
  • 克隆本仓库并执行
    npm install
  • ffmpeg（仅在导出GIF时需要）
  • 产品的屏幕录制视频（30-60秒，仅用作设计参考）
  • 发布文案：标题、副标题、核心功能、风格指引

Workflow

工作流

1. Gather inputs (parallel)

1. 收集输入（并行进行）

Pull these in parallel before writing anything:
  • The brief — launch post, landing page, one-pager. Extract: headline, taglines, key features, tone.
  • Brand tokens — fonts, colors, icons, logos. If you have a design system, surface its values. Otherwise, pull from the live product.
  • Screen recording — a 30-60s recording of the product in real use. This is your design inspiration and a source of truth for actual UI copy. Never invent labels, agent names, or features that don't exist in the real app.
  • Voice calibration (optional) — if the video has narration or you're ghostwriting captions in a specific voice, pull recent posts/clips to match cadence and word choice.
在开始制作前，并行收集以下内容：
  • 需求简报 — 发布帖、落地页、单页文档。提取：标题、副标题、核心功能、风格调性。
  • 品牌标识 — 字体、颜色、图标、Logo。若有设计系统，直接使用其规范；否则从现有产品中提取。
  • 屏幕录制视频 — 30-60秒的产品实际使用录制视频。这是你的设计参考和真实UI文案的来源。切勿编造真实应用中不存在的标签、Agent名称或功能。
  • 语气校准（可选） — 如果视频包含旁白或需要模仿特定语气撰写字幕，提取近期的帖子/视频以匹配节奏和用词风格。

2. Storyboard before any code

2. 先做分镜脚本再写代码

Write a shot-list table. Resist the urge to start coding.
BeatTimeVisualText overlay
Rules that save you from re-rendering:
  • Use real product UI copy. Screenshot the actual app and mirror what's there. Invented labels are the #1 reason launches feel fake.
  • Lead with the viewer's problem (hook), not the product name.
  • Product must appear within 3 seconds (a16z Speedrun research on launch videos).
  • Before/after is the money shot — design the whole video around it.
  • All text must be readable at 720p (phone feed). Minimum 18px equivalent.
  • 85%+ of social views are muted — burn all captions in. No VO unless explicitly requested.
编写镜头列表表格。克制直接开始编码的冲动。
节拍时间视觉内容文字叠加
避免重复渲染的规则：
  • 使用真实产品UI文案。截图真实应用并完全照搬文案。编造标签是导致发布视频显得虚假的首要原因。
  • 以用户的问题为开头（钩子），而非产品名称。
  • 产品必须在3秒内出现（a16z关于发布视频的Speedrun研究结论）。
  • 前后效果对比是核心镜头 — 围绕这个镜头设计整个视频。
  • 所有文字在720p分辨率下必须清晰可读（手机端播放）。最小等效字号为18px。
  • 85%以上的社交平台观看为静音状态 — 必须嵌入所有字幕。除非明确要求，否则不要添加旁白。

3. Build in Remotion

3. 在Remotion中构建

This repo ships with a minimal Remotion scaffold. Start from 
src/LaunchVideo.tsx
and customize:
  • Keep the composition thin — extract scenes, theme, fonts, and mock data into their own files as complexity grows
  • Register new compositions in 
    src/Root.tsx
    (one per aspect ratio if shipping to multiple platforms)
  • Use 
    staticFile()
    for assets in 
    public/
  • Defaults are 1920×1080 at 30fps, h264 crf 18 — see the Ship section for platform-specific overrides
Font loading pattern (prevents character clipping and layout thrash):
tsx
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]);
Crossfade transitions — handle at the orchestrator/root level, not per-scene. Per-scene exit fades fight the orchestrator and cause double-fading.
本仓库提供了一个极简的Remotion脚手架。从
src/LaunchVideo.tsx
开始定制：
  • 保持组合结构简洁 — 随着复杂度增加，将场景、主题、字体和模拟数据提取到单独文件中
  • 在
    src/Root.tsx
    中注册新的组合（如果要发布到多个平台，需为每个宽高比创建一个组合）
  • 使用
    staticFile()
    加载
    public/
    目录下的资源
  • 默认设置为1920×1080分辨率、30fps、h264编码crf值18 — 请查看发布部分的平台特定配置
字体加载模式（避免字符截断和布局抖动）：
tsx
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. Render-audit loop

4. 渲染-审核循环

bash
undefined
bash
undefined

Single frame audit

单帧审核

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

Full render

完整渲染

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

Render one frame per scene first. Fix layout/clipping issues before full render. Check:

- Text not clipped (line-height >= 1.2 for serif fonts with descenders)
- Panels not stacking unexpectedly (AbsoluteFill defaults to `flex-direction: column`)
- Content not truncated in bubbles, cards, or chat UI
npx remotion render <comp-id> out/video.mp4 --codec=h264 --crf=18

先渲染每个场景的一帧。在完整渲染前修复布局/截断问题。检查：

- 文字未被截断（带下行字母的衬线字体行高≥1.2）
- 面板未意外堆叠（AbsoluteFill默认`flex-direction: column`）
- 气泡、卡片或聊天UI中的内容未被截断

5. Multi-agent review (the step that catches everything)

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

After 2-3 self-iterations, render ~20 frames (peak moments + transition frames) to 
out/review/
and spawn 4 review agents in parallel. Each reads the PNG frames and returns a prioritized fix list.
  1. Design/layout critic — off-kilter elements, misalignment, proportions, cropping
  2. Text/readability critic — legibility at 720p, contrast, truncation, typos
  3. Narrative/pacing critic — story arc, attention peaks/drops, earned duration, CTA strength
  4. Brand consistency critic — fonts, colors, UI chrome matching the real product
Compile all 4 critic outputs + your own notes into a single revision plan before the next render pass. This step finds things you stop seeing after 50 renders.
经过2-3次自我迭代后，渲染约20帧（关键时刻+过渡帧）到
out/review/
目录，并行启动4个审核Agent。每个Agent会读取PNG帧并返回优先级排序的修复列表。
  1. 设计/布局审核Agent — 检查偏移元素、对齐问题、比例、裁剪
  2. 文字/可读性审核Agent — 720p分辨率下的可读性、对比度、截断、拼写错误
  3. 叙事/节奏审核Agent — 故事弧线、注意力峰值/下降、时长合理性、CTA强度
  4. 品牌一致性审核Agent — 字体、颜色、UI框架与真实产品匹配度
将4个审核Agent的输出结果加上你自己的笔记整理成一份单一的修订计划，再进行下一轮渲染。这个步骤能发现你在多次渲染后忽略的问题。

6. Iterate on feedback

6. 根据反馈迭代

Watch the render in QuickTime (or your player of choice) and iterate. Common feedback patterns and their fixes:
  • "This text is cut off" → line-height or overflow issue
  • "This feels clunky" → animation timing too fast/slow; check counter digit-flicker rate
  • "You invented this label" → replace with real UI copy from the screen recording
  • "Hold longer here" → extend scene duration, keep animation timing the same
  • "A little long overall" → cut redundant scenes (the narrative critic usually identifies which)
使用QuickTime（或你常用的播放器）观看渲染视频并迭代。常见反馈模式及修复方案：
  • "这段文字被截断了" → 行高或溢出问题
  • "感觉很生硬" → 动画节奏太快/太慢；检查数字跳动速率
  • "你编造了这个标签" → 替换为屏幕录制视频中的真实UI文案
  • "这里需要停留更长时间" → 延长场景时长，保持动画节奏不变
  • "整体有点长" → 删除冗余场景（通常叙事审核Agent会指出哪些场景）

7. Ship for the right platform

7. 针对目标平台发布

Ask the user which platforms they're publishing to before rendering. Aspect ratio and duration limits differ — a 16:9 clip cropped to 9:16 in post usually looks bad. If the video is going to multiple platforms with different aspect ratios, create a separate Remotion composition for each and render independently.
This repo defaults to 1920×1080 landscape. Change dimensions in 
src/Root.tsx
to fit the target platform:
PlatformAspectRecommended sizeMax duration
X / Twitter (feed)16:91920×10802:20
X / Twitter (vertical)9:161080×19202:20
LinkedIn (feed, landscape)16:91920×108010 min
LinkedIn (feed, square)1:11200×120010 min
YouTube (standard)16:91920×1080—
YouTube Shorts9:161080×192060s
Instagram Feed4:51080×135060s
Instagram Reels9:161080×192090s
TikTok9:161080×19203 min
Recommended deliverable pack:
  • MP4 in each requested aspect ratio
  • GIF version for embeds and Slack shares (see Render commands below)
  • Caption variants for each platform (length and tone differ)
  • A thread/feature-list version for X and LinkedIn replies
在渲染前询问用户要发布到哪些平台。不同平台的宽高比和时长限制不同 — 后期将16:9的视频裁剪为9:16通常效果很差。如果要发布到多个宽高比不同的平台，为每个平台创建单独的Remotion组合并独立渲染。
本仓库默认设置为1920×1080横屏。在
src/Root.tsx
中修改尺寸以适配目标平台：
平台宽高比推荐尺寸最大时长
X / Twitter（信息流）16:91920×10802分20秒
X / Twitter（竖屏）9:161080×19202分20秒
LinkedIn（信息流，横屏）16:91920×108010分钟
LinkedIn（信息流，方形）1:11200×120010分钟
YouTube（标准）16:91920×1080—
YouTube Shorts9:161080×192060秒
Instagram Feed4:51080×135060秒
Instagram Reels9:161080×192090秒
TikTok9:161080×19203分钟
推荐交付包：
  • 每个请求宽高比的MP4文件
  • 用于嵌入和Slack分享的GIF版本（请查看下方渲染命令）
  • 针对每个平台的字幕变体（长度和语气不同）
  • 适用于X和LinkedIn回复的线程/功能列表版本

Hard-won lessons

经验总结

  • Never invent product UI labels. Screenshot the real app and mirror the copy exactly. This is the single biggest source of launch video cringe.
  • Find the one moment only your product can deliver — give it the most screen time. Every launch video has a differentiating beat. The rest of the video should set it up. Don't spread the runtime evenly across features.
  • Before/after stagger beats simultaneous. Land the "before" first for 0.7-1s, then crash in the "after" with a spring overshoot and a color flash. Much more dramatic than both appearing together.
  • Counter animations: match per-frame digit rate to whatever feels natural. A bigger target number shouldn't fit in the same animation window — stretch it.
  • Endcard: one headline + CTA. Don't stack 3 lines of copy. Use the landing page's actual tagline — not something you invented to sound punchier.
  • Ground your "problem state" in something viewers recognize without explanation. If they need a sentence to understand what's wrong, the hook is too abstract.
  • 切勿编造产品UI标签。截图真实应用并完全照搬文案。这是导致发布视频尴尬的最大原因。
  • 找到只有你的产品能实现的核心时刻 — 给它最多的屏幕时间。每个发布视频都有一个差异化的核心节拍。视频的其余部分都应为其铺垫。不要将时长平均分配给所有功能。
  • 前后效果对比采用错开呈现而非同时出现。先展示“之前”状态0.7-1秒，然后用弹性过冲和颜色闪烁效果切入“之后”状态。比同时出现效果更震撼。
  • 数字动画： 匹配每帧数字变化速率使其自然。目标数字越大，动画时长应越长，不要局限于固定的动画窗口。
  • 片尾卡片：一个标题+CTA。不要堆叠3行文案。使用落地页的真实副标题 — 不要为了显得更有冲击力而编造内容。
  • 将“问题状态”建立在用户无需解释就能理解的场景上。如果用户需要一句话才能理解问题所在，那么钩子太抽象了。

Render commands

渲染命令

bash
undefined
bash
undefined

Preview in browser (hot-reload studio)

在浏览器中预览（热重载工作室）

npm run studio
npm run studio

Single frame (fastest way to audit)

单帧（最快的审核方式）

npx remotion still <comp-id> out/frame.png --frame 60
npx remotion still <comp-id> out/frame.png --frame 60

Full video

完整视频

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

GIF (for embeds — requires ffmpeg)

GIF（用于嵌入 — 需要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
undefined
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
undefined