ad-creative-video

广告创意视频

构建一个动态图形广告模板，然后根据数据表批量制作多个变体——替换不同的钩子、优惠、CTA 和产品——让效果营销人员能够跨版位和宽高比对数十个版本进行 A/B 测试。关键在于让模板完全由数据驱动，并确保信息匹配，这样 40 个变体仍能保持品牌一致，只有受测变量发生变化。

适用场景

• 效果营销／UGC 风格的视频广告，前 1.5–3s 必须让用户停下滚动。
• 批量生成变体：用一个模板渲染多行数据（替换标题／优惠／CTA／产品），用于 A/B 测试。
• 将同一广告导出为多种宽高比，适配 Meta Feed、Reels/Stories、TikTok、YouTube。

不适用于限时促销／折扣倒计时推广，也不适用于以客户证言／评论为主的广告——这些广告结构各不相同。请聚焦于批量变体和全面测试。

让变体测试有价值的两条规则

1. 每个变体只隔离一个变量。 只有恰好一项内容发生变化，测试才能得出有用结论。保持版式、动画、颜色和时长不变；只替换受测字段（钩子、优惠或 CTA）。同时改动两项会让胜出版本无法解读。
2. 让钩子与 CTA 的信息相匹配。 前 3 秒做出的承诺，必须由按钮兑现。「别再每天浪费 2 小时」这样的钩子，应以「节省 2 小时——免费试用」收尾，而不是笼统的「立即购买」。数据表中的每一行都必须让钩子与 CTA 相互匹配。

广告结构（15–30s）

节拍	作用	时长
钩子（0–3s）	阻止用户继续滚动；提出问题或打破常规	0–3s
背景铺垫	让观众感受到问题／加深痛点	3–8s
效果呈现	展示产品如何解决问题，突出一个明确优势	8–18s
证明	给出一个具体数字、演示或结果	18–25s
CTA（最后 3s）	只提出一个行动号召，并与钩子的信息相匹配	保持 ≥2s

务必在 2 秒前触发钩子的情绪反应——观众约在 1.7s 内形成判断，而且滚动速度还在加快。优先测试钩子；与其他任何元素相比，它对 CPA 的影响更大。

钩子分类（变动最多的字段）

钩子类型	模板	适用场景
问题优先	「直到……我才意识到 X 让我损失了多少」	用户感受到痛点，但还没有说出来
打破常规	「接下来这话可能有争议，但……」	信息流拥挤，品类内容千篇一律
留下悬念	「没人谈论那个……的关键因素」	受众知识丰富、持怀疑态度
直接呈现收益	「7 天内将你的 X 减半」	成果明确且可量化
直接点名受众	「如果你每天早上都会做 X，停下来。」	受众细分明确

设置一列包含 5–10 条钩子文案，并让批量渲染为每条钩子生成一支采用相同主体内容的广告——这是最干净的钩子测试方法。

数据驱动模板（所有内容均为属性）

不要将营销人员可能会进行 A/B 测试的内容写死。合成内容只读取一个 variant 对象；渲染器绝不修改组件。让每个动画值都成为 useCurrentFrame() 的纯函数，从而保证每一帧都能确定性地渲染（不使用 CSS 过渡或库计时器——它们会导致渲染不同步）。

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→props 解析器以及品牌锁定主题对象，请参阅 references/batch-ad-pipeline.md。

1 个模板 × CSV = N 个变体

优势在于：只需制作一次广告，然后用 CSV 驱动变体矩阵。每一行都是一个完整且信息匹配的变体。每行渲染一次。

# variants.csv: id,hook,benefit,proof,cta,bg,accent  → one MP4 per row
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

要构建干净的测试矩阵，请保持所有列不变，只改变一列：5 个钩子 × 1 个主体 = 5 支广告（测试钩子）；然后用胜出钩子搭配 3 个 CTA（测试 CTA）。references/batch-ad-pipeline.md 中的矩阵生成器会将变量列表展开为 CSV，让组合测试始终一次只改变一个变量。

多宽高比导出

每种投放位置都需要原生宽高比。围绕中心安全区域进行合成，让一个主版本可以轻松适配所有宽高比——不要加黑边，也不要重新居中。

宽高比	投放位置	分辨率	安全留白区域
9:16	Reels、Stories、TikTok In-Feed	1080×1920	顶部约 14%，底部约 20–35%（界面/字幕），两侧约 6%
4:5	Meta Feed（最佳信息流版位）	1080×1350	中心 90%；CTA 不要放在底部 10% 区域
1:1	信息流、广泛覆盖	1080×1080	中心方形区域可适配所有裁切
16:9	YouTube、插播广告	1920×1080	中心 90%

将钩子文案、产品和 CTA 设计在1:1 中心方形区域内，确保它们在所有裁切中都能保留。通过一个属性控制宽高比，并为每个变体分别渲染：

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 列出了精确的像素安全区域，以及各平台的时长/格式限制。

输出检查清单

• 每个变体只改变一个变量；同一测试中的布局/动画/时序完全相同。
• 在 2 秒内呈现钩子的触发点；每一行中的钩子和 CTA 信息匹配。
• 每个动画值都是 useCurrentFrame() 的纯函数——不使用 CSS/库计时器。
• 数据集通过属性传入；所有可测试内容都不能硬编码；一个模板渲染整个 CSV。
• 每个变体都导出 9:16 + 4:5 + 1:1（+ 按需导出 16:9），关键内容位于中心方形区域内。
• 所有变体通过单个主题对象保持品牌一致。

交付与验证（静帧 → 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。

输出要求：

• 一个注册为 <Composition> 的 Remotion 广告模板（+ zod schema + defaultProps）；每个动画值都由帧驱动（不使用 CSS 过渡/库计时器/Date.now()/Math.random()）。
• 交付物 = 每个变体、每种宽高比对应的渲染后 out/*.mp4（以及项目 + CSV，以便营销人员在新增行时重新渲染）。

验证流程——渲染静帧 → 检查 → 编码。 先渲染成本低的 PNG，确认无误后再完整编码。使用随附属性（真实数据行）渲染，而不只是使用 defaultProps。

# Frame-exact stills across the hook→CTA arc, with a real variant's props
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
# inspect each: fidelity (hook / offer / proof / CTA text exact, brand bg+accent right)
#   AND artifacts (text overflow, off-canvas, CTA inside the 9:16 bottom third, missing font, wrong row binding)

多宽高比/批量渲染——批量渲染矩阵前，先在每种宽高比中验证一个变体。 布局错误会在每行 × 每种宽高比中重复出现；尽早发现一次即可。

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
# 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

完成前：

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。

参考文件

• references/batch-ad-pipeline.md — 完整、可运行的 Remotion 广告模板、带验证功能的 CSV→类型化属性解析器、单变量测试矩阵生成器、品牌锁定主题对象，以及完整的批量 + 多宽高比渲染脚本。
• references/platform-specs.md — Meta Feed/Reels/Stories、TikTok In-Feed 和 YouTube 在 2025/2026 年的精确像素安全区域、时长、宽高比和格式限制，以及钩子→CTA 信息匹配工作表。