Create videos automatically with Claude and AI Voiceover.

A step-by-step process for programming and creating automated animated videos and educational materials using Remotion (React + TypeScript), incorporating AI-powered TTS voiceovers with standard timestamps.

Code-based video creation with Remotion (React + TypeScript) is completely changing the way developers and content creators produce videos in bulk. Instead of manually dragging and dropping in traditional video editing software, you can transform dynamic data, text, and images into smooth, 60fps animated videos, automating everything from interface design to MP4 file output.

In this tutorial, you will learn the complete 5-step process of building a full-fledged "Exploring Nature" video with Remotion, from configuring the Composition, writing the motion Components, aligning the timestamp for the AI voiceover (TTS), to rendering a high-quality MP4 video.

Sample concept: “Exploring the Wonderful Tropical Rainforest (Nature Explorer 60s)”

• Genre: Educational animated video, short documentary exploring nature for children and families. • Structure: 8 scenes seamlessly transitioning through various ecosystems (jungle, stream, birds, sunset foliage). • Specifications: 1920x1080 resolution (16:9), 30fps, 60-second duration (1800 frames total). • Components: Vector graphic illustrations, smooth Spring Animation motion effects, dynamic typography, auto-response subtitles, and warm AI voice-over.

5-Step Video Programming Process with Remotion & AI Voiceover

Step 1: Initialize the Remotion project and configure the Root Composition.

Quickly create a Remotion project with TypeScript via CLI commands and configure the Root.tsx file:

npx create-video@latest nature-video --template blank-typescript
cd nature-video
npm install @remotion/transitions

Define the Root Composition in the src/Root.tsx file with a duration of 60 seconds (1800 frames at 30fps):

import { Composition } from 'remotion';
import { NatureExplorer } from './NatureExplorer';

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="NatureExplorer"
      component={NatureExplorer}
      durationInFrames={1800}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

Step 2: Build Scene Components and Motion Effects

Use `useCurrentFrame` and `interpolate/spring` in Remotion to create a smooth zooming motion (Ken Burns Effect) and fluid text sliding:

import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';

export const IntroScene: React.FC<{ title: string; subtitle: string }> = ({ title, subtitle }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const titleOpacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: 'clamp' });
  const titleScale = spring({ frame, fps, config: { damping: 12 } });

  return (
    <AbsoluteFill style={{ backgroundColor: '#1A3323', justifyContent: 'center', alignItems: 'center' }}>
      <h1 style={{ color: '#E8F5E9', fontSize: 80, transform: `scale(${titleScale})`, opacity: titleOpacity }}>
        {title}
      </h1>
      <p style={{ color: '#A5D6A7', fontSize: 36, marginTop: 20 }}>{subtitle}</p>
    </AbsoluteFill>
  );
};

Step 3: Create a voice-over script that perfectly matches the timestamps for each scene.

To ensure the voiceover doesn't interrupt the next scene, the reading speed should be maintained at a standard 2.5-3 words per second (for exploratory and educational content):

VOICE-OVER SCRIPT (8 SCENES, TOTAL 60 SECONDS):

• Scene 1 (00:00 - 00:07 | 210 frames): "Welcome, little ones, to our journey of discovering the wondrous natural world!"

• Scene 2 (00:07 - 00:15 | 240 frames): "Deep within the tropical rainforest, millions of species live and thrive together."

• Scene 3 (00:15 - 00:23 | 240 frames): "Giant trees reach high, sheltering countless creatures under the brilliant morning sun."

• Scene 4 (00:23 - 00:30 | 210 frames): "Listen to the babbling stream, where cool, refreshing water nourishes life everywhere."

• Scene 5 (00:30 - 00:38 | 240 frames): "Colorful birds chirp merrily, heralding a new day full of energy."

• Scene 6 (00:38 - 00:45 | 210 frames): "The microscopic world beneath the forest floor is also bustling with diligent insects."

• Scene 7 (00:45 - 00:53 | 240 frames): "As the sun sets, the forest dons a magnificent orange-yellow cloak."

• Scene 8 (00:53 - 01:00 | 210 frames): "Let's work together to protect beautiful nature! See you on the next adventure."

Step 4: Create TTS Audio and Embed it in Remotion Sequence

Use TTS tools like ElevenLabs, Vbee, or FPT.AI to create a voice-over file (WAV/MP3 format). Then, place the file in the public/audio/ folder and use the Audio tab inside Sequence:

import { Audio, Sequence, staticFile } from 'remotion';

export const NatureExplorer: React.FC = () => {
  return (
    <>
      {/* Nhạc nền nhẹ nhàng */}
      <Audio src={staticFile('audio/nature-bgm.mp3')} volume={0.15} />

      {/* Scene 1: 0 - 7s (Frame 0 -> 210) */}
      <Sequence from={0} durationInFrames={210}>
        <IntroScene title="Khám Phá Thiên Nhiên" subtitle="Chuyến phiêu lưu vào rừng nhiệt đới" />
        <Audio src={staticFile('audio/voice-scene-1.mp3')} volume={1.0} />
      </Sequence>

      {/* Scene 2: 7s - 15s (Frame 210 -> 450) */}
      <Sequence from={210} durationInFrames={240}>
        <ForestScene />
        <Audio src={staticFile('audio/voice-scene-2.mp3')} volume={1.0} />
      </Sequence>
    </>
  );
};

Step 5: Render the MP4 video using Remotion CLI

Check the live preview in Remotion Studio using the command: `npm start` (default at localhost:3000). Once all movements and sounds are perfectly synchronized, run the render command to export the MP4 file:

npx remotion render src/index.ts NatureExplorer out/nature-explorer-1080p.mp4 --codec=h264 --crf=18

Checklist for reviewing before publishing a video.

Lean manufacturing system

Khởi tạo Remotion Root (1080p, 30fps, 1800 frames)
→ Thiết kế UI & Animation Component bằng React / Framer Motion
→ Viết kịch bản Voice-over canh chuẩn timestamp từng giây
→ Tạo audio AI TTS (ElevenLabs / Vbee) & Nhúng vào Sequence
→ Preview trên Remotion Studio & Tinh chỉnh frame math
→ Render tự động ra file MP4 bằng Remotion CLI

Video programming using Remotion combined with AI voiceovers helps you build an automated pipeline for mass video production, easily personalizing content for each audience without the effort of manual editing.