Programmatic Video with Remotion: Building Videos in React with AI Skills

Every time you finish building a side project, SaaS product, or game, you face the same chore: creating a promo video that looks clean.

Usually, that means opening Premiere Pro, After Effects, or DaVinci Resolve. You end up nudging keyframes on a timeline, wrestling with GUI export settings, manually lining up sound effects, and repeating the whole cycle whenever you need to fix copy in a 30-second clip. For developers used to code, Git, and component design, the workflow feels slow and disconnected from how we build software.

Instead of timeline editors, you can build video animations using the tools you already know: React components, JSX, CSS flexbox, and spring physics, then render them directly into MP4 files from your terminal.

This is where Remotion fits in.

What is Remotion?
Remotion is an open-source framework that allows developers to create videos programmatically using React, TypeScript/JavaScript, and CSS. Instead of manual timeline editing, video frames are rendered deterministically based on React state and frame numbers, enabling automated video generation, CI/CD rendering, and dynamic personalized video pipelines.

Learn more: Remotion Official Website | Remotion GitHub Repository

While building Tambola Live, a real-time WebRTC multiplayer game (covered in my Tambola Architecture Case Study), I needed a 40-second animated promo trailer. Using Remotion, the official Remotion AI skills, and Gemini 3.7 Flash, I built the entire 1080p video with scene transitions, kinetic typography, and synchronized sound effects in React.

Here is a breakdown of how programmatic video works, how Remotion’s preview studio speeds up iteration, and how AI skills help you generate complete scenes without trial and error.

Remotion vs. traditional video editors: why code wins

If you know how to build web apps, you already know most of what it takes to build a Remotion video. Similar to automating social images with Satori and Sharp, programmatic video replaces manual GUI work with reproducible code.

Traditional Video Workflow:
[GUI Timeline] ---> [Manual Keyframes] ---> [Heavy Local Render] ---> [Hard to Update / Automate]

Programmatic Remotion Workflow:
[React & CSS] ---> [Frame & Spring Hooks] ---> [Live Studio Preview] ---> [CLI / Cloud Render]

The core mental model: how Remotion turns React into video

In Remotion, a video is a sequence of still frames rendered at a fixed frame rate (such as 30 or 60 frames per second).

Instead of relying on browser wall-clock timers like setTimeout or CSS @keyframes (which can drift or drop frames during heavy CPU loads), Remotion uses deterministic hooks tied directly to the current frame index:

• useCurrentFrame(): Returns the integer index of the active frame (0, 1, 2, …).
• useVideoConfig(): Provides composition metadata such as fps, durationInFrames, width, and height.
• interpolate(): Maps a frame range to numerical values (for instance, fading opacity from 0 to 1 between frames 0 and 30).
• spring(): Computes natural, physics-based motion using mass, stiffness, and damping parameters.

A simple 3-second animated title

Here is a minimal Remotion component:

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

export const IntroTitle = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Calculate smooth physics-based spring entrance
  const entrance = spring({
    frame,
    fps,
    config: { damping: 12, stiffness: 100 },
  });

  const scale = interpolate(entrance, [0, 1], [0.8, 1]);
  const opacity = interpolate(entrance, [0, 1], [0, 1]);

  return (
    <div
      style={{
        flex: 1,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: '#090d16',
        color: '#ffffff',
        fontSize: 64,
        fontWeight: 800,
        transform: `scale(${scale})`,
        opacity,
      }}
    >
      Tambola Live
    </div>
  );
};

Because entrance depends strictly on frame, Remotion guarantees pixel-perfect, frame-accurate rendering whether your local machine runs at 10 fps or 120 fps.

Speeding up scene generation with Remotion AI skills & Gemini 3.7 Flash

Calculating animation timings, keyframe curves, and scene transitions by hand can take time. To help with this, the Remotion team created official Agent Skills that give coding assistants direct knowledge of Remotion’s architecture and APIs.

You can install Remotion skills into your AI agent environment with one command:

npx -y skills@latest add remotion-dev/skills -g -y

This installs 12 specialized Remotion skills into your project:

Pairing with Gemini 3.7 Flash

With these skills installed, I gave Gemini 3.7 Flash the scene outline for the promo video:

“Create a 40-second 1080p promo video for an online WebRTC Tambola game. We need 6 scenes: Hook, Host creating room, Player scanning QR code to join, Live number calling & ticket dabbing, Winning claim fanfare with confetti, and an Outro with a call to action. Use @remotion/transitions with fade, spring-loaded kinetic typography, and synchronized sound effects.”

Because the model had direct access to remotion-dev/skills, it avoided common AI errors like using setInterval or non-deterministic CSS animations. Instead, it generated clean, modular Remotion sequence components with proper frame calculations and spring curves right away.

Fast iteration with Remotion preview studio

The most convenient part of developing with Remotion is the Remotion Studio.

You start the preview studio with:

npx remotion studio src/remotion/index.js

This launches a local preview interface on http://localhost:3000:

• Interactive Timeline: Drag the playhead to scrub across frames smoothly.
• Frame-by-Frame Stepping: Use arrow keys to step through individual frames and inspect alignment.
• Responsive Canvas Zoom: Scale from 10% to 200% to verify typography, badges, and mobile mockups.
• Instant Hot Module Replacement (HMR): Update CSS padding, color values, or spring physics in your code editor, and see the canvas update in milliseconds without restarting.

+-------------------------------------------------------------------+
|  Remotion Studio (http://localhost:3000)                          |
+-------------------------------------------------------------------+
|  [ Play / Pause ]  [ Frame: 450 / 1200 ]  [ 30 FPS ]  [ 1080p ]   |
|                                                                   |
|  +-------------------------------------------------------------+  |
|  |                                                             |  |
|  |           [ Animated Ticket & Live Ball Calling ]           |  |
|  |                                                             |  |
|  +-------------------------------------------------------------+  |
|                                                                   |
|  [================== Timeline Scrubbing Bar ===================]  |
|  |-- Scene 1 --|-- Scene 2 --|-- Scene 3 --|-- Scene 4 Gameplay -|  |
+-------------------------------------------------------------------+

Case study: building the Tambola Live promo video

Here is how the promo video was organized in /src/remotion/ for Tambola Live.

1. Root Composition setup (Root.jsx)

The video root declares the compositions available in the project, defining the resolution, frame rate, and total duration in frames (40 seconds at 30 fps = 1,200 frames):

import React from 'react';
import { Composition } from 'remotion';
import { PromoVideo } from './PromoVideo.jsx';

export const Root = () => {
  return (
    <Composition
      id="PromoVideo"
      component={PromoVideo}
      durationInFrames={1200}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

export default Root;

2. Scene sequencing with transitions (PromoVideo.jsx)

Rather than manually offsetting start frames for every scene, @remotion/transitions chains scenes together cleanly:

import React from 'react';
import { AbsoluteFill } from 'remotion';
import { TransitionSeries, linearTiming } from '@remotion/transitions';
import { fade } from '@remotion/transitions/fade';
import AudioManager from './audio/AudioManager.jsx';
import Scene1Hook from './scenes/Scene1Hook.jsx';
import Scene2Host from './scenes/Scene2Host.jsx';
import Scene3Join from './scenes/Scene3Join.jsx';
import Scene4Gameplay from './scenes/Scene4Gameplay.jsx';
import Scene5Winning from './scenes/Scene5Winning.jsx';
import Scene6Outro from './scenes/Scene6Outro.jsx';

export function PromoVideo() {
  return (
    <AbsoluteFill style={{ backgroundColor: '#090d16', color: '#ffffff' }}>
      {/* Synchronized Audio & SFX Layer */}
      <AudioManager />

      {/* Cinematic Transition Sequences */}
      <TransitionSeries>
        <TransitionSeries.Sequence durationInFrames={155}>
          <Scene1Hook />
        </TransitionSeries.Sequence>
        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 12 })}
        />

        <TransitionSeries.Sequence durationInFrames={185}>
          <Scene2Host />
        </TransitionSeries.Sequence>
        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 12 })}
        />

        <TransitionSeries.Sequence durationInFrames={185}>
          <Scene3Join />
        </TransitionSeries.Sequence>
        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 12 })}
        />

        <TransitionSeries.Sequence durationInFrames={305}>
          <Scene4Gameplay />
        </TransitionSeries.Sequence>
        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 12 })}
        />

        <TransitionSeries.Sequence durationInFrames={245}>
          <Scene5Winning />
        </TransitionSeries.Sequence>
        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 12 })}
        />

        <TransitionSeries.Sequence durationInFrames={185}>
          <Scene6Outro />
        </TransitionSeries.Sequence>
      </TransitionSeries>
    </AbsoluteFill>
  );
}

3. Adding audio and synthetic sound effects without external files

For the audio layer, we layered background music using Remotion’s <Audio> component alongside synthetic PCM WAV sound effects generated directly in JavaScript:

import React from 'react';
import { Audio, Sequence, staticFile } from 'remotion';
import { SOUND_POP, SOUND_DAB, SOUND_WIN, SOUND_CHIME } from './sounds.js';

export default function AudioManager() {
  return (
    <>
      {/* 40-Second Upbeat Background Music Track */}
      <Audio src={staticFile('promo-music.wav')} volume={0.8} />

      {/* Synchronized Sound Effects */}
      <Sequence from={180} durationInFrames={20}>
        <Audio src={SOUND_CHIME} volume={0.4} />
      </Sequence>

      <Sequence from={540} durationInFrames={15}>
        <Audio src={SOUND_POP} volume={0.5} />
      </Sequence>

      <Sequence from={570} durationInFrames={15}>
        <Audio src={SOUND_DAB} volume={0.55} />
      </Sequence>

      <Sequence from={870} durationInFrames={60}>
        <Audio src={SOUND_WIN} volume={0.65} />
      </Sequence>
    </>
  );
}

By generating data-URI WAV sounds mathematically (sine waves with exponential decay envelopes at 22,050 Hz), sound effects like ball pop sounds, ticket dabs, chimes, and victory fanfares are completely self-contained, requiring zero external asset downloads during rendering.

Rendering to production MP4 from the CLI

When you are ready to produce the final video, render it directly from your terminal:

# Render high-quality MP4 using H.264 codec
npx remotion render src/remotion/index.js PromoVideo public/promo-video.mp4 --codec h264

You can also extract poster images and video thumbnails at specific frames:

# Extract frame 100 as high-resolution poster JPEG
npx remotion still src/remotion/index.js PromoVideo public/promo-poster.jpg --frame 100

For large-scale production (such as generating personalized recap videos for users), you can deploy Remotion to AWS Lambda or Google Cloud Run using @remotion/lambda to render videos in parallel across distributed serverless functions.

See the game and video live in action

The complete promo video generated through this workflow is live today.

You can visit Tambola Live (tambola.nkaushik.in) to:

1. Play the game: Host a room, invite friends via QR code or direct link, roll 1-90 numbers with real-time WebRTC sync, and auto-verify winning tickets.
2. Watch the promo video: Scroll down to the “How To Play” section on the homepage to watch the full Remotion-rendered video running in the web player.

Final thoughts

1. Code is a practical video tool: If you know React and CSS, Remotion gives you full control over animations, typography, and automated rendering.
2. AI skills remove the boilerplate: Installing remotion-dev/skills gives models like Gemini 3.7 Flash the exact context needed to write working sequence timings and spring curves without guesswork.
3. The Studio provides immediate feedback: You can inspect frames, test responsive viewports, and tweak CSS without waiting for full exports.

If you have put off creating a promo video for your project because video editing software feels cumbersome, building it in React with Remotion is worth exploring.

Frequently asked questions (FAQ)

What is Remotion and how does it work?

Remotion is an open-source framework that lets developers create videos programmatically using React, JavaScript/TypeScript, and CSS. It renders video frame-by-frame by mapping frame numbers to React components using hooks like useCurrentFrame(), interpolate(), and spring().

How do I preview Remotion videos during development?

You can run npx remotion studio <entry-file> to launch the Remotion Studio in your browser. The studio provides real-time timeline scrubbing, frame-by-frame stepping, responsive canvas zooming, and Hot Module Replacement (HMR) for instant visual feedback.

How do Remotion AI Skills work with Gemini or Claude?

The remotion-dev/skills package provides AI agents with domain-specific best practices, API documentation, and code generation rules for Remotion. When paired with models like Gemini 3.7 Flash or Claude, the AI writes production-ready Remotion components, sequence timings, and spring animations without hallucinating deprecated APIs.

Can Remotion render videos with background music and sound effects?

Yes. Remotion includes an <Audio> component and <Sequence> wrappers that allow you to place audio tracks and sound effects at exact frame timestamps. You can use local audio files, remote URLs, or base64 data URIs.

Can I render Remotion videos in the cloud at scale?

Yes. Remotion provides @remotion/lambda and @remotion/cloud-run, allowing you to render videos distributed across thousands of serverless cloud functions in parallel for dynamic, personalized video rendering.