Remotion AI Voiceover Skill — ElevenLabs TTS

What it is

This is a Remotion skill for adding AI-generated voiceover to programmatic videos using ElevenLabs text-to-speech. The skill generates speech audio per scene and uses Remotion's calculateMetadata function to dynamically size the video composition duration to match the generated audio. This ensures that the video and voiceover are always synchronized.

The skill targets developers creating automated video content with Remotion who want professional-quality voiceover without recording audio manually. It integrates ElevenLabs' voice synthesis directly into the Remotion build pipeline.

How it saves time or tokens

Without this skill, adding voiceover to Remotion videos requires manually generating audio files, calculating their duration, and adjusting video composition length. This skill automates the entire flow: write text, generate audio, and the video adapts automatically. AI agents using this skill can produce narrated videos in a single pass.

How to use

1. Install the Remotion skills: npx skills add remotion-dev/skills.
2. Set your ElevenLabs API key: export ELEVENLABS_API_KEY=your_key.
3. Use the voiceover pattern in your Remotion compositions with calculateMetadata for dynamic duration.

Example

# Install Remotion skills
npx skills add remotion-dev/skills

# Set ElevenLabs API key
export ELEVENLABS_API_KEY=your_key

import { Audio, useCurrentFrame } from 'remotion';

// calculateMetadata generates TTS and returns duration
export const calculateMetadata = async ({ props }) => {
  const audio = await generateVoiceover(props.script);
  const durationInFrames = Math.ceil(audio.duration * 30);
  return {
    durationInFrames,
    props: { ...props, audioUrl: audio.url },
  };
};

export const NarratedScene = ({ audioUrl, script }) => {
  return (
    <>
      <Audio src={audioUrl} />
      <div style={{ fontSize: 24, padding: 40 }}>
        {script}
      </div>
    </>
  );
};

Related on TokRepo

• Video AI Tools — Video production tools
• Voice AI Tools — Text-to-speech and voice synthesis

Common pitfalls

• ElevenLabs API calls cost money per character of generated speech. Long scripts accumulate costs. Estimate costs before generating voiceover for large video batches.
• Audio generation adds build time to Remotion renders. Cache generated audio files to avoid regenerating unchanged voiceovers on every render.
• Voice quality depends on the ElevenLabs model and voice selection. Test different voices for your content type before committing to a production workflow.