#2 Library of the Week: Remotion

Remotion's premise is simple: "Write videos in React". I am here to reassure you - it is not just a gimmick. This unique video editing software is legit, and the fact that you have to program your videos can be turned into an advantage, not an obstacle.

I've never thought I will be making videos with React, but here we are. It's all thanks to the team from remotion.dev with Johnny Burger at the forefront.

They created a tool that enables you to write scenes that end up being rendered as an MP4 video. Within those scenes, you can perform any action that doesn't require a user's interaction, so: displaying animations, content, and so on. Before running a build, Remotion project is like a regular web app that can even fetch data.

Useful links:

The creators supply you with a bunch of helpers that simplify certain processes that would be a bit unusual for a web app (like playing music in the background or animating based on framerate) but are godsent for video editing. The most impressive, however, is the video preview tool it comes with. It looks like this:

Remotion preview tool

It enables you to browse scenes like you would do in my favorite DaVinci Resolve or any other video editing tool for that matter. But I am sure by now you want to see the code already, so let's get into it.

Remotion comes with a nice CLI you initialize by running npm init video. For further details, such as prerequisites​, I suggest following the documentation, but if the command went through for you, the rest is straightforward.

After choosing the template you want to use (there is even one with react-three-fiber!), the only thing you need to know is that you run Remotion in a development mode with npm start, and you use npm run build to export your project as an MP4.

You are welcomed with a bunch of pre-generated files that compose a set of scenes that is our video. What happens inside those scenes is completely up to you, because as the creators say it: "we'll give you a frame number and a blank canvas, and the freedom to render anything you want using React.js".

The first file you should pay attention to is src/Video.tsx, where our compositions live. A composition defines the framerate, the width and height of the video, and some other technical details. What's more interesting is a scene, where you can utilize the hooks provided by Remotion.

The ones that you will see the most often are useCurrentFrame and useVideoConfig. I combined the usage of them with helper functions spring and interpolate that helped me animate some CSS properties, and this resulted in:

// filename: src/Countdown.tsx
import { Sequence } from "remotion";
import { spring } from "remotion";
import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
import { styled } from "@stitches/react";
 
const Box = styled("div", {
  // ...
});
 
const Text = styled("h1", {
  // ...
});
 
export const Countdown = () => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();
 
  const opacity = interpolate(frame, [0, 20], [0, 1], {
    extrapolateRight: "clamp",
  });
 
  const scale = spring({
    fps: durationInFrames,
    from: 0,
    to: 2.5,
    frame,
  });
 
  const percentage =
    100 - ((durationInFrames - frame) / durationInFrames) * 100;
 
  const seconds = Math.floor((durationInFrames - 60 - frame) / 60);
 
  return (
    <div
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        height: "100%",
        width: "100%",
      }}
    >
      <Sequence from={0} durationInFrames={durationInFrames - 60}>
        <Box
          style={{
            backgroundColor: `hsla(360, ${percentage}%, 50%, 1)`,
          }}
        >
          <Text
            style={{
              opacity,
              transform: `scale(${scale})`,
            }}
          >
            {seconds}
          </Text>
        </Box>
      </Sequence>
      <Sequence from={durationInFrames - 60}>
        <Box
          style={{
            fontFamily: "Comic Sans MS",
            color: "pink",
            backgroundColor: "white",
            fontSize: "4rem",
          }}
        >
          <h1>please subscribe</h1>
        </Box>
      </Sequence>
    </div>
  );
};

This Countdown was then used in a composition in src/Video.tsx like so:

// filename: src/Video.tsx
import { Composition } from "remotion";
import { Countdown } from "./Countdown";
 
export const RemotionVideo: React.FC = () => {
  return (
    <>
      <Composition
        id="HelloWorld"
        component={Countdown}
        durationInFrames={360}
        fps={30}
        width={1280}
        height={720}
      />
    </>
  );
};

The result? Well, don't expect to pick your jaw from the floor, try to appreciate the simpleness and the aesthetics instead:

You don't have to take my word for it, but just know that it's possible to create more impressive videos with Remotion. While creating staggering animations is not something that comes easy to me, something else does: fantasizing. So let's fantasize about potential use-cases that only such a unique piece of software as Remotion fits:

  • Imagine that you are running some sort of a social platform and you want to welcome every registered user with a personalized video. You could set up a pipeline that would pass the targeted user's id to a script, that would then fetch the user's data and fill the video with it. So instead "Hello, stranger 👋", the video would say "Hello, Adrian 👋".

  • Imagine that you want to surprise your partner with a unique video every day, with a random joke, a weather forecast, and a picture of a cute 🐱.

Thanks to Remotion, if you know how to build such a website, you also know how to record a video like that.