remotion-ads

Remotion 广告

使用 Remotion、ElevenLabs 配音和动画字幕，制作专业的视频广告和讲解视频。

设置

1. 将 references/brand-config-template.md 复制到 references/brand-config.md
2. 填写品牌颜色、字体、语音、字幕样式和内容规则
3. 使用 assets/dictionaries/template.pls 创建发音词典

依赖项和文件夹结构请参阅 references/setup.md。

---

支持的格式

格式	宽高比	分辨率	时长	场景
Instagram Reels	9:16	1080×1920	15-60s	4（Hook→问题→解决方案→CTA）
Instagram Reels（Ohneis）	9:16	1080×1920	15-45s	按节拍驱动（词级）
网站讲解视频	16:9	1920×1080	60-160s	6（Hook→问题→背景→解决方案→流程→CTA）
轮播图	4:5	1080×1350	静态	5-10 张幻灯片

安全区域和裁剪规格请参阅 references/formats.md。 按节拍驱动的电影感 Reels 模板请参阅 references/ohneis-style.md。 16:9 长视频格式请参阅 references/website-videos.md。

---

工作流

从头开始

# 1. Write scene JSON
# 2. Generate voiceover with word timestamps
node scripts/generate.js \
  --scenes scenes.json \
  --with-timestamps \
  --dictionary your-brand \
  --output-dir public/audio/ad-example/

# 3. Create Remotion composition using actualDuration from info.json
# 4. Render
npx remotion render AdExample out/ad-example.mp4 --codec=h264 --crf=18

从 URL 开始（页面 → 视频）

# 1. Extract page data into scene JSON
node scripts/url-to-scenes.js --url https://example.com/page --format reels --output scenes.json
# 2. Review/edit the generated scenes.json
# 3. Continue with voiceover + composition as above

完整的 URL 转视频工作流请参阅 references/url-to-video.md。

---

安全区域（重要）

Reels（1080×1920）

┌──────────────────────────┐ 0px
│     TOP DANGER (285px)   │
├──────────────────────────┤
│ ←80px  SAFE AREA  120px→ │
│      880×1235px          │
├──────────────────────────┤
│   BOTTOM DANGER (400px)  │
└──────────────────────────┘ 1920px

const SAFE = { top: 285, bottom: 400, left: 80, right: 120 };

网站视频（1920×1080）

const SAFE = { top: 60, bottom: 60, left: 80, right: 80 };

---

场景 JSON 格式

{
  "name": "ad-example",
  "voice": "VoiceName",
  "character": "narrator",
  "dictionary": "your-brand",
  "scenes": [
    { "id": "scene1", "text": "Hook text.", "duration": 3.5, "character": "dramatic" },
    { "id": "scene2", "text": "Problem.", "duration": 4.5 },
    { "id": "scene3", "text": "Solution.", "duration": 4.0, "character": "expert" },
    { "id": "scene4", "text": "CTA.", "duration": 3.0, "character": "calm" }
  ]
}

配音角色预设

角色	风格	稳定性	相似度	风格参数
dramatic	强烈、富有情感	0.3	0.8	0.7
narrator	专业、流畅	0.5	0.75	0.4
expert	权威	0.6	0.85	0.3
calm	舒缓、令人安心	0.7	0.8	0.2
conversational	随意、友好	0.45	0.7	0.5

---

合成模板

import { AbsoluteFill, Audio, Series, staticFile } from "remotion";

// Import from your brand-config.md values
const COLORS = { primary: "#000", accent: "#888", dark: "#111", background: "#fff" };

export const AdTemplate: React.FC = () => {
  const { fps } = useVideoConfig();
  // Use actualDuration from info.json, not estimated
  const DURATIONS = { scene1: 3.42, scene2: 4.35, scene3: 4.12, scene4: 3.31 };
  const pad = 5;

  return (
    <AbsoluteFill>
      <Audio src={staticFile("audio/ad-example/ad-example-combined.mp3")} />
      <Series>
        <Series.Sequence durationInFrames={Math.round(DURATIONS.scene1 * fps) + pad}>
          <Scene1Hook />
        </Series.Sequence>
        {/* ... remaining scenes */}
      </Series>
    </AbsoluteFill>
  );
};

可复用的场景组件请参阅 references/components.md。 TransitionSeries 音频同步请参阅 references/voiceover.md。

---

参考文件

根据任务按需加载以下文件：

核心（先阅读）

文件	阅读时机
setup.md	初始化项目
brand-config-template.md	配置品牌：颜色、字体、语音、字幕、合规性
formats.md	尺寸规格、安全区域、裁剪预览

视频制作

文件	阅读时机
ohneis-style.md	按节拍驱动的电影感 Reels 模板：混合字体排版、硬切、氛围感照片
voiceover.md	ElevenLabs TTS、模型、场景 JSON、时间同步、词典
captions.md	动画字幕：TikTok 风格、逐词显示、卡拉 OK
animations.md	Spring 配置、转场、动画组件
components.md	可复用的场景模板组件
html-in-canvas.md	将实时 DOM 渲染到画布，并应用 2D 滤镜或 WebGL2 着色器（复古效果、渐进式模糊、页面导览模型）
website-videos.md	16:9 长视频格式、6 场景结构
url-to-video.md	根据现有网页制作视频

音频

文件	阅读时机
sound-effects.md	使用 ElevenLabs 生成音效
music.md	使用 ElevenLabs 或 Suno 制作背景音乐

资源与静态内容

文件	阅读时机
local-assets.md	背景图片、图标、插图
carousels.md	4:5 轮播图设计和批量渲染

文案创作

文件	阅读时机
ad-copywriting.md	脚本框架、吸睛开场公式、行动号召模式
copy-frameworks.md	标题模板、章节公式
natural-transitions.md	自然流畅的过渡，避免显露 AI 痕迹

分发

文件	阅读时机
paid-ads.md	Meta 广告系列策略、定向、预算
social-content.md	内容日历、内容再利用框架

---

脚本

脚本	用途
scripts/generate.js	使用词典生成 ElevenLabs 配音，并拼接请求（注意：--with-timestamps 标志目前不起作用）
scripts/gemini-tts.mjs	Gemini TTS——单次请求生成，并按文本比例边界选择器切分静音
scripts/suno-direct.ts	Suno 背景音乐生成
scripts/url-to-scenes.js	将页面内容提取为场景 JSON

---

上传前检查清单

Reels

• 1080×1920、H.264、30fps
• 所有文本均位于安全区域内
• 顶部 285px 或底部 400px 区域内没有内容
• 字号 ≥ 48px
• 配音已同步，字幕时间已对齐
• 总时长约 15s

网站视频

• 1920×1080、H.264、30fps
• 字号 ≥ 36px
• 时长 60-160s
• 采用包含合适配音角色的 6 场景结构

轮播图

• 1080×1350、PNG
• 距边缘留出 80px 内边距
• 5-10 张幻灯片，并带有滑动指示