What is Remotion? A Beginner-Friendly Way to Create Videos with Code

Learn what Remotion is, what it is used for, and try simple copy-paste examples yourself.

If you usually think video editing must be done in timeline tools, Remotion gives a different approach: you build videos using code (React + JavaScript), then render them into MP4.

In simple terms: Remotion is a framework for programmatic video creation.

Real examples (compact)

1) Static image → simple animated opening

Show code example 1

import React from 'react';
import {AbsoluteFill, Composition, Img, interpolate, useCurrentFrame} from 'remotion';

const SimpleOpening = () => {
  const frame = useCurrentFrame();
  const zoom = interpolate(frame, [0, 150], [1, 1.12]);
  return (
    <AbsoluteFill style={{backgroundColor: 'black', overflow: 'hidden'}}>
      <Img src="https://your-image-url.jpg" style={{width:'100%',height:'100%',objectFit:'cover',transform:`scale(${zoom})`}} />
      <div style={{position:'absolute',bottom:60,left:60,color:'white',fontSize:48,fontWeight:800}}>Like Reading News?</div>
    </AbsoluteFill>
  );
};

export const RemotionRoot = () => (
  <Composition id="SimpleOpening" component={SimpleOpening} durationInFrames={150} fps={30} width={1280} height={720} />
);

Rendered result example:

2) Code-generated histogram animation

Show code example 2

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

const data = [{label:'Jan',value:35},{label:'Feb',value:52},{label:'Mar',value:41},{label:'Apr',value:68}];
const maxValue = Math.max(...data.map((d) => d.value));

const Bar = ({value,index,label}) => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  const progress = spring({frame: frame - index * 6, fps, config:{damping:18, stiffness:120}});
  const height = (value / maxValue) * 300 * Math.max(progress, 0);
  return (<div style={{width:100,textAlign:'center'}}>...</div>);
};

Rendered result example:

Render command

Show render command

npx remotion render src/index.jsx Histogram out-histogram.mp4