Remotion: Video with React!

 

 
 

A frame of the Remotion project written in this post - rendered using npx remotion still

Hi there! It has been a while since I've made my last post, and now I will share about an interesting library I found called Remotion - a library promising to "Create real MP4 videos using React".

Remotion is very simple to use. To begin learning, I'd recommend setting up and starting off with React (make sure to learn React JS, not React Native: there are two React types!).

Setup

Assuming you have NodeJS, you can open a terminal (I use PowerShell: it's better than Command Prompt) and type npm init video. Select a template (I use the JavaScript Hello World template) and project name, and wait until the command finishes (NOTE: It may ask to install the "create-video" package - just press enter to confirm the installation and proceed).

Once done, open a code editor on the created folder (I use VS Code - a cross-platform lightweight code editor), making sure the right plugin(s) are installed (if needed)! On VS Code, you may need to trust the folder before starting.

To test the code, type in npm start in the terminal - it will work similarly to a typical React development setup. Then, it'll open a browser to load a video previewer containing all compositions you have made (each composition is a single video to be rendered by Remotion) and show a nice hello world video. Keep this command running in the background - as any typical React development flow would - and then start to the next section, remembering to start the command each time you want to preview your video. Now we'll make a circle show as shown below:


 

Code

First, create two files called Circle.js and CircleShow.js - these are for one circle and a set of circles respectively. First we'll edit the Circle.js and continue on with CircleShow.js later on.

Coding an Individual Circle

To begin, import React for using JSX (the markup system of React):

import React from "react";

Then import the required things from Remotion (hooks and components):

import { useCurrentFrame, AbsoluteFill, useVideoConfig } from "remotion";

Then define and export our main circle component using functional components and arrow functions (not forgetting to accept input props):

export const Circle = ({ delay, x, y, maxOpacity, r, fill }) => {

I am using a feature called destructuring assignment. It is a feature allowing us to write code like this to extract certain object values without using any variables - a very handy tool to kow!

The input props are:

  1. delay - when the circle begins animating
  2. x - the x coordinate of the circle
  3. y - the y coordinate of the circle
  4. maxOpacity - the peak opacity of the circle (all circles have this set to 1)
  5. r - the radius of the circle
  6. fill - the fill color of the circle

Following that, extract video configurations from the useVideoConfig hook provided by Remotion, while also extracting the current frame using the useCurrentFrame hook:

const { fps, width, height } = useVideoConfig();
const frame = useCurrentFrame();

Afterwards, compute the opacity:

let opacity = 0; // The opacity relative to the maximum opacity
 
if (frame < delay) // If it is not yet the time for the circle to appear
  opacity = 0; // Make the circle invisible
else if (frame <= (delay + fps * 3)) // If the circle is supposed to be animating
  opacity = 1 - ((frame - delay) / (fps * 3)); // Animate the opacity
else opacity = 0; // If the circle is already done animating, set the opacity to 0
 
opacity *= maxOpacity; // Scale the opacity according to the maximum opacity

Finally, make the actual circle:

return (
  <AbsoluteFill>
    <svg height={height} width={width}>
      <circle cx={x} cy={y} opacity={opacity} r={r} fill={fill} />
    </svg>
  </AbsoluteFill>
)

There are quite some code here, but basically it means to center an SVG circle with x-coordinate x and y-coordinate y. The opacity is set to the opacity variable above, the radius is set to r, and the fill is set to the fill prop.

That's it for the individual circle!

Coding a circle show

To begin, import the necessary things as before:

import React, { useMemo } from "react";
import { random, useVideoConfig, AbsoluteFill } from "remotion";
import { Circle } from "./Circle";

Then, create the CircleShow function:

export const CircleShow = () => {

After that, extract the video configurations to be used:

const { durationInFrames, width, height } = useVideoConfig();

And define functions for a random hexadecimal character and a random 6-letter color code (respectively):

const randomChar = (id, pos) => {
  return "0123456789ABCDEF".charAt(Math.floor(random("color_" + pos + "_" + id) * 16));
}
 
const randomColor = (id) => {
  return `#${randomChar(id, 0)}${randomChar(id, 1)}${randomChar(id, 2)}${randomChar(id, 3)}${randomChar(id, 4)}${randomChar(id, 5)}`
}

As you may notice, I am using the Remotion random function. This utility function takes in a seed, making sure that the PRNG (PseudoRandom Number Generator) returns the same result wherever, whenever, and however we view the video - thus making it consistent everywhere. 

Then we initialize the data for each circle - using useMemo from React to optimize the code:

const setup = useMemo(() => new Array(300).fill(true).map((_, id) => {
  return {
    delay: random("delay_" + id) * durationInFrames,
    x: random("x_" + id) * width,
    y: random("y_" + id) * height,
    maxOpacity: 1,
    fill: randomColor(id),
    r: random("r_" + id) * 400,
    key: id,
  }
}), [])

Then we return the collection of circles:

return (
  <AbsoluteFill>
    {setup.map((i) => (<Circle {...i} />))}
  </AbsoluteFill>
)

Final Steps

Import the CircleShow.js file, replacing the imports in lines 2 and 3. Then, replace HelloWorld in line 13, and tweak the FPS, frames, and resolution to your needs (I settled with 25 FPS with 1500 frames to generate a 1 minute video). Remove the Composition component underneath, preview the video, and it's ready!

Rendering

Except that, the video isn't an actual video just yet. We need to render the video to get the real MP4 (or other format) files to share to other people. To do this, run the command npm run build, and wait until the build finishes. 

You can try passing the -- --gl=angle flag (the four hypens are not a typo!) to make the render faster by using your GPU, but it's not really that helpful in a simple use case like this. 3D rendering and things like that may benefit more from this, but it's a useful trick to know - in case it helps.

Then check the out directory, and the video is finally ready to view! You can check it out, share it, or do anything you like with it.

Summary

Remotion is a great library, and I personally would like to try and make some good videos using it. One side note still needs to be said about it's (ratherly unique) licence: if you are using Remotion for an organization with 4 or more people, you'll need to get a licence (see this). Overall, it's a very nice (and creative) way of using a web development tool to create video.

Popular posts from this blog

Flood Warning System using Arduino

Image
  The sensor system without casing Project Concept Since now it’s entering the raining season, flood risks would increase. Because of this, I want to make a simple system and demonstration to help detect early indications of flooding. This project is about making a simple flood warning system using Arduino Tools   Ultrasonic Sensor   The ultrasonic sensor is a sensor used to determine distance. It uses ultrasonic sound waves, which are sound waves whose frequencies exceed 20000 Hz (the highest frequency humans can hear) and thus we cannot hear the sound waves they produce. These sound waves are transmitted from the sensor's transmitter (in this case it is labelled with T). When the waves reach an object or obstacle, they are reflected, and the sensor's receiver (labelled R in this case) detects the signal. HC-SR04 ultrasonic sensor   The sensor has four pins, VCC, TRIG, ECHO, and GND. VCC and GND are commonly used names for power input and ground pin. The VCC pin is ...
Read more

Word Association Game - Behind the Scenes

Image
  This is a simple word association game. In this game there are 5 cards. Each card has four words, and two options. The task is simple: pick the word that is the most similar! One of the words is an antonym of the other, so once you know the meanings the difference should be stark. Pick the option by pressing one of the green buttons. A correct option increments the score, and an incorrect option decrements the score.   Note that you can pick both options for one card (so even if you get it wrong, just press the other one to return your lost score). The frontend is based on this video , but I have modified it to use AJAX calls to the API for random questions. The API is relatively simple: it picks randomly 5 questions from a dataset of thousands of questions, and then returns the chosen ones to the caller of the API. It is written in Django and Python. To compute the dataset, and making the API lighter and faster later on rather than computing it on-the-fly – which I’ve...
Read more