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

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

bashCopy code
# 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)

bashCopy code
# 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)

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

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

Website Videos (1920×1080)

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

Scene JSON Format

jsonCopy code
{
  "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

Composition Template

tsxCopy code
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)

Video Creation

Audio

Assets & Static

Copywriting

Distribution

Scripts

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