launch-video

发布视频

制作一支高端、充满活力的 15–60s 发布影片，抓住观众目光并促成转化。采用经典结构——钩子 → 悬念 → 揭晓 → 功能蒙太奇 → 片尾 CTA——配合音乐剪辑，并导出适用于各种平台画幅的视频。

适用场景

• 产品发布、功能公告、预告片、炒热气氛的短片（15–60s）。
• 用作落地页主视觉的「炫酷」主打视频。
• 与节拍同步的揭晓，让品牌亮相落在音乐高潮处。

结构

节拍	作用	典型时长占比（以 30s 为例）
钩子（0–3s）	用醒目的画面或动效抓住观众目光	0–3s
悬念	暗示产品，营造好奇感，并与节拍同步	3–9s
揭晓	产品或 Logo 随音乐高潮亮相	9–13s
功能蒙太奇	节奏快速、动感十足，每个镜头突出一项优势	13–25s
片尾卡	Logo + 标语 + CTA，干净利落地定格	25–30s

15s 版本按相同比例压缩（节奏更紧凑）；60s 版本则延长蒙太奇，但钩子绝不能变长。

两条不可妥协的规则

1. 声音设计先于画面。 先锁定曲目、标记节拍和高潮点，再根据这些标记剪辑画面。切勿给剪好的视频配乐——揭晓必须落在高潮点上，而不是附近。
2. 质量胜过数量。 少量完美镜头胜过大量平庸镜头。凡是不够高端的镜头，一律删掉。

与音乐高潮同步揭晓

在音频中找到高潮点的准确时间码，然后安排揭晓，让品牌标记在该帧瞬间完整呈现，并加入微小的过冲效果以增强冲击力。

import gsap from "gsap";
const DROP = 9.0; // seconds, measured from the track
const tl = gsap.timeline({ paused: true });
// tease builds tension up to the drop
tl.to(".tease", { opacity: 1, scale: 1.05, duration: DROP, ease: "power1.in" })
// reveal SNAPS on the drop frame
  .set(".logo", { opacity: 1 }, DROP)
  .fromTo(".logo", { scale: 1.18 }, { scale: 1.0, duration: .18, ease: "power3.out" }, DROP)
  .fromTo(".flash", { opacity: .9 }, { opacity: 0, duration: .25 }, DROP); // white hit
audio.addEventListener("play", () => tl.play());

根据瞬态而非固定网格剪辑：最有力的切换落在底鼓／军鼓的重拍上；在高潮前逐渐加速（时间重映射），然后在高潮处硬切出去。

动感功能蒙太奇

每个镜头突出一项优势，时长约 0.6–1.0s，并在节拍处硬切。每个镜头 = 一个醒目的关键词 + 一段对应的视觉画面。

.feature { opacity:0; }
.feature.in .kw   { animation: pop .35s cubic-bezier(.22,1,.36,1) forwards; }
.feature.in .word { display:inline-block; }
@keyframes pop { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } }

// drive shots off beat marks measured from the track
const beats = [13.0, 13.8, 14.6, 15.4, 16.2]; // seconds
beats.forEach((t, i) => scheduleAt(t, () => showFeature(i)));

整个蒙太奇保持统一的动效语言（相同的入场曲线、相同的退场方式），让速度感传达自信，而非混乱。

片尾卡

让 Logo + 标语 + CTA 静止、干净地停留 ≥2s。不要让繁杂动效与 CTA 争抢注意力；让品牌形象沉淀下来。将品牌亮相落在剩余节拍中最有力的一拍上，然后清晰呈现按钮／URL。

多画幅导出

构图时预留中心安全区，确保同一母版裁切后能适配所有画幅。

画幅	用途	分辨率	安全区
16:9	YouTube、落地页主视觉、X	1920×1080	关键内容保持在中心 90% 范围内
9:16	Reels、TikTok、Shorts、Stories	1080×1920	文字放在垂直中心 80% 范围内；避开顶部 12% 和底部 18%（界面区域）
1:1	信息流帖子	1080×1080	使用 16:9 画幅的中心正方形区域

将主视觉／Logo／CTA 设计在 1:1 中心正方形区域内，确保适配所有裁切。先渲染 16:9 母版，再从同一项目重新构图导出 9:16 和 1:1（不要只加黑边）。

输出检查清单

• 先锁定曲目；揭晓必须准确落在高潮点上。
• 钩子要抓住观众，让他们看完前 3 秒。
• 蒙太奇：每个镜头突出一项优势，在节拍处硬切，并保持动效语言一致。
• 片尾卡停留 ≥2s，且只有一个清晰的 CTA。
• 导出 16:9 + 9:16 + 1:1 版本，并将关键内容放在中心安全区内。
• 只保留高端镜头——不让任何平庸内容留下。

交付与验证（渲染静帧 → MP4）

打包的辅助工具（scripts/）：使用 scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png 拼接静帧，然后使用 scripts/probe-mp4.sh out.mp4 [WxH] [fps] 验证编码结果。参见 scripts/README.md。

如果启动影片在 Remotion 中构建／渲染，请按重型任务处理：注册一个 <Composition>（以及 zod schema 和 defaultProps），让每个值都由 useCurrentFrame() 驱动——渲染时不要使用 GSAP 时间轴／音频事件回调／Date.now()／Math.random()（将节拍和落点时间码预先写入 props）。交付内容 = 每种纵横比对应的渲染文件 out/*.mp4（以及项目）。

验证循环——渲染静帧 → 检查 → 编码。 检查整个节奏段落，并使用实际交付的 props（真实标题／标语／CTA），而不只是 defaultProps。

# Frame-exact stills across hook → reveal → end-card
npx remotion still Launch out/f-hook.png   --frame=24  --props=props/launch.json   # hook earns first 3s
npx remotion still Launch out/f-reveal.png --frame=270 --props=props/launch.json   # logo SNAPS on the drop frame
npx remotion still Launch out/f-end.png    --frame=899 --props=props/launch.json   # end card: logo+tagline+CTA, clean hold
# inspect each: fidelity (product/logo, tagline, CTA text exact, brand colors right, reveal at the drop frame)
#   AND artifacts (text overflow, off-canvas, CTA in the 9:16 bottom third, missing font, flash frame stuck on)

多种纵横比——编码前验证每种纵横比下的母版。 重新构图错误（主体被推到安全区域之外）会在所有纵横比中重复出现；及早发现并修正。

for ar in 16x9 9x16 1x1; do                                 # check reveal + end card per aspect
  npx remotion still Launch "out/reveal-${ar}.png" --frame=270 \
    --props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
# stills clean in all aspects? → then encode each:
for ar in 16x9 9x16 1x1; do
  npx remotion render Launch "out/launch-${ar}.mp4" --props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
npx remotion render Launch out/demo.gif --codec=gif --props=props/launch.json   # README demo

完成前：

1. npx remotion still 在 hook / reveal / end card 处都能正常渲染——没有错误，也没有缺失字体／资源。
2. Logo／标语／CTA 文本准确，品牌颜色正确；reveal 在 drop 帧落定；关键内容位于中心安全区域内，并避开 9:16 画面底部三分之一处。
3. 仅由帧驱动——不使用 GSAP／音频回调定时、Date.now() 或 Math.random()（节拍／drop 预先写入 props）。
4. 实际交付的 props 能正确渲染（而不只是 defaultProps）；片尾卡持续 ≥2s，且只有一个 CTA。
5. 编码前验证 16:9、9:16 和 1:1 下的母版；MP4 可正常播放；（可选）为 README 制作 GIF。

参考文件

• references/launch-structure.md — 一份完整的 30s 影片逐镜头模板，包含时间码（可扩展至 15–60s）、与节拍同步的 reveal 定时、动感蒙太奇镜头方案、由声音设计引导画面的工作流，以及 16:9 / 9:16 / 1:1 的详细多纵横比安全区域图。