remotion-ads

Remotion Ads

Create professional video ads and explainer videos with Remotion, ElevenLabs voiceover, and animated captions.

Setup

1. Copy references/brand-config-template.md → references/brand-config.md
2. Fill in brand colors, fonts, voice, caption styling, and content rules
3. Create pronunciation dictionary from assets/dictionaries/template.pls

See references/setup.md for dependencies and folder structure.

---

Supported Formats

Format	Aspect	Resolution	Duration	Scenes
Instagram Reels	9:16	1080×1920	15-60s	4 (Hook→Problem→Solution→CTA)
Instagram Reels (Ohneis)	9:16	1080×1920	15-45s	Beat-driven (word-level)
Website Explainers	16:9	1920×1080	60-160s	6 (Hook→Problem→Context→Solution→Process→CTA)
Carousels	4:5	1080×1350	Static	5-10 slides

See references/formats.md for safe zones and crop specs. See references/ohneis-style.md for beat-driven cinematic reel template. See references/website-videos.md for 16:9 long-form format.

---

Workflow

From scratch

# 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

From a URL (page → video)

# 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

See references/url-to-video.md for the full URL-to-video workflow.

---

Safe Zones (Critical)

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 };

Website Videos (1920×1080)

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

---

Scene JSON Format

{
  "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" }
  ]
}

Voice Character Presets

Character	Style	Stability	Similarity	Style Param
dramatic	Intense, emotional	0.3	0.8	0.7
narrator	Professional, smooth	0.5	0.75	0.4
expert	Authoritative	0.6	0.85	0.3
calm	Soothing, reassuring	0.7	0.8	0.2
conversational	Casual, friendly	0.45	0.7	0.5

---

Composition Template

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>
  );
};

See references/components.md for reusable scene components. See references/voiceover.md for TransitionSeries audio sync.

---

Reference Files

Load these on demand based on the task:

Core (read first)

File	When to read
setup.md	Project initialization
brand-config-template.md	Configuring brand: colors, fonts, voice, captions, compliance
formats.md	Dimension specs, safe zones, crop previews

Video Creation

File	When to read
ohneis-style.md	Beat-driven cinematic reel template: mixed-font typography, hard cuts, moody photos
voiceover.md	ElevenLabs TTS, models, scene JSON, timing sync, dictionaries
captions.md	Animated captions: TikTok-style, word-by-word, karaoke
animations.md	Spring configs, transitions, animation components
components.md	Reusable scene template components
html-in-canvas.md	Render live DOM into a canvas with 2D filters or WebGL2 shaders (vintage, progressive blur, page-tour mockup)
website-videos.md	16:9 long-form format, 6-scene structure
url-to-video.md	Create videos from existing web pages

Audio

File	When to read
sound-effects.md	ElevenLabs SFX generation
music.md	Background music via ElevenLabs or Suno

Assets & Static

File	When to read
local-assets.md	Background images, icons, illustrations
carousels.md	4:5 carousel design and batch rendering

Copywriting

File	When to read
ad-copywriting.md	Script frameworks, hook formulas, CTA patterns
copy-frameworks.md	Headline templates, section formulas
natural-transitions.md	Human-sounding transitions, AI-tell avoidance

Distribution

File	When to read
paid-ads.md	Meta campaign strategy, targeting, budgets
social-content.md	Content calendar, repurposing framework

---

Scripts

Script	Purpose
scripts/generate.js	ElevenLabs voiceover with dictionaries, request stitching (note: --with-timestamps flag is currently a no-op)
scripts/gemini-tts.mjs	Gemini TTS — single-request generate + silence split with text-proportion boundary picker
scripts/suno-direct.ts	Suno background music generation
scripts/url-to-scenes.js	Extract page content into scene JSON

---

Pre-Upload Checklist

Reels

• 1080×1920, H.264, 30fps
• All text within safe zones
• No content in top 285px or bottom 400px
• Font sizes ≥ 48px
• Voiceover synced, captions timed
• ~15s total duration

Website Videos

• 1920×1080, H.264, 30fps
• Font sizes ≥ 36px
• 60-160s duration
• 6-scene structure with appropriate voice characters

Carousels

• 1080×1350, PNG
• 80px padding from edges
• 5-10 slides with swipe indicators