Back to Details

ad-creative-video

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Ad Creative Video

广告创意视频

Build ONE motion-graphics ad template, then mass-produce variants from a data table — different hooks, offers, CTAs, and products — so a performance marketer can A/B test dozens of versions across placements and aspect ratios. The craft is making the template fully data-driven and message-matched, so 40 variants stay on-brand and only the tested variable changes.
制作一个动态图形广告模板，然后通过数据表批量生成变体——包含不同的钩子、优惠信息、CTA和产品——这样效果营销人员就可以在不同投放位置和宽高比下对数十个版本进行A/B测试。关键在于让模板完全实现数据驱动和消息匹配，确保所有变体都符合品牌调性，且仅测试变量发生变化。

When to use

适用场景

  • Performance/UGC-style video ads where the first 1.5–3s must stop the scroll.
  • Batch variant generation: one template rendered against many rows (headline/offer/CTA/product swaps) for A/B testing.
  • Multi-aspect export of the same ad for Meta Feed, Reels/Stories, TikTok, YouTube.
Not for sale/discount countdown promos, and not for testimonial/review-driven ads — those are different structures. Stay on the batch-variation, test-everything angle.
  • 效果类/UGC风格视频广告：前1.5–3秒必须抓住用户注意力，阻止其滑动屏幕。
  • 批量生成变体：基于一个模板，结合多行数据（替换标题/优惠/CTA/产品）生成变体，用于A/B测试。
  • 同一广告多宽高比导出：适配Meta Feed、Reels/Stories、TikTok、YouTube等平台。
不适用于促销倒计时类广告，也不适用于 testimonial/review（证言/评论）驱动的广告——这些属于不同的结构类型。请聚焦于批量变体、全面测试的方向。

The two rules that make variants worth running

让变体测试有效的两条规则

  1. Isolate one variable per variant. A test only teaches something if exactly one thing changes. Hold layout, motion, colors, and timing constant; swap only the field under test (hook, or offer, or CTA). Mixing two changes makes the winner uninterpretable.
  2. Message-match the hook to the CTA. The promise made in the first 3 seconds must be the promise the button pays off. A "stop wasting 2 hours a day" hook ends on "Save 2 hours — try free," not a generic "Shop now." The hook and CTA are a matched pair in every row of the data table.
  1. 每个变体仅隔离一个变量。只有当完全只有一个元素变化时，测试才能得出有效结论。保持布局、动效、颜色和时长不变；仅替换测试字段（钩子、优惠或CTA）。同时改变两个元素会导致无法判断获胜变体的关键因素。
  2. 钩子与CTA消息匹配。前3秒钩子做出的承诺，必须与CTA按钮兑现的承诺一致。例如，以「别再每天浪费2小时」为钩子的广告，结尾应该是「节省2小时——免费试用」，而非通用的「立即购买」。在数据表的每一行中，钩子和CTA都是匹配的一对。

Ad anatomy (15–30s)

广告结构（15–30秒）

BeatJobBudget
Hook (0–3s)Stop the scroll; state the problem or pattern-interrupt0–3s
ContextMake the viewer feel the problem / agitate3–8s
PayoffShow the product as the solution, one clear benefit8–18s
ProofOne concrete number, demo, or result18–25s
CTA (last 3s)Single action, message-matched to the hookhold ≥2s
Land the hook's emotional trigger before the 2-second mark — judgment forms in ~1.7s and scroll speed keeps rising. Test the hook FIRST; it moves CPA more than any other element.
节拍作用时长
钩子（0–3秒）抓住用户注意力；提出问题或打破常规0–3秒
背景铺垫让用户感知到问题 / 强化痛点3–8秒
收益展示将产品作为解决方案，展示一个清晰的核心优势8–18秒
证明一个具体的数据、演示或成果18–25秒
CTA（最后3秒）单一行动指令，与钩子消息匹配保持≥2秒
务必在2秒前传递钩子的情感触发点——用户约1.7秒内就会形成判断，且滑动速度持续加快。优先测试钩子；它对CPA（单次转化成本）的影响超过其他任何元素。

Hook taxonomy (the field you vary most)

钩子分类（最常测试的字段）

Hook typeTemplateWhen it wins
Problem-first"I didn't realize how much X was costing me until…"pain is felt but unnamed
Pattern interrupt"This is going to sound controversial, but…"crowded feed, generic category
Curiosity gap"Nobody talks about the one thing that…"educated, skeptical audience
Immediate benefit"Cut your X in half in 7 days"clear, quantifiable outcome
Direct callout"If you do X every morning, stop."sharp audience segment
Keep a column of 5–10 hook strings and let the batch render produce one ad per hook against the same body — that is the cleanest hook test possible.
钩子类型模板句式适用场景
痛点先行"直到……我才意识到X让我付出了多大代价"用户感受到痛点但未明确说出
打破常规"这听起来可能有点争议，但……"广告密集、品类同质化严重的信息流
好奇心缺口"没人谈论那件……的事"受众有认知、持怀疑态度
即时收益"7天内将你的X减半"结果清晰可量化
直接喊话"如果你每天早上都做X，别再做了。"精准细分受众
准备一列包含5–10个钩子文案，让批量渲染针对同一广告主体生成每个钩子对应的广告——这是最纯粹的钩子测试方式。

Data-driven template (everything is a prop)

数据驱动模板（所有元素均为属性）

Hardcode nothing the marketer might A/B test. The composition reads a single 
variant
object; the renderer never edits the component. Make every animated value a pure function of 
useCurrentFrame()
so each frame renders deterministically (no CSS transitions, no library timers — they desync the render).
tsx
import {useCurrentFrame, interpolate, AbsoluteFill, useVideoConfig} from "remotion";

type Variant = {hook: string; benefit: string; proof: string; cta: string; bg: string; accent: string};

export const AdTemplate: React.FC<{v: Variant}> = ({v}) => {
  const frame = useCurrentFrame(); const {fps} = useVideoConfig();
  const hookIn = interpolate(frame, [0, 8], [40, 0], {extrapolateRight: "clamp"});
  const ctaIn  = interpolate(frame, [fps * 22, fps * 23], [0, 1], {extrapolateLeft: "clamp", extrapolateRight: "clamp"});
  return (
    <AbsoluteFill style={{background: v.bg, fontFamily: "Inter, sans-serif"}}>
      <h1 style={{transform: `translateY(${hookIn}px)`, opacity: interpolate(frame,[0,8],[0,1])}}>{v.hook}</h1>
      {frame > fps * 8  && <p>{v.benefit}</p>}
      {frame > fps * 18 && <strong>{v.proof}</strong>}
      <button style={{opacity: ctaIn, background: v.accent}}>{v.cta}</button>
    </AbsoluteFill>
  );
};
See 
references/batch-ad-pipeline.md
for the complete template, the CSV→props parser with validation, and the brand-lock theme object.
不要硬编码任何营销人员可能进行A/B测试的内容。合成内容读取单个
variant
对象；渲染器绝不编辑组件。将每个动画值设为
useCurrentFrame()
的纯函数，确保每一帧的渲染都是确定性的（不要使用CSS过渡、库定时器——它们会导致渲染不同步）。
tsx
import {useCurrentFrame, interpolate, AbsoluteFill, useVideoConfig} from "remotion";

type Variant = {hook: string; benefit: string; proof: string; cta: string; bg: string; accent: string};

export const AdTemplate: React.FC<{v: Variant}> = ({v}) => {
  const frame = useCurrentFrame(); const {fps} = useVideoConfig();
  const hookIn = interpolate(frame, [0, 8], [40, 0], {extrapolateRight: "clamp"});
  const ctaIn  = interpolate(frame, [fps * 22, fps * 23], [0, 1], {extrapolateLeft: "clamp", extrapolateRight: "clamp"});
  return (
    <AbsoluteFill style={{background: v.bg, fontFamily: "Inter, sans-serif"}}>
      <h1 style={{transform: `translateY(${hookIn}px)`, opacity: interpolate(frame,[0,8],[0,1])}}>{v.hook}</h1>
      {frame > fps * 8  && <p>{v.benefit}</p>}
      {frame > fps * 18 && <strong>{v.proof}</strong>}
      <button style={{opacity: ctaIn, background: v.accent}}>{v.cta}</button>
    </AbsoluteFill>
  );
};
完整模板、带验证的CSV→属性解析器以及品牌锁定主题对象，请查看
references/batch-ad-pipeline.md
。

1 template × CSV = N variants

1个模板 × CSV = N个变体

The payoff: author the ad once, then let a CSV drive the matrix. Each row is one fully-formed, message-matched variant. Render once per row.
bash
undefined
核心价值：只需制作一次广告，即可通过CSV驱动生成矩阵变体。每一行都是一个完整的、消息匹配的变体。针对每一行渲染一次。
bash
undefined

variants.csv: id,hook,benefit,proof,cta,bg,accent → one MP4 per row

variants.csv: id,hook,benefit,proof,cta,bg,accent → 每行对应一个MP4

node csv-to-props.js variants.csv ./props # writes props/<id>.json per row for f in props/*.json; do id=$(basename "$f" .json) npx remotion render AdTemplate "out/${id}.mp4" --props="$f" done

To build a clean test matrix, hold every column constant and vary one: 5 hooks × 1 body = 5 ads (hook test); then take the winning hook × 3 CTAs (CTA test). `references/batch-ad-pipeline.md` has a matrix generator that expands variable lists into the CSV so combinatorial tests stay one-variable-at-a-time.
node csv-to-props.js variants.csv ./props # 为每行生成props/<id>.json文件 for f in props/*.json; do id=$(basename "$f" .json) npx remotion render AdTemplate "out/${id}.mp4" --props="$f" done

要构建清晰的测试矩阵，请保持所有列不变，仅改变一列：5个钩子 × 1个主体 = 5个广告（钩子测试）；然后用获胜钩子 × 3个CTA（CTA测试）。`references/batch-ad-pipeline.md`包含一个矩阵生成器，可将变量列表扩展为CSV，确保组合测试始终保持「一次仅变一个变量」。

Multi-aspect export

多宽高比导出

Each placement wants a native aspect. Compose against a center safe zone so one master reframes cleanly to all of them — don't letterbox, re-center.
AspectPlacementsResolutionKeep-clear safe zone
9:16Reels, Stories, TikTok In-Feed1080×1920top ~14%, bottom ~20–35% (UI/caption), sides ~6%
4:5Meta Feed (best feed real estate)1080×1350center 90%; CTA out of bottom 10%
1:1Feed, broad reach1080×1080center square survives every crop
16:9YouTube, in-stream1920×1080center 90%
Design the hook text, product, and CTA inside the 1:1 center square so they survive every crop. Drive aspect from a prop and render each per variant:
bash
for ar in 9x16 4x5 1x1; do
  npx remotion render AdTemplate "out/${id}-${ar}.mp4" --props="props/${id}.json" \
    --props-merge="{\"aspect\":\"${ar}\"}"
done
Keep critical content out of the 9:16 bottom third — that is where the platform stacks captions, the CTA button, and the username. 
references/platform-specs.md
has exact pixel safe zones and per-platform duration/format limits.
每个投放位置都有原生宽高比。围绕中心安全区域进行创作，让一个主模板可以干净地适配所有宽高比——不要添加黑边，而是重新居中。
宽高比适用平台分辨率安全区域（需避开）
9:16Reels、Stories、TikTok信息流1080×1920顶部约14%，底部约20–35%（UI/字幕区），两侧约6%
4:5Meta Feed（最佳信息流位置）1080×1350中心90%区域；CTA需避开底部10%
1:1信息流、广泛触达1080×1080中心正方形区域可适配所有裁剪
16:9YouTube、流媒体广告1920×1080中心90%区域
将钩子文案、产品和CTA设计在1:1中心正方形内，确保它们在任何裁剪下都能保留。通过属性驱动宽高比，并针对每个变体渲染对应版本：
bash
for ar in 9x16 4x5 1x1; do
  npx remotion render AdTemplate "out/${id}-${ar}.mp4" --props="props/${id}.json" \
    --props-merge="{\"aspect\":\"${ar}\"}"
done
务必将关键内容放在9:16比例的底部三分之一之外——该区域是平台放置字幕、CTA按钮和用户名的位置。
references/platform-specs.md
包含精确的像素安全区域，以及各平台的时长/格式限制。

Output checklist

输出检查清单

  • One variable per variant; layout/motion/timing identical across a test.
  • Hook lands its trigger before 2s; hook and CTA are message-matched in every row.
  • Every animated value is a pure function of 
    useCurrentFrame()
    — no CSS/library timers.
  • Dataset is a prop; nothing testable is hardcoded; one template renders the whole CSV.
  • Each variant exported 9:16 + 4:5 + 1:1 (+16:9 if needed), key content in the center square.
  • Brand stays locked across all variants via a single theme object.
  • 每个变体仅含一个变量；同一测试中的布局/动效/时长完全一致。
  • 钩子在2秒前传递触发点；每一行的钩子与CTA都保持消息匹配。
  • 每个动画值都是
    useCurrentFrame()
    的纯函数——不使用CSS/库定时器。
  • 数据集作为属性传入；所有可测试内容均不硬编码；一个模板即可渲染整个CSV。
  • 每个变体导出9:16 + 4:5 + 1:1（如需可加16:9）版本，关键内容位于中心正方形内。
  • 通过单一主题对象确保所有变体品牌调性一致。

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
.
Output contract:
  • A Remotion ad template registered as 
    <Composition>
    (+ zod 
    schema
    + 
    defaultProps
    ), every animated value frame-driven (no CSS transitions / library timers / 
    Date.now()
    / 
    Math.random()
    ).
  • Deliverable = the rendered 
    out/*.mp4
    per variant per aspect (plus the project + CSV, so the marketer re-renders on new rows).
Verify loop — render stills → inspect → encode. Cheap PNGs first, full encode only once they're clean. Render with the shipped props (the real row), 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
。
输出规范：
  • 注册为
    <Composition>
    的Remotion广告模板（含zod 
    schema
    + 
    defaultProps
    ），所有动画值均由帧驱动（不使用CSS过渡/库定时器/
    Date.now()
    /
    Math.random()
    ）。
  • 交付物 = 每个变体对应每个宽高比的渲染文件
    out/*.mp4
    （附带项目文件+CSV，方便营销人员新增行后重新渲染）。
验证流程——渲染静帧 → 检查 → 编码。 先渲染低成本PNG，确认无误后再进行完整编码。使用实际行属性（真实数据）渲染，而非仅用
defaultProps
。
bash
undefined

Frame-exact stills across the hook→CTA arc, with a real variant's props

针对钩子→CTA流程渲染精确帧的静帧，使用真实变体属性

npx remotion still AdTemplate out/f-hook.png --frame=12 --props=props/v1.json # hook readable < 2s npx remotion still AdTemplate out/f-mid.png --frame=300 --props=props/v1.json # benefit/proof npx remotion still AdTemplate out/f-cta.png --frame=689 --props=props/v1.json # CTA, message-matched
npx remotion still AdTemplate out/f-hook.png --frame=12 --props=props/v1.json # 钩子在2秒内清晰可见 npx remotion still AdTemplate out/f-mid.png --frame=300 --props=props/v1.json # 展示收益/证明 npx remotion still AdTemplate out/f-cta.png --frame=689 --props=props/v1.json # CTA与钩子消息匹配

inspect each: fidelity (hook / offer / proof / CTA text exact, brand bg+accent right)

检查每一张静帧：准确性（钩子/优惠/证明/CTA文本准确，品牌背景+强调色正确）

AND artifacts (text overflow, off-canvas, CTA inside the 9:16 bottom third, missing font, wrong row binding)

以及是否存在问题（文本溢出、超出画布、CTA位于9:16底部三分之一内、字体缺失、行绑定错误）


**Multi-aspect / batch — verify one variant in EACH aspect before batch-rendering the matrix.** A layout bug repeats across every row × aspect; catch it once.

```bash
for ar in 9x16 4x5 1x1; do                                  # one representative variant, every target aspect
  npx remotion still AdTemplate "out/v1-${ar}.png" --frame=300 \
    --props=props/v1.json --props-merge="{\"aspect\":\"${ar}\"}"
done

**多宽高比/批量验证——批量渲染矩阵前，先验证一个变体的所有宽高比版本。** 布局错误会在每一行×每个宽高比中重复出现；提前发现一次即可避免批量错误。

```bash
for ar in 9x16 4x5 1x1; do                                  # 选取一个代表性变体，验证所有目标宽高比
  npx remotion still AdTemplate "out/v1-${ar}.png" --frame=300 \
    --props=props/v1.json --props-merge="{\"aspect\":\"${ar}\"}"
done

stills clean in all aspects? → then batch-render every row × aspect:

所有宽高比的静帧均无问题？→ 然后批量渲染所有行×所有宽高比：

for f in props/*.json; do id=$(basename "$f" .json); for ar in 9x16 4x5 1x1; do npx remotion render AdTemplate "out/${id}-${ar}.mp4" --props="$f" --props-merge="{"aspect":"${ar}"}" done; done npx remotion render AdTemplate out/demo.gif --codec=gif --props=props/v1.json # README demo

**Before you finish:**
1. `npx remotion still` renders cleanly at hook / mid / CTA — no errors, no missing fonts/assets.
2. Hook/offer/proof/CTA text exact and brand colors right; nothing in the 9:16 bottom third or outside the center safe zone.
3. Frame-driven only — no CSS/library timers, `Date.now()`, or `Math.random()`.
4. Shipped row's props render correctly (not just `defaultProps`); one variable per variant holds.
5. One variant verified in 9:16 + 4:5 + 1:1 before the batch; MP4s play; (optional) GIF for the README.
for f in props/*.json; do id=$(basename "$f" .json); for ar in 9x16 4x5 1x1; do npx remotion render AdTemplate "out/${id}-${ar}.mp4" --props="$f" --props-merge="{"aspect":"${ar}"}" done; done npx remotion render AdTemplate out/demo.gif --codec=gif --props=props/v1.json # README演示用GIF

**完成前检查：**
1. `npx remotion still`渲染钩子/中间/CTA帧时无错误，无字体/资源缺失。
2. 钩子/优惠/证明/CTA文本准确，品牌颜色正确；关键内容未位于9:16底部三分之一或中心安全区域外。
3. 仅由帧驱动——无CSS/库定时器、`Date.now()`或`Math.random()`。
4. 真实行属性渲染正确（而非仅`defaultProps`）；每个变体仅含一个变量。
5. 一个变体已验证9:16 + 4:5 + 1:1版本；MP4可正常播放；（可选）为README生成GIF。

Reference files

参考文件

  • references/batch-ad-pipeline.md
    — the full runnable Remotion ad template, the CSV→typed-props parser with validation, a one-variable test-matrix generator, the brand-lock theme object, and the complete batch + multi-aspect render script.
  • references/platform-specs.md
    — exact 2025/2026 pixel safe zones, durations, aspect ratios, and format limits for Meta Feed/Reels/Stories, TikTok In-Feed, and YouTube, plus a hook→CTA message-match worksheet.
  • references/batch-ad-pipeline.md
    ——完整可运行的Remotion广告模板、带验证的CSV→类型化属性解析器、单变量测试矩阵生成器、品牌锁定主题对象，以及完整的批量+多宽高比渲染脚本。
  • references/platform-specs.md
    ——2025/2026年Meta Feed/Reels/Stories、TikTok信息流、YouTube的精确像素安全区域、时长、宽高比和格式限制，以及钩子→CTA消息匹配工作表。