Remotion Rule: Voiceover

What it is

The Remotion Voiceover Rule is a skill rule from the official Remotion Agent Skill set. It provides a structured pattern for adding AI-generated speech audio to Remotion video compositions using text-to-speech (TTS) services, with ElevenLabs as the default provider. The rule activates automatically when working with voiceover in a Remotion project.

This rule is intended for developers building programmatic video with React via Remotion who want to add narration or voiceover without manual audio recording.

How it saves time or tokens

Without this rule, developers must figure out the TTS integration, audio file management, and composition duration matching from scratch. The rule provides a ready-made pattern: generate MP3 files per scene, use calculateMetadata to dynamically size the composition to match audio length, and wire everything together. This eliminates trial-and-error and keeps the AI coding agent on the correct path, saving both developer time and token usage during AI-assisted development.

How to use

1. Install the Remotion skills package:

npx skills add remotion-dev/skills

1. Set your ElevenLabs API key as an environment variable:

export ELEVENLABS_API_KEY=your_key_here

1. Create a voiceover generation script that reads your scene config and calls the ElevenLabs API for each scene, writing MP3 files to the public/ directory. Then run it:

node --strip-types generate-voiceover.ts

1. Use calculateMetadata in your Remotion composition to read the audio duration and set the composition length dynamically.

Example

A minimal voiceover generation script structure:

import { ElevenLabsClient } from 'elevenlabs';
import fs from 'fs';

const client = new ElevenLabsClient({
  apiKey: process.env.ELEVENLABS_API_KEY,
});

async function generateVoiceover(text: string, outputPath: string) {
  const audio = await client.generate({
    text,
    voice: 'Rachel',
    model_id: 'eleven_multilingual_v2',
  });
  const buffer = Buffer.from(await audio.arrayBuffer());
  fs.writeFileSync(outputPath, buffer);
}

// Generate per scene
const scenes = [
  { text: 'Welcome to our product demo.', file: 'public/voice-1.mp3' },
  { text: 'Here is the key feature.', file: 'public/voice-2.mp3' },
];

for (const scene of scenes) {
  await generateVoiceover(scene.text, scene.file);
}

Then in your Remotion composition, use calculateMetadata to read audio duration and set durationInFrames accordingly.

Related on TokRepo

• Automation tools — Explore automation tools for video and content workflows
• Video tools — Browse video creation and editing tools

Common pitfalls

• Forgetting to set the ELEVENLABS_API_KEY environment variable before running the generation script. The script will fail silently or throw an auth error.
• Not using calculateMetadata to dynamically size the composition. Hardcoding durationInFrames leads to audio being cut off or having long silence at the end.
• Generating all voiceover audio on every render. Cache the MP3 files and only regenerate when the script text changes.