Back to Details

launch-video

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Launch Video

发布视频

Make a premium, high-energy 15–60s launch film that stops the scroll and converts. Build the classic arc — hook → tease → reveal → feature montage → end-card CTA — cut to the music, and export for every platform aspect.
制作一条15–60秒的高品质、高能量发布视频，吸引用户注意力并实现转化。遵循经典结构——钩子→预热→揭秘→功能蒙太奇→片尾CTA——配合音乐节奏剪辑，并导出适配各平台的比例版本。

When to use

适用场景

  • Product drops, feature announcements, trailers, hype reels (15–60s).
  • "Sizzle" hero videos for a landing page.
  • Beat-synced reveals where the brand moment lands on the drop.
  • 新品发布、功能官宣、预告片、预热短片（15–60秒）。
  • 用于着陆页的「吸睛」主视觉视频。
  • 品牌时刻与音乐节点同步的揭秘视频。

The arc

视频结构

BeatJobTypical share (of 30s)
Hook (0–3s)A striking frame/motion that stops the scroll0–3s
TeaseHint the product; build curiosity, beat-synced3–9s
RevealProduct/logo hits on the music drop9–13s
Feature montageFast, kinetic, one benefit per shot13–25s
End cardLogo + tagline + CTA, clean hold25–30s
Scale the same proportions for 15s (tighter) or 60s (longer montage, never a longer hook).
节奏节点任务时长占比（以30秒为例）
钩子（0–3秒）用吸睛的画面/动效抓住用户注意力0–3秒
预热暗示产品，激发好奇心，与音乐节奏同步3–9秒
揭秘产品/品牌标识在音乐节点精准出现9–13秒
功能蒙太奇快速动感，每个镜头对应一项产品优势13–25秒
片尾清晰展示标识+标语+CTA，保持静态画面25–30秒
按相同比例调整时长：15秒版本更紧凑，60秒版本可延长蒙太奇部分，但钩子时长绝不增加。

Two non-negotiable rules

两大硬性规则

  1. Sound design leads picture. Lock the track first, mark the beats and the drop, then cut visuals to those marks. Never score a finished cut — the reveal lands on the drop, not near it.
  2. Quality over quantity. A few flawless shots beat many mediocre ones. Cut any shot that isn't premium.
  1. 音效主导画面：先锁定音乐轨道，标记节奏和节点，再根据标记剪辑画面。绝不为已完成的剪辑配音乐——揭秘时刻必须精准落在音乐节点上，而非近似位置。
  2. 质量优先：少量完美镜头胜过大量平庸镜头。删除任何不够优质的镜头。

Beat-synced reveal on the drop

与音乐节点同步的揭秘效果

Find the drop's exact timecode in the audio, then time the reveal so the brand mark snaps to full at that frame, with a micro-overshoot for impact.
js
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());
Cut on transients, not on a fixed grid: the hardest cuts go on kick/snare hits; ramp speed (time-remap) into the drop, then hard-cut out of it.
找到音频中节点的精确时间码，调整揭秘时刻，让品牌标识在该帧完全显示，可加入轻微过冲效果增强冲击力。
js
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());
根据瞬态剪辑，而非固定网格：最硬的剪辑点放在底鼓/军鼓的节拍上；在节点前加速（时间重映射），节点后硬切。

Kinetic feature montage

动感功能蒙太奇

One benefit per shot, ~0.6–1.0s each, hard cuts on the beat. Each shot = a bold keyword + a single supporting visual.
css
.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 } }
js
// 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)));
Keep one motion language across the montage (same enter curve, same exit) so speed reads as confidence, not chaos.
每个镜头对应一项优势，每段约0.6–1.0秒，在节拍点硬切。每个镜头包含一个醒目的关键词+单一辅助画面。
css
.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 } }
js
// 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)));
蒙太奇全程保持统一的动效语言（相同的入场曲线、退场效果），让节奏传递出自信而非混乱。

End card

片尾

Hold the logo + tagline + CTA still and clean for ≥2s. No busy motion competing with the CTA; let the brand settle. Land the brand moment on the strongest remaining beat, then a crisp button/URL.
标识+标语+CTA保持静态清晰展示至少2秒。避免繁杂动效干扰CTA，让品牌信息平稳呈现。将品牌时刻落在剩余最有力的节拍上，随后展示清晰的按钮/链接。

Multi-aspect export

多比例导出

Compose with a center safe zone so one master crops cleanly to all aspects.
AspectUseResolutionSafe zone
16:9YouTube, landing hero, X1920×1080keep key content within center 90%
9:16Reels, TikTok, Shorts, Stories1080×1920text within center 80% h; avoid top 12% / bottom 18% (UI)
1:1Feed posts1080×1080center square of the 16:9 frame
Design the hero/logo/CTA inside the 1:1 center square so it survives every crop. Render the 16:9 master, then reframe (don't just letterbox) 9:16 and 1:1 from the same project.
以中心安全区为基准构图，确保一个母版可完美裁剪为所有比例。
比例适用平台分辨率安全区
16:9YouTube、着陆页主视觉、X1920×1080关键内容保持在中心90%区域内
9:16Reels、TikTok、Shorts、Stories1080×1920文字保持在中心80%高度内；避开顶部12%/底部18%（UI遮挡区）
1:1信息流帖子1080×108016:9画面的中心正方形区域
将主视觉/标识/CTA设计在1:1中心正方形内，确保在任何裁剪比例下都能保留。先渲染16:9母版，再从同一项目中重新构图（而非简单加黑边）导出9:16和1:1版本。

Output checklist

输出检查清单

  • Track locked first; reveal lands exactly on the drop.
  • Hook earns the first 3 seconds.
  • Montage: one benefit per shot, hard cuts on beats, consistent motion language.
  • End card holds ≥2s with one clear CTA.
  • 16:9 + 9:16 + 1:1 exports, key content in the center safe zone.
  • Premium-only shots — nothing mediocre survives the cut.
  • 先锁定音乐轨道；揭秘时刻精准落在节点上。
  • 钩子部分抓住前3秒的注意力。
  • 蒙太奇：每个镜头对应一项优势，节拍点硬切，动效语言统一。
  • 片尾保持至少2秒，CTA清晰明确。
  • 导出16:9 + 9:16 + 1:1版本，关键内容位于中心安全区内。
  • 仅保留优质镜头——平庸镜头全部删除。

Deliver & verify (rendered stills → MP4)

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

Packaged helper (
scripts/
): tile your stills with 
scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png
, then assert the encode with 
scripts/probe-mp4.sh out.mp4 [WxH] [fps]
. See 
scripts/README.md
.
If the launch film is built/rendered in Remotion, treat it as the heavy tier: register a 
<Composition>
(+ zod 
schema
+ 
defaultProps
), drive every value off 
useCurrentFrame()
— no GSAP timelines / audio-event callbacks / 
Date.now()
/ 
Math.random()
at render time (bake beat + drop timecodes into props). Deliverable = the rendered 
out/*.mp4
per aspect (plus the project).
Verify loop — render stills → inspect → encode. Sample the arc, with the shipped props (real headline/tagline/CTA), not just 
defaultProps
.
bash
undefined
打包辅助工具（
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
，对视频结构进行抽样检查。
bash
undefined

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
npx remotion still Launch out/f-hook.png --frame=24 --props=props/launch.json # 钩子部分需抓住前3秒 npx remotion still Launch out/f-reveal.png --frame=270 --props=props/launch.json # 标识精准出现在节点帧 npx remotion still Launch out/f-end.png --frame=899 --props=props/launch.json # 片尾：标识+标语+CTA，清晰静态展示

inspect each: fidelity (product/logo, tagline, CTA text exact, brand colors right, reveal at the drop frame)

检查每一张：还原度（产品/标识、标语、CTA文字准确，品牌颜色正确，揭秘时刻落在节点帧）

AND artifacts (text overflow, off-canvas, CTA in the 9:16 bottom third, missing font, flash frame stuck on)

以及是否存在瑕疵（文字溢出、超出画布、CTA位于9:16底部三分之一区域、字体缺失、闪帧）


**Multi-aspect — verify the master in EACH aspect before encoding all of them.** A reframe bug (hero pushed off the safe zone) repeats across every aspect; catch it once.

```bash
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

**多比例验证——编码前先检查每个比例的母版**。构图错误（主视觉移出安全区）会影响所有比例版本，需提前发现。

```bash
for ar in 16x9 9x16 1x1; do                                 # 检查每个比例的揭秘+片尾
  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

**Before you finish:**
1. `npx remotion still` renders cleanly at hook / reveal / end card — no errors, no missing fonts/assets.
2. Logo/tagline/CTA text exact, brand colors right; reveal lands on the drop frame; key content inside the center safe zone, clear of the 9:16 bottom third.
3. Frame-driven only — no GSAP/audio-callback timing, `Date.now()`, or `Math.random()` (beats/drop baked into props).
4. Shipped props render correctly (not just `defaultProps`); the end card holds ≥2s with one CTA.
5. Master verified in 16:9 + 9:16 + 1:1 before encoding; MP4s play; (optional) GIF for the README.
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演示用GIF

**完成前检查：**
1. `npx remotion still`可成功渲染钩子/揭秘/片尾的静帧——无错误，无缺失字体/资源。
2. 标识/标语/CTA文字准确，品牌颜色正确；揭秘时刻落在节点帧；关键内容位于中心安全区内，避开9:16底部三分之一区域。
3. 仅由帧驱动——无GSAP/音频回调计时、`Date.now()`或`Math.random()`（节拍/节点已嵌入props）。
4. 实际交付props可正确渲染（而非仅`defaultProps`）；片尾保持至少2秒，CTA清晰明确。
5. 编码前已验证16:9 + 9:16 + 1:1版本；MP4可正常播放；（可选）生成README用GIF。

Reference files

参考文件

  • references/launch-structure.md
    — a full shot-by-shot template with timecodes for a 30s film (scalable to 15–60s), beat-synced reveal timing, kinetic-montage shot recipes, the sound-design-leads-picture workflow, and detailed multi-aspect safe-area maps for 16:9 / 9:16 / 1:1.
  • references/launch-structure.md
    ——完整的分镜头模板，含30秒视频的时间码（可扩展至15–60秒）、节奏同步揭秘时机、动感蒙太奇镜头方案、音效主导画面的工作流程，以及16:9/9:16/1:1比例的详细安全区地图。