launch-video
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseLaunch video, built in code
用代码打造发布视频
A launch video sells one thing in 30-45 seconds. You build it as one HTML file with , then export to MP4.
window.seek(seconds)Before you start: read and if they exist. If not, run first, or ask for hex codes, a font and a logo file. Never call a result on-brand without them.
brand.mdMOTION.mdbrand-intake发布视频要在 30-45 秒内推介一个产品。将它构建为一个带有 的 HTML 文件，然后导出为 MP4。
window.seek(seconds)开始之前： 如果存在 和 ，请先阅读。如果不存在，先运行 ，或者询问十六进制色值、字体和 logo 文件。在缺少这些信息时，绝不能声称结果符合品牌规范。
brand.mdMOTION.mdbrand-intakeStep 1: Ask for five things, then wait
第 1 步：询问五项信息，然后等待
- What's launching, in one line. Example: "LinkedIn AI OS, a six-week cohort that sets up your content system."
- The one sentence the video says, split into 3-5 beats. Example: "Your next post, / in your voice, / checked before you see it."
- Proof. Real screenshots of the product, real results with their source, or real customer posts. Attached files only.
- The call to action, word for word, exactly as it appears on the sales page.
- Brand. Hex codes, font, logo file. Plus the size: 1920 x 1080, 1080 x 1350 or 1080 x 1920.
Never invent a price, a date, a "spots left" count, a testimonial or a result.
- **即将发布的内容，**用一行描述。例如：“LinkedIn AI OS，一个帮助你搭建内容系统的六周培训班。”
- **视频表达的那一句话，**拆分成 3-5 个节拍。例如：“你的下一条帖子，/ 用你的语气，/ 在你看到之前先完成检查。”
- 证据。 真实产品截图、带有来源的真实结果，或真实客户帖子。仅使用附件。
- **行动号召，**逐字提供，必须与销售页面上的内容完全一致。
- 品牌。 十六进制色值、字体、logo 文件。以及尺寸：1920 x 1080、1080 x 1350 或 1080 x 1920。
绝不虚构价格、日期、“剩余名额”数量、客户评价或结果。
What "premium" means here (learned the hard way)
什么才算“高级”（都是踩过坑才明白的）
Three first drafts were rejected as "not premium" and "not my brand colours". What fixed it:
- Your real brand colours, sampled from your landing page or your best graphic. Never a default palette.
- Glass UI. Product surfaces as frosted, liquid-glass panels with soft depth, like Apple's current UI.
- The prompt typed live into a real-looking input box. That is the one place typing belongs.
- Real, recent work on the proof cards, not old examples.
- Variety. No two beats share the same layout.
Build the first 10 seconds in two or three styles first. Pick one. Only then build the rest.
最初三个草稿都因“不够高级”和“不是我的品牌配色”被否决。解决方法如下：
- **你的真实品牌配色，**从落地页或你最好的图形素材中取色。绝不使用默认调色板。
- Glass UI。 将产品界面呈现为带柔和景深的磨砂液态玻璃面板，类似 Apple 当前的 UI。
- **实时输入提示词，**输入到看起来真实的输入框中。只有这个位置适合出现输入动画。
- **证据卡片中展示真实、近期的工作成果，**而不是旧案例。
- 多样性。 任何两个节拍都不能采用相同布局。
先用两到三种风格制作前 10 秒。选定一种后，再制作其余部分。
Step 2: Lay out the beats
第 2 步：规划节拍
Default 7 beats, 45 seconds:
| # | Time | Beat |
|---|---|---|
| 1 | 0-4s | First words of the sentence, big, on a clean background. The hook. |
| 2 | 4-9s | Next words over real proof (posts, results, screens). |
| 3 | 9-17s | The product working: a screen, a cursor typing a real prompt, the output appearing. |
| 4 | 17-22s | The quality beat: something checks, passes or ticks. |
| 5 | 22-32s | How it works: steps, weeks or features as one simple visual. |
| 6 | 32-38s | The number that matters, counted up, with its source. |
| 7 | 38-45s | Name, call to action, requirement. Holds long enough to read. |
Show the beat sheet and wait for a yes.
默认 7 个节拍，共 45 秒：
| # | 时间 | 节拍 |
|---|---|---|
| 1 | 0-4s | 句子的开头部分，以大字号显示在干净背景上。用于吸引注意。 |
| 2 | 4-9s | 接下来的文字叠加在真实证据上（帖子、结果、屏幕画面）。 |
| 3 | 9-17s | 产品实际运行：一个屏幕、光标输入真实提示词，随后输出出现。 |
| 4 | 17-22s | 质量呈现时刻：某项检查、验证通过或状态打勾。 |
| 5 | 22-32s | 工作原理：将步骤、周数或功能整合为一个简单的视觉画面。 |
| 6 | 32-38s | 关键数字逐个递增显示，并标注来源。 |
| 7 | 38-45s | 名称、行动号召和参与要求。停留时间要足够长，便于阅读。 |
展示节拍表并等待确认。
Step 3: Build brief (paste into Claude Code)
第 3 步：构建简报（粘贴到 Claude Code）
Build one self-contained HTML file called index.html for a [LENGTH]-second product launch video at [WIDTH] x [HEIGHT]. Use only the files I attached. Nothing loaded from the internet.
Style: clean, premium product launch. Background [BG], text [TEXT], one accent [ACCENT], font [FONT] or a system sans-serif. Generous space. Product screens float on soft shadows with slow push-ins. One sentence is split across the beats and each fragment lands with a short, confident move.
Banned: typewriter reveals on headlines (typing belongs only inside the product's input box), glow, bouncing, gradients on text, stock-photo people, fake testimonials, any number I did not give you.
Beats: follow my beat sheet exactly, with its timings.
Build rules: work out every frame from the time alone. Add window.seek(seconds) that draws that exact moment. Autoplay on a loop when opened normally, wait for seek when the URL has ?render.
After the build: capture one frame from the middle of every beat. Check for cut-off text, overlapping elements, anything unreadable at phone size, and any word or number not in my brief. Fix what is real and keep the first version.Build one self-contained HTML file called index.html for a [LENGTH]-second product launch video at [WIDTH] x [HEIGHT]. Use only the files I attached. Nothing loaded from the internet.
Style: clean, premium product launch. Background [BG], text [TEXT], one accent [ACCENT], font [FONT] or a system sans-serif. Generous space. Product screens float on soft shadows with slow push-ins. One sentence is split across the beats and each fragment lands with a short, confident move.
Banned: typewriter reveals on headlines (typing belongs only inside the product's input box), glow, bouncing, gradients on text, stock-photo people, fake testimonials, any number I did not give you.
Beats: follow my beat sheet exactly, with its timings.
Build rules: work out every frame from the time alone. Add window.seek(seconds) that draws that exact moment. Autoplay on a loop when opened normally, wait for seek when the URL has ?render.
After the build: capture one frame from the middle of every beat. Check for cut-off text, overlapping elements, anything unreadable at phone size, and any word or number not in my brief. Fix what is real and keep the first version.Step 4: Check it like a buyer
第 4 步：像买家一样检查
- Would a stranger know what's launching by second 4?
- Is every number traceable to a source?
- Does the call to action hold for at least 3 seconds?
- Is it readable on a phone, with the sound off?
- 到第 4 秒时，陌生人能看出发布的是什么吗？
- 每个数字都能追溯到来源吗？
- 行动号召是否至少停留了 3 秒？
- 在手机端静音观看时，内容仍然清晰可读吗？
Step 5: Export
第 5 步：导出
HyperFrames (free, open source): , then . Export a 16:9 and a 4:5 cut. Check which tools exist before installing, and ask first.
npx skills add heygen-com/hyperframesnpx hyperframes renderHyperFrames（免费、开源）：，然后运行 。导出 16:9 和 4:5 两个版本。安装前先检查可用工具，并先征得同意。
npx skills add heygen-com/hyperframesnpx hyperframes render