Making real MP4s with React: a PHP dev pokes at Remotion
I write PHP for a living. So the first time I watched a React component compile into an actual, shareable .mp4 file, my brain did a small double-take. That is what Remotion does, and I have spent a week poking at it out of pure curiosity.
These are field notes: what it is, how it works, where I would actually reach for it, and the licence detail you need to read before you get attached.
So what is Remotion?
Remotion is a framework, created by Jonny Burger, for making videos programmatically with React. You describe your frames as components, and it renders them into real, encoded video files — MP4, WebM, GIF or a PNG sequence. This is not a screen recording of a web page; it is a genuine video file at the end.
The mental model is refreshingly literal. A video is just a function of time. Each frame is your component rendered at one specific moment, and a hook tells you which moment that is.
How it turns components into video
Under the hood, Remotion renders each frame in headless Chromium and stitches the results together with FFmpeg. You define a Composition with its dimensions, frame rate and duration, then a component that reads the current frame. Here is about the smallest thing that counts as Remotion:
import { AbsoluteFill, useCurrentFrame } from "remotion";
export const MyComposition = () => {
const frame = useCurrentFrame();
return (
<AbsoluteFill
style={{
justifyContent: "center",
alignItems: "center",
fontSize: 100,
backgroundColor: "white",
}}
>
The current frame is {frame}.
</AbsoluteFill>
);
};
// Register it as a renderable video (src/Root.tsx)
<Composition
id="MyComposition"
durationInFrames={150}
fps={30}
width={1920}
height={1080}
component={MyComposition}
/>That durationInFrames={150} at fps={30} is a five-second clip. Change the maths inside the component — interpolate a value, add a spring, ease something in — and you have animation. It is all just numbers driven by useCurrentFrame().
The pieces you'll actually touch
- Studio — a local visual editor that stays in sync with your code, so you can scrub and tweak props without a manual rebuild loop.
- Player — a React component that embeds an interactive preview of a composition inside your own app.
- Lambda — serverless rendering on AWS, for when you need to render at volume without babysitting a machine.
- Render targets — locally, on your own server, serverless, or in the browser.
Where this is genuinely useful
The showcase demos are flashy, but the practical wins are the boring, repetitive jobs a human should never do by hand:
- Automated social clips from a template plus data — "top 5 this week", release notes, changelog videos.
- Personalised video at scale — year-in-review summaries, per-user recaps.
- Data-driven charts and explainers, where the numbers change but the layout does not.
- The newer angle: pointing a coding agent at a Remotion project and letting AI assemble the composition.
A video is just a function of time — and if you can express it as code, you can generate a thousand of them while you sleep.
The licence gotcha — read before you ship
This is the part that trips people up, so I will be blunt: Remotion is source-available, not open source. It is not MIT. The Free Licence covers individuals, non-profits, and for-profit companies with up to three employees, including commercial work. Hit four or more employees and you need a paid Company Licence — and if two teams collaborate, their combined headcount counts toward that threshold.
The paid side appears to split into a per-seat "Creators" plan and an "Automators" plan with a minimum monthly spend (it appears to be around $100/mo) for apps that render at scale. There was some early Hacker News friction over the model, and a few alternatives have sprung up in response, but the terms are at least stated plainly. For a solo blog like this one, I sit comfortably in the free tier. For your day job, count the heads before you fall in love with it.