Remotion Has a Free Video Framework — Create Videos With React Components

Programmatic Video Is the Future

Your SaaS needs personalized demo videos. Your marketing team wants 100 variations of the same video with different text. Your product generates data visualizations that should be videos.

After Effects cannot scale. Canva cannot code. FFmpeg cannot design.

Remotion: Videos as React Components

Remotion lets you create videos using React. Each frame is a React component. Animations are JavaScript. Render to MP4.

How It Works

import { AbsoluteFill, useCurrentFrame, interpolate } from 'remotion'

export const MyVideo = () => {
  const frame = useCurrentFrame()
  const opacity = interpolate(frame, [0, 30], [0, 1])
  const scale = interpolate(frame, [0, 30], [0.5, 1])

  return (
    <AbsoluteFill style={{ backgroundColor: '#000' }}>
      <h1 style={{ 
        opacity, 
        transform: `scale(${scale})`,
        color: 'white',
        fontSize: 80,
        textAlign: 'center'
      }}>
        Hello World
      </h1>
    </AbsoluteFill>
  )
}

This renders a title that fades in and scales up. 30 frames = 1 second at 30fps.

Real Use Cases

1. Personalized Videos at Scale

const WelcomeVideo = ({ userName, plan }) => (
  <AbsoluteFill>
    <h1>Welcome, {userName}!</h1>
    <p>Your {plan} plan is active.</p>
  </AbsoluteFill>
)

// Generate 10,000 personalized welcome videos
users.forEach(user => {
  renderMedia({
    composition: WelcomeVideo,
    inputProps: { userName: user.name, plan: user.plan },
    outputLocation: `videos/${user.id}.mp4`
  })
})

2. Data Visualization Videos

const ChartVideo = ({ data }) => {
  const frame = useCurrentFrame()
  const progress = frame / 90 // 3 seconds at 30fps

  return (
    <AbsoluteFill>
      {data.map((bar, i) => (
        <div style={{ 
          width: bar.value * progress,
          height: 30,
          backgroundColor: bar.color
        }} />
      ))}
    </AbsoluteFill>
  )
}

3. Social Media Content

Generate Instagram Reels, TikToks, or YouTube Shorts programmatically. Same content, different aspect ratios.

Remotion Features

• Live preview: See changes in real-time like a React app
• Audio support: Sync audio to animations
• Data fetching: Fetch data during render
• Custom fonts: Use any Google Font or local font
• GIF/PNG sequence: Not just MP4
• Serverless rendering: Render on AWS Lambda

Free vs Paid

• Free: Full framework, local rendering, personal use
• Company license: Required for companies with 3+ devs ($145/month)

When to Use Remotion

• Batch video generation (personalized, data-driven)
• Animated infographics and data visualizations
• Social media content at scale
• Product demos with dynamic content

Get Started

npx create-video@latest

---

Generate video data from the web. 88+ scrapers on Apify. Custom: [e-mail]