Remotion — React-Based Video Compositions

Remotion turns React components into video frames. Use when you need pixel-perfect programmatic video: animated stats, branded intros, caption overlays, or any video that requires code-level control.

When to Use Remotion vs Creatify

| Scenario | Use | |----------|-----| | Talking head + avatar + quick turnaround | Creatify | | Code-generated animated graphics, stats, charts | Remotion | | Pixel-perfect branded intros/outros | Remotion | | TikTok-style captions with word highlighting | Remotion | | Bulk video variants from data | Remotion | | B-roll cinematic scenes | Kling via Magnific |

Core Concepts

Composition

import { Composition } from 'remotion';

export const RemotionRoot = () => (
  <Composition
    id="MyVideo"
    component={MyVideoComponent}
    durationInFrames={150}   // 5s at 30fps
    fps={30}
    width={1080}
    height={1920}            // 9:16 vertical
    defaultProps={{ text: 'Hello' }}
  />
);

useCurrentFrame + interpolate

import { useCurrentFrame, interpolate } from 'remotion';

export const FadeIn = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp'
  });
  return <div style={{ opacity }}>Content</div>;
};

Sequence — Timeline Layers

import { Sequence } from 'remotion';

export const Timeline = () => (
  <>
    <Sequence from={0} durationInFrames={60}>
      <Hook />
    </Sequence>
    <Sequence from={60} durationInFrames={90}>
      <MainContent />
    </Sequence>
  </>
);

TikTok-Style Captions

import { useCurrentFrame } from 'remotion';
import { useWindowedFrameCaptions } from '@remotion/captions';

export const Captions = ({ transcript }) => {
  const frame = useCurrentFrame();
  const { captions } = useWindowedFrameCaptions(transcript, { frame });

  return (
    <div style={{ position: 'absolute', bottom: 100, width: '100%', textAlign: 'center' }}>
      {captions.map((word, i) => (
        <span
          key={i}
          style={{
            color: word.highlighted ? '#FFD700' : 'white',
            fontWeight: word.highlighted ? 'bold' : 'normal',
            fontSize: 48,
            textShadow: '2px 2px 4px rgba(0,0,0,0.8)'
          }}
        >
          {word.text}{' '}
        </span>
      ))}
    </div>
  );
};

Import SRT Captions

import { parseSrt } from '@remotion/captions';
import fs from 'fs';

const srtContent = fs.readFileSync('captions.srt', 'utf8');
const captions = parseSrt({ input: srtContent });

Audio Sync

import { Audio, useVideoConfig } from 'remotion';

export const WithAudio = () => (
  <Audio
    src="https://example.com/voiceover.mp3"
    startFrom={0}
    volume={1}
  />
);

Rendering

# Preview (browser)
npx remotion preview

# Local render
npx remotion render MyVideo output.mp4

# AWS Lambda (production)
npx remotion lambda render MyVideo output.mp4 \
  --region us-east-1 \
  --function-name remotion-render

Rules Reference

Full rules by topic at C:\Users\mikem\.claude\skills\remotion-best-practices\rules\:

| File | Topic | |------|-------| | animations.md | Spring, interpolate, easing | | audio.md | Audio import, trim, volume, speed | | captions.md | TikTok-style word highlighting | | transitions.md | Scene transitions | | assets.md | Images, video, fonts | | timing.md | Interpolation curves | | tailwind.md | TailwindCSS in Remotion |

Related Topics

• [[ffmpeg-agent]] — post-process Remotion output (compress, add subs, resize)
• [[merlino-voice]] — generate voiceover audio to sync with Remotion
• [[assemblyai-transcription]] — generate SRT captions for Remotion import

#video-sop #remotion #react #programmatic-video #captions #animation