First of all lets begin by looking at what is Remotion exactly ?, well Remotion is a video editing tool but in the browser,what does this mean then?, Well it means that you can create a video while leveraging the power of programming , meaning you can can create a video programmatically with code inside the browser with ReactJs , cool isn't it ? , while leveraging the power of ReactJs it supports fast reloads so you can edit your video faster just like any React App you would write code,save and it refreshes while changing code.

Well you might ask why is this a cool thing? , we can just use any editing software , well Remotion supports server Rendering so imagine a scenario where a video gets served to a user based on the type of user he is or the type of country he comes from , Also Remotion leverages the Component Paradigm so it can be reused every where not having to edit the same thing over and over again , its just a Component after all, you can pass some Props to it and viola it works evry where , This follows a simple rule in your programming life which is Code once and distribute everywhere and not having to repeat yourself everytime.

Enough with the Talking lets dive into some actual code to see how this actually works?

Well Remotion has some basic Components and Hooks that you need to be aware of so it becomes easier later when we write some code, so what are those , let's First talk about the Components

Components

First We have the Composition Component

Copycopy code to clipboard
1<Composition
2  id="myVideo"
3  component={MyVideo}
4  durationInFrames={350}
5  fps={25}
6  width={1920}
7  height={1080}
8/>

As you can see it has 6 Props which is the id of the component to be rendered when we eventually build and render the video, the component itself , the duration in frames which is gonna be how long is your video based on the frames per second you specify, which is the fps prop, the width and the height are self explantory which are the width and height of your video.

A Composition Component is Just a like a layer in any editing software you can just organize the stuff you render as set of layers which are going to be rendered in a certain sequence if you look at this Picture you will notice we have 3 Compostions on the left Pane, which are the HelloWorld layer,logo layer , and Title , This is What you get when you first install Remotion , we will discuss how to install it later

Copycopy code to clipboard
1<Composition
2        id="HelloWorld"
3        component={HelloWorld}
4        durationInFrames={150}
5        fps={30}
6        width={1920}
7        height={1080}
8        defaultProps={{
9          titleText: "Welcome to Remotion",
10          titleColor: "black",
11        }}
12      />
13
14      <Composition
15        id="Logo"
16        component={Logo}
17        durationInFrames={200}
18        fps={30}
19        width={1920}
20        height={1080}
21      />
22      <Composition
23        id="Title"
24        component={Subtitle}
25        durationInFrames={100}
26        fps={30}
27        width={1920}
28        height={1080}
29      />

The next Important Component is the Sequence Component , Which is Basically the blue part in the Picture above , it defines the sequence of components to be rendered it has 2 props , which are the from and the duration in frames , the from prop specifies the number of the frame you want to start from and the duration in frames prop specifies for how many frames do you wish to render a certain component

Copycopy code to clipboard
1<Sequence from={0} durationInFrames={100}>
2  <Title title="Hi" />
3</Sequence>

This is going to render the title component starting from frame 0 for 100 frames .

Remember that the HelloWorld Component in the Composition above is going to be rendered for 150 frames, the Title is going to be rendered for 100 frames from that , meaning if we don't specifiy anything else , title is going to be rendered for a 100 frames and the rest will be empty. These are the most important 2 we are going to be mostly working with. the are Other Components you can Check out the documentation Documentation

Hooks

There are 2 Important ones we have to discuss:

useCurrentFrame

Copycopy code to clipboard
1import { useCurrentFrame } from "remotion";
2const frame = useCurrentFrame();

this just returns the current frame which is currently Playing in the video , this is very handy for animations which we will discuss also.

useVideoConfig

Copycopy code to clipboard
1import { useVideoConfig } from "remotion";
2const { fps, durationInFrames, width, height } = useVideoConfig();

this Returns the props specified in your compositin Component.

Animations

we have some animations from Remotion which can be used

spring

Copycopy code to clipboard
1import { useCurrentFrame, useVideoConfig, spring } from "remotion";
2const frame = useCurrentFrame();
3const { fps } = useVideoConfig();
4const scale = spring({
5  fps,
6  from: 0,
7  to: 1,
8  frame,
9});

now you can you this scale to animate some stuff with css

Copycopy code to clipboard
1import { useCurrentFrame, useVideoConfig, spring } from "remotion";
2
3export const MyVideo = () => {
4  const frame = useCurrentFrame();
5  const { fps } = useVideoConfig();
6
7  const scale = spring({
8    fps,
9    from: 0,
10    to: 1,
11    frame,
12  });
13
14  return (
15    <div
16      style={{
17        flex: 1,
18        justifyContent: "center",
19        alignItems: "center",
20      }}
21    >
22      <div style={{ transform: `scale(${scale})` }}>Hello World!</div>
23    </div>
24  );
25};

These are the most important stuff that will enable you to work with Remotion with ease if you grasp these concepts easily

Let's dive into writng our first video in Remotion

First you have to open your Terminal and type in

Copycopy code to clipboard
1npm init video

This will prompt you with a folder name and start installing dependencies , it may take a while to finish downloading the dependencies, don't exit if it takes long time , it will eventually finish.

When i first started with remotion 2 days ago , things were not working on windows so i had to do some workarounds to get it to work. but this works fine now and have tested it successfully.

now cd into your newly created folder and run

Copycopy code to clipboard
1npm start

this will start the development sever in localhost:3000 as any React App with an example video that shows the React Logo and asks you to edit stuff in Video.tsx file which is file containing the Composition Elements we talked about earlier.

Now lets Open this File and Comment on Everything there and start Creating our own Composition.

First let's Create our own Title.tsx in the src root folder,this will contain the Title Component we are going to create.

Copycopy code to clipboard
1export const Title: React.FC<{ title: string; style: Object }> = ({
2  title,
3  style,
4}) => {
5  return (
6    <div
7      style={{
8        display: "flex",
9        flex: 1,
10
11        fontSize: 200,
12        ...style,
13      }}
14    >
15      {title}
16    </div>
17  );
18};

This basically a Component Taking 2 Props which are the title as a string and the style object , you can overwrite those basic styles from the style prop as you like.

Now Lets Create myVideo.Tsx in the root src Folder. This will contain the video component which we will render in our Composition.

Copycopy code to clipboard
1export const MyVideo: React.FC = () => {
2  import {
3    interpolate,
4    Sequence,
5    spring,
6    useCurrentFrame,
7    useVideoConfig,
8  } from "remotion";
9
10  const { width, height, fps, durationInFrames } = useVideoConfig();
11  const frame = useCurrentFrame();
12  const scale = spring({
13    fps,
14    from: 0,
15    to: 1,
16    frame,
17  });
18  const translation = interpolate(
19    spring({
20      frame: frame - 25,
21      fps: videoConfig.fps,
22      config: {
23        damping: 100,
24        mass: 0.5,
25      },
26    }),
27    [0, 1],
28    [0, -150]
29  );
30  const opacity = interpolate(frame, [0, 20], [0, 1], {
31    extrapolateRight: "clamp",
32  });
33  const style = {
34    transform: ` scale(${scale}) translateY(${translation}px)`,
35    opacity: opacity,
36    justifyContent: "center",
37    alignItems: "center",
38  };
39  const hiStyle = {
40    transform: ` scale(${scale}) translateY(${translation}px)`,
41    opacity: opacity,
42    justifyContent: "center",
43    alignItems: "center",
44    marginTop: "-400px",
45  };
46  return (
47    <div style={{ flex: 1, backgroundColor: "white" }}>
48      <Sequence from={0} durationInFrames={100}>
49        <Title style={hiStyle} title="Hello 👋" />
50      </Sequence>
51      <Sequence from={0} durationInFrames={100}>
52        <Title style={style} title="World!" />
53      </Sequence>
54    </div>
55  );
56};

Wo Wo Slow Down , That's alot of code you wrote there 🤔 , do we actually understand what we just wrote? 😂, dont worry we will explain everything we just did .

it's actually Pretty simple, let's break down the code we wrote in chunks.

Copycopy code to clipboard
1const { width, height, fps, durationInFrames } = useVideoConfig();
2const frame = useCurrentFrame();
3const scale = spring({
4  fps,
5  from: 0,
6  to: 1,
7  frame,
8});
9const translation = interpolate(
10  spring({
11    frame: frame - 25,
12    fps: fps,
13    config: {
14      damping: 100,
15      mass: 0.5,
16    },
17  }),
18  [0, 1],
19  [0, -150]
20);
21const opacity = interpolate(frame, [0, 20], [0, 1], {
22  extrapolateRight: "clamp",
23});

let's talk about the weird stuff here , and actually explain what's going on here... remeber we talked about those hooks above so it's simple we want the fps and the frames from the two hooks imported from Remotion.

now what about the translation , opacity and the scale variables , and what is this weird interpolate function 🤔, we haven't covered it before.

interpolate takes the frame we are currently on, input range , and output range, which are the 2 arrays, and some config object. this means from interpolate we want from frame 0 to 20 and we want to change the opacity from 0 to 1 over those 20 frames meaning it will start as not showing and it will appear to full over those 20 frames we specified.

Translation is basically the same thing but notice here the input is a spring animation , the input range is 0 to 1 so want to make a spring animation go from zero to full and the output is moving up in the y-direction as we pass it to translateY() in the transform property.

scale is a spring animation that goes from zero to full.

Copycopy code to clipboard
1const style = {
2  transform: ` scale(${scale}) translateY(${translation}px)`,
3  opacity: opacity,
4  justifyContent: "center",
5  alignItems: "center",
6};
7const hiStyle = {
8  transform: ` scale(${scale}) translateY(${translation}px)`,
9  opacity: opacity,
10  justifyContent: "center",
11  alignItems: "center",
12  marginTop: "-400px",
13};

the first style which for the Hello title component is going to center everything scale to full in the spring animation we discussed above and is going to move upwards , so that the world title component shows up underneath it.

The Last thing is this part:

Copycopy code to clipboard
1return (
2    <div style={{ flex: 1, backgroundColor: "white" }}>
3      <Sequence from={0} durationInFrames={100}>
4        <Title style={hiStyle} title="Hello 👋" />
5      </Sequence>
6      <Sequence from={0} durationInFrames={100}>
7        <Title style={style} title="World!" />
8      </Sequence>
9    </div>
10  );
11};

We render a div and make its background color as white and remember the sequence starts from frame zero to 100 for both components but remember we set up our animations so that Hello appears first goes up and the world is rendered beneath it.

lets go to the Video.tsx and register a composition and give it the id myVideo and pass the myVideo compnent to it so we can see the action happening...

Copycopy code to clipboard
1import { Composition } from "remotion";
2import { MyVideo } from "./MyVideo";
3
4export const RemotionVideo: React.FC = () => {
5  return (
6    <>
7      <Composition
8        id="myVideo"
9        component={MyVideo}
10        durationInFrames={110}
11        fps={25}
12        width={1920}
13        height={1080}
14      />
15    </>
16  );
17};

you now have a simple working video , you can extend this to whatever you like , Remember always code once distribute everywhere...

the one last step is to render our video and get an output , this is where the hassle began with me,kept getting errors and i managed to solve it after reading the Remotion source code.....

Caveat in Windows

Remotion requires you to have ffmpeg binary installed on your system in order to render stuff out and have an output video that being said you need to go to the ffmpeg website and follow the instructions Download Link, well not all of it... navigate to the binary from the picture below..

you now have a zip file, extract it and rename it to FFmpeg and simply copy and paste it in your root c folder...

now you have to set an Environment Variable so the system knows you installed ffmpeg, how to do that?

1. Go to your pc desktop icon , hit right click and properties
2. on the left hit the Advanced system settings
3. go to Advanced on the bottom environment variables
4. search for the Path environment variable , hit edit,new and browse to the folder mentioned above in c>>FFmpeg>bin hit ok two time
5. restart your terminal and run the command ffmpeg -version it will give you some help options that means it works..

This alone will not be sufficient to render your video on windows cause it will error saying it can't find it despite having it show and installed...

This is what i found out from the source code the hard way that it uses the where command in your c>system32 folder and it's only accessible in that folder so you have to set an environment variable for that as well

do the same as above but instead navigate to c>>windows>system32 select the system32 folder and hit okay...

now restart your terminal and head over to the visual studio code or your editor and open the package.json file and edit the the helloWorld in the build script to whatever you set the id of your Composition Component.... In our case it was myVideo

so it looks something like this

Copycopy code to clipboard
1remotion render src/index.tsx myVideo out.mp4

out will be the name of your video

Finally open your terminal and run

Copycopy code to clipboard
1npm run build

This will Take a while to render your video .....

and Voila 😌 , Congratulations you have your first video rendered 😎 🤩

You can visit this link to see my code demo which i made

And As Always Thanks for reading and reaching to this Point,ARIGATO GOZAIMASU ありがと ございます