Learn how to produce video content programmatically with HTML, CSS, and JavaScript thanks to Remotion - a React library that can create real MP4 videos https://github.com/remotion-dev/remotion

#javascript #tech #tutorial

🔗 Resources

Subscribe to  @wcandillon  and  @JonnyBurger  for more awesome content. 

Source Code https://github.com/wcandillon/remotion-fireship
Remotion Docs https://www.remotion.dev/
SVG in 100 Seconds https://youtu.be/emFMHH2Bfvo

📚 Chapters

00:00 This Intro is 100% Code
00:58 Introducing Remotion
01:49 Code your First Video
04:06 Make it Rain with Animated SVGs
07:50 Render as MP4

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- How to make MP4 videos with code
- Remotion basics tutorial
- Video animation basic concepts
- Make videos with React.js
- Ways to create video programmatically
2024-02-04T13:40:27.890Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
3a61d36a-eb48-47c4-8eff-ad5ae003c36e
35239840d15078a2d192ca74a65bef3863764760eaae7e2276e4973e3e14336e
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Today's video is made different.
I threw away all my fancy editing tools like Adobe Premiere and After Effects, and instead did all the editing with JavaScript code thanks to a tool called Remotion, which allows you to create video content programmatically with React.
When you think about it, a video is just a function of images over time.
Every second, we might render 60 still images or frames, each one changing slightly to create an animation.
React is a great tool for describing UIs that change overtime.
So why not use it to describe video content as well?
That's the idea behind Remotion, which opens the door for web developers to storyify their data.
For example, you might use a weather API to fetch the local weather forecast, then use Remotion to animate a video out of that data.
If it's raining, show some raindrops.
A If it's cloudy, make some clouds float by.
And if there's a tornado, show the entire town being destroyed.
By the end of this tutorial, you'll know how to create your own custom data even videos from scratch using nothing but JavaScript and Remotion.
If you're new here, like and subscribe, and check out the full source code on GitHub.
Before we jump into the code for this project, I want to give a huge shout out to William Candione.
He put together the code for this video and has an awesome YouTube channel that you should definitely be subscribed to.
And respect to Johnny Burger, the creator of Remotion.
This tutorial is unlike anything else out there, and by the end of it, you'll be able to add video editor to your resume.
And you might be surprised at how easy it really is to create videos with React once you understand the fundamentals of video animation.
If you go to GitHub and clone the project, it'll pull up a browser window that allows you to scrub through the entire timeline of the intro that you just watched.
And you can modify it using HTML, CSS, and JavaScript.
What I'm going to show you in this video is how to recreate the weather scene from scratch.
H to follow along and create your own video right now, run NPM init video from the terminal to initialize Remotion.
It provides a variety of different templates to start with.
My goal is to show you the 6 step by step, so I'm going to choose a blank TypeScript template.
The first place we'll go is the video dot tsx file, which contains a Remotion video component.
Think of this component as your entire video.
Now, a video is made up of 1 or more compositions.
Remotion allows you to visualize these compositions in the browser by running npm start.
You'll notice in the full project that we have a bunch of different compositions here in the sidebar.
These are like their own little mini videos that allow you to isolate and inspect each scene in the video.
Now back in the code, you'll notice a composition has a variety of different props.
It has an ID to identify it in the video player, but more importantly, it references a React component that contains the actual UI that you want to show.
Before we get to that point though, we'll need to determine the resolution for the video, which I'm setting to 10 80 by 1920 to give us a portrait, and also the duration.
The duration is the number of frames that will be rendered for the scene.
A frame is basically just a still image at a given point in the video.
Now the actual length in seconds will be based on the frames per second.
If we do a 120 frames at 30 FPS, that'll give us a video length of 4 seconds.
Now, let's go ahead and shift our attention over to the composition file.
This is where we'll define the actual graphics for our video.
Inside the component, we have a div with the text of hello world.
Now, we can style it with CSS using inline styles here.
Using inline styles allows us to modify them programmatically.
Now, if you open the video player, you should see a 4 second long scene that says, hello world.
That's pretty cool, but also extremely boring.
How do we make the video do something cool.
Remotion provides a variety of different hooks to provide data about the video.
With use video config, we can grab data about the FPS, duration, and resolution.
And we can use that data to calculate values for our animations, or as I'm doing here, display it directly in the video content.
But more importantly for animation, the use current frame hook will give us the current frame in the timeline.
Remember, this react component will be re rendered for each frame in video.
We can use the current frame to calculate a slight difference between each frame to create an animation.
Here's an example of how you might create a fade annotation.
Let's define a variable for opacity as the current frame divided by the total duration in frames.
That'll give us an opacity that starts at 0 and gradually increases to 1 over the duration of the video.
Now we can use it as the opacity value in the CSS, and the end result is a linear fade in animation when we preview it in the browser.
Pretty simple, but Remotion has a bunch of other powerful features baked into it.
What I wanna do next is integrate an SVG graphic into the composition.
I'm creating a new component that will be a map of France, and in the JSX, I'm simply pasting an SVG EG graphic that I found on the Internet.
And the cool thing about SVG is that we can use and modify its source code directly inside our JavaScript, script.
Unlike a PNG or JPEG file, you can find the SVG code on GitHub or experiment with one of your own SVG graphics.
Now to make our lives easier, Remotion provides a bunch of helper components and functions.
One of which is absolute fill.
This component will absolutely position the child so you don't have to manually configure all these CSS properties.
8.
Now, I am going to add some additional alignment and padding to position it right in the center, and then we can simply import this component into our composition and declare it there.
That graphic should now appear in the video.
That's pretty cool, but now let's take things a step further and do some actual SVG animation.
You'll notice in the full demo that a bunch of raindrops randomly animate in from top to bottom.
This effect is accomplished with a single raindrop SVG.
Let's first create a new component called raindrop.
Inside of it, I'm adding an SVG graphic of a single raindrop to the JSX.
The SVG will have a variety of dynamic styles.
We can use transform to give each raindrop a slightly different size, but more importantly, will animate the absolute position of it like left and top to move it from top to bottom.
But the real question here is where do these values AceComeFrom.
Some of them will come in from the parent via props, like the delay, x position, and size.
We will randomize these use in the next step.
The tricky part is making a raindrop go from top to bottom.
For that, we'll need to interpolate the top position.
That sounds like it might require some fancy a math.
Luckily, Remotion has our back here with an interpolate helper function.
In our case, we provide it with the frame minus the delay, then an input range and output range.
8 inch.
The output range is the actual top position, which will start off the screen at 0.2 on the y axis, and then animate to the bottom off the screen at 1.1 on the y a axis.
That'll get the job done, but we can make our animation even more realistic by making it kind of bouncy and gooey, because Remotion also has a primitive called spring to add spring physics to your animations.
To use it, we'll create a variable called drop that calls the spring function.
It takes the frames per second, as well as the frame minus delay as arguments.
And you can customize the springiness with damping and stiffness.
Using that as the interpolate input will give us a more interesting effect.
That takes care of 1 raindrop.
Now, the question becomes, how do we randomly animate 100 or millions of raindrops at the same time?
To handle that, we'll create another component a called rain.
Inside of it, we'll start by defining a variable called drops that contains 300 true values in it.
Each value represents one raindrop.
What we wanna do is randomize the x position, delay, and size of each raindrop.
Let's map each value in the ray to an object of those values.
And once again, Remotion helps us out here by providing a random helper that can generate random values with a seed, which means you'll get the same random value given the same seed.
That takes care of the randomization.
Now one extra step we wanna take here is to wrap this function and use a memo with react, and pass it an empty array as the dependency.
Because we only want to run this function once when that component is first initial a.
Remember, it will rerender for every frame in the video, and we don't need to recalculate on every frame.
Now, in the JSX, we'll use the absolute fill component and then map over the raindrop array to display each individual raindrop and pass it the required props.
And that's all it takes to make it rain.
Let's go ahead and take the rain component and declare it in our composition, and then preview it in the browser.
That should give you an end result that looks something like this.
That's pretty awesome, but in the full demo, we have additional weather animations like clouds and tornadoes, and they're rendered conditionally based on actual weather data that comes from an API.
That's pretty cool, but now let's render it to a real MP 4 video that we can upload to TikTok or YouTube.
You'll first need to have FFmpeg installed on your system.
From there, if you go into the package JSON file, you'll notice a build script.
It contains the input and output files as well as the ID of your composition.
You'll wanna make sure that matches whatever composition ID you've chosen.
Now go ahead and run npm run build from the terminal, and it will render out your code to the out directory as an MP 84 file.
Congratulations, you just made a video with React.
What I find so cool about this is that it provides a really nice way to generate videos programmatically based on some kind of underlying data source.
A My plan is to connect it to GPT 3 along with the Giphy SDK to automatically write, produce and edit all my future YouTube videos.
A.
I'm gonna go ahead and wrap things up there.
Give Remotion a star on GitHub, and let's see if we can get them past 10 k.
Thanks for watching, and I will see you in the next one.

Speaker 0: Today's video is made different. I threw away all my fancy editing tools like Adobe Premiere and After Effects, and instead did all the editing with JavaScript code thanks to a tool called Remotion, which allows you to create video content programmatically with React. When you think about it, a video is just a function of images over time. Every second, we might render 60 still images or frames, each one changing slightly to create an animation. React is a great tool for describing UIs that change overtime.

So why not use it to describe video content as well? That's the idea behind Remotion, which opens the door for web developers to storyify their data. For example, you might use a weather API to fetch the local weather forecast, then use Remotion to animate a video out of that data. If it's raining, show some raindrops. A If it's cloudy, make some clouds float by.

And if there's a tornado, show the entire town being destroyed. By the end of this tutorial, you'll know how to create your own custom data even videos from scratch using nothing but JavaScript and Remotion. If you're new here, like and subscribe, and check out the full source code on GitHub. Before we jump into the code for this project, I want to give a huge shout out to William Candione. He put together the code for this video and has an awesome YouTube channel that you should definitely be subscribed to.

And respect to Johnny Burger, the creator of Remotion. This tutorial is unlike anything else out there, and by the end of it, you'll be able to add video editor to your resume. And you might be surprised at how easy it really is to create videos with React once you understand the fundamentals of video animation. If you go to GitHub and clone the project, it'll pull up a browser window that allows you to scrub through the entire timeline of the intro that you just watched. And you can modify it using HTML, CSS, and JavaScript.

What I'm going to show you in this video is how to recreate the weather scene from scratch. H to follow along and create your own video right now, run NPM init video from the terminal to initialize Remotion. It provides a variety of different templates to start with. My goal is to show you the 6 step by step, so I'm going to choose a blank TypeScript template. The first place we'll go is the video dot tsx file, which contains a Remotion video component.

Think of this component as your entire video. Now, a video is made up of 1 or more compositions. Remotion allows you to visualize these compositions in the browser by running npm start. You'll notice in the full project that we have a bunch of different compositions here in the sidebar. These are like their own little mini videos that allow you to isolate and inspect each scene in the video.

Now back in the code, you'll notice a composition has a variety of different props. It has an ID to identify it in the video player, but more importantly, it references a React component that contains the actual UI that you want to show. Before we get to that point though, we'll need to determine the resolution for the video, which I'm setting to 10 80 by 1920 to give us a portrait, and also the duration. The duration is the number of frames that will be rendered for the scene. A frame is basically just a still image at a given point in the video.

Now the actual length in seconds will be based on the frames per second. If we do a 120 frames at 30 FPS, that'll give us a video length of 4 seconds. Now, let's go ahead and shift our attention over to the composition file. This is where we'll define the actual graphics for our video. Inside the component, we have a div with the text of hello world.

Now, we can style it with CSS using inline styles here. Using inline styles allows us to modify them programmatically. Now, if you open the video player, you should see a 4 second long scene that says, hello world. That's pretty cool, but also extremely boring. How do we make the video do something cool.

Remotion provides a variety of different hooks to provide data about the video. With use video config, we can grab data about the FPS, duration, and resolution. And we can use that data to calculate values for our animations, or as I'm doing here, display it directly in the video content. But more importantly for animation, the use current frame hook will give us the current frame in the timeline. Remember, this react component will be re rendered for each frame in video.

We can use the current frame to calculate a slight difference between each frame to create an animation. Here's an example of how you might create a fade annotation. Let's define a variable for opacity as the current frame divided by the total duration in frames. That'll give us an opacity that starts at 0 and gradually increases to 1 over the duration of the video. Now we can use it as the opacity value in the CSS, and the end result is a linear fade in animation when we preview it in the browser.

Pretty simple, but Remotion has a bunch of other powerful features baked into it. What I wanna do next is integrate an SVG graphic into the composition. I'm creating a new component that will be a map of France, and in the JSX, I'm simply pasting an SVG EG graphic that I found on the Internet. And the cool thing about SVG is that we can use and modify its source code directly inside our JavaScript, script. Unlike a PNG or JPEG file, you can find the SVG code on GitHub or experiment with one of your own SVG graphics.

Now to make our lives easier, Remotion provides a bunch of helper components and functions. One of which is absolute fill. This component will absolutely position the child so you don't have to manually configure all these CSS properties. 8. Now, I am going to add some additional alignment and padding to position it right in the center, and then we can simply import this component into our composition and declare it there.

That graphic should now appear in the video. That's pretty cool, but now let's take things a step further and do some actual SVG animation. You'll notice in the full demo that a bunch of raindrops randomly animate in from top to bottom. This effect is accomplished with a single raindrop SVG. Let's first create a new component called raindrop.

Inside of it, I'm adding an SVG graphic of a single raindrop to the JSX. The SVG will have a variety of dynamic styles. We can use transform to give each raindrop a slightly different size, but more importantly, will animate the absolute position of it like left and top to move it from top to bottom. But the real question here is where do these values AceComeFrom. Some of them will come in from the parent via props, like the delay, x position, and size.

We will randomize these use in the next step. The tricky part is making a raindrop go from top to bottom. For that, we'll need to interpolate the top position. That sounds like it might require some fancy a math. Luckily, Remotion has our back here with an interpolate helper function.

In our case, we provide it with the frame minus the delay, then an input range and output range. 8 inch. The output range is the actual top position, which will start off the screen at 0.2 on the y axis, and then animate to the bottom off the screen at 1.1 on the y a axis. That'll get the job done, but we can make our animation even more realistic by making it kind of bouncy and gooey, because Remotion also has a primitive called spring to add spring physics to your animations. To use it, we'll create a variable called drop that calls the spring function.

It takes the frames per second, as well as the frame minus delay as arguments. And you can customize the springiness with damping and stiffness. Using that as the interpolate input will give us a more interesting effect. That takes care of 1 raindrop. Now, the question becomes, how do we randomly animate 100 or millions of raindrops at the same time?

To handle that, we'll create another component a called rain. Inside of it, we'll start by defining a variable called drops that contains 300 true values in it. Each value represents one raindrop. What we wanna do is randomize the x position, delay, and size of each raindrop. Let's map each value in the ray to an object of those values.

And once again, Remotion helps us out here by providing a random helper that can generate random values with a seed, which means you'll get the same random value given the same seed. That takes care of the randomization. Now one extra step we wanna take here is to wrap this function and use a memo with react, and pass it an empty array as the dependency. Because we only want to run this function once when that component is first initial a. Remember, it will rerender for every frame in the video, and we don't need to recalculate on every frame.

Now, in the JSX, we'll use the absolute fill component and then map over the raindrop array to display each individual raindrop and pass it the required props. And that's all it takes to make it rain. Let's go ahead and take the rain component and declare it in our composition, and then preview it in the browser. That should give you an end result that looks something like this. That's pretty awesome, but in the full demo, we have additional weather animations like clouds and tornadoes, and they're rendered conditionally based on actual weather data that comes from an API.

That's pretty cool, but now let's render it to a real MP 4 video that we can upload to TikTok or YouTube. You'll first need to have FFmpeg installed on your system. From there, if you go into the package JSON file, you'll notice a build script. It contains the input and output files as well as the ID of your composition. You'll wanna make sure that matches whatever composition ID you've chosen.

Now go ahead and run npm run build from the terminal, and it will render out your code to the out directory as an MP 84 file. Congratulations, you just made a video with React. What I find so cool about this is that it provides a really nice way to generate videos programmatically based on some kind of underlying data source. A My plan is to connect it to GPT 3 along with the Giphy SDK to automatically write, produce and edit all my future YouTube videos. A.

I'm gonna go ahead and wrap things up there. Give Remotion a star on GitHub, and let's see if we can get them past 10 k. Thanks for watching, and I will see you in the next one.
Today's video is made different. I threw away all my fancy editing tools like Adobe Premiere and After Effects, and instead did all the editing with JavaScript code thanks to a tool called Remotion, which allows you to create video content programmatically with React. When you think about it, a video is just a function of images over time. Every second, we might render 60 still images or frames, each one changing slightly to create an animation. React is a great tool for describing UIs that change overtime. So why not use it to describe video content as well?
youtube
video gaming
multimedia
animation
graphic design
That's the idea behind Remotion, which opens the door for web developers to storyify their data.
For example, you might use a weather API to fetch the local weather forecast, then use Remotion to animate a video out of that data. If it's raining, show some raindrops. A If it's cloudy, make some clouds float by. And if there's a tornado, show the entire town being destroyed. By the end of this tutorial, you'll know how to create your own custom data even videos from scratch using nothing but JavaScript and Remotion.
weather
climate science
meteorology
streaming
If you're new here, like and subscribe, and check out the full source code on GitHub. Before we jump into the code for this project, I want to give a huge shout out to William Candione.
He put together the code for this video and has an awesome YouTube channel that you should definitely be subscribed to. And respect to Johnny Burger, the creator of Remotion. This tutorial is unlike anything else out there, and by the end of it, you'll be able to add video editor to your resume. And you might be surprised at how easy it really is to create videos with React once you understand the fundamentals of video animation. If you go to GitHub and clone the project, it'll pull up a browser window that allows you to scrub through the entire timeline of the intro that you just watched. And you can modify it using HTML, CSS, and JavaScript. What I'm going to show you in this video is how to recreate the weather scene from scratch.
animation
youtube
video gaming
multimedia
H to follow along and create your own video right now, run NPM init video from the terminal to initialize Remotion. It provides a variety of different templates to start with. My goal is to show you the 6 step by step, so I'm going to choose a blank TypeScript template. The first place we'll go is the video dot tsx file, which contains a Remotion video component. Think of this component as your entire video. Now, a video is made up of 1 or more compositions. Remotion allows you to visualize these compositions in the browser by running npm start. You'll notice in the full project that we have a bunch of different compositions here in the sidebar. These are like their own little mini videos that allow you to isolate and inspect each scene in the video. Now back in the code, you'll notice a composition has a variety of different props. It has an ID to identify it in the video player, but more importantly, it references a React component that contains the actual UI that you want to show. Before we get to that point though, we'll need to determine the resolution for the video, which I'm setting to 10 80 by 1920 to give us a portrait, and also the duration.
multimedia
visualization
streaming
youtube
graphic design
video gaming
crafts
animation
The duration is the number of frames that will be rendered for the scene. A frame is basically just a still image at a given point in the video.
Now the actual length in seconds will be based on the frames per second. If we do a 120 frames at 30 FPS, that'll give us a video length of 4 seconds. Now, let's go ahead and shift our attention over to the composition file. This is where we'll define the actual graphics for our video. Inside the component, we have a div with the text of hello world. Now, we can style it with CSS using inline styles here. Using inline styles allows us to modify them programmatically. Now, if you open the video player, you should see a 4 second long scene that says, hello world. That's pretty cool, but also extremely boring. How do we make the video do something cool. Remotion provides a variety of different hooks to provide data about the video. With use video config, we can grab data about the FPS, duration, and resolution. And we can use that data to calculate values for our animations, or as I'm doing here, display it directly in the video content. But more importantly for animation, the use current frame hook will give us the current frame in the timeline. Remember, this react component will be re rendered for each frame in video. We can use the current frame to calculate a slight difference between each frame to create an animation. Here's an example of how you might create a fade annotation. Let's define a variable for opacity as the current frame divided by the total duration in frames. That'll give us an opacity that starts at 0 and gradually increases to 1 over the duration of the video.
graphic design
animation
streaming
multimedia
video gaming
visualization
youtube
fashion
Now we can use it as the opacity value in the CSS, and the end result is a linear fade in animation when we preview it in the browser. Pretty simple, but Remotion has a bunch of other powerful features baked into it. What I wanna do next is integrate an SVG graphic into the composition. I'm creating a new component that will be a map of France, and in the JSX, I'm simply pasting an SVG EG graphic that I found on the Internet. And the cool thing about SVG is that we can use and modify its source code directly inside our JavaScript, script.
animation
visualization
graphic design
Unlike a PNG or JPEG file, you can find the SVG code on GitHub or experiment with one of your own SVG graphics. Now to make our lives easier, Remotion provides a bunch of helper components and functions. One of which is absolute fill. This component will absolutely position the child so you don't have to manually configure all these CSS properties.
8. Now, I am going to add some additional alignment and padding to position it right in the center, and then we can simply import this component into our composition and declare it there. That graphic should now appear in the video. That's pretty cool, but now let's take things a step further and do some actual SVG animation. You'll notice in the full demo that a bunch of raindrops randomly animate in from top to bottom. This effect is accomplished with a single raindrop SVG.
animation
graphic design
geometry
visualization
Let's first create a new component called raindrop. Inside of it, I'm adding an SVG graphic of a single raindrop to the JSX. The SVG will have a variety of dynamic styles.
We can use transform to give each raindrop a slightly different size, but more importantly, will animate the absolute position of it like left and top to move it from top to bottom. But the real question here is where do these values AceComeFrom. Some of them will come in from the parent via props, like the delay, x position, and size.
geometry
We will randomize these use in the next step. The tricky part is making a raindrop go from top to bottom. For that, we'll need to interpolate the top position. That sounds like it might require some fancy a math. Luckily, Remotion has our back here with an interpolate helper function. In our case, we provide it with the frame minus the delay, then an input range and output range.
8 inch. The output range is the actual top position, which will start off the screen at 0.2 on the y axis, and then animate to the bottom off the screen at 1.1 on the y a axis. That'll get the job done, but we can make our animation even more realistic by making it kind of bouncy and gooey, because Remotion also has a primitive called spring to add spring physics to your animations. To use it, we'll create a variable called drop that calls the spring function. It takes the frames per second, as well as the frame minus delay as arguments. And you can customize the springiness with damping and stiffness. Using that as the interpolate input will give us a more interesting effect.
animation
spring
graphic design
geometry
robotics
That takes care of 1 raindrop. Now, the question becomes, how do we randomly animate 100 or millions of raindrops at the same time? To handle that, we'll create another component a called rain. Inside of it, we'll start by defining a variable called drops that contains 300 true values in it. Each value represents one raindrop. What we wanna do is randomize the x position, delay, and size of each raindrop. Let's map each value in the ray to an object of those values. And once again, Remotion helps us out here by providing a random helper that can generate random values with a seed, which means you'll get the same random value given the same seed. That takes care of the randomization. Now one extra step we wanna take here is to wrap this function and use a memo with react, and pass it an empty array as the dependency. Because we only want to run this function once when that component is first initial a. Remember, it will rerender for every frame in the video, and we don't need to recalculate on every frame. Now, in the JSX, we'll use the absolute fill component and then map over the raindrop array to display each individual raindrop and pass it the required props.
And that's all it takes to make it rain. Let's go ahead and take the rain component and declare it in our composition, and then preview it in the browser. That should give you an end result that looks something like this. That's pretty awesome, but in the full demo, we have additional weather animations like clouds and tornadoes, and they're rendered conditionally based on actual weather data that comes from an API. That's pretty cool, but now let's render it to a real MP 4 video that we can upload to TikTok or YouTube. You'll first need to have FFmpeg installed on your system. From there, if you go into the package JSON file, you'll notice a build script. It contains the input and output files as well as the ID of your composition.
weather
animation
multimedia
video gaming
streaming
climate science
youtube
You'll wanna make sure that matches whatever composition ID you've chosen. Now go ahead and run npm run build from the terminal, and it will render out your code to the out directory as an MP 84 file. Congratulations, you just made a video with React. What I find so cool about this is that it provides a really nice way to generate videos programmatically based on some kind of underlying data source. A My plan is to connect it to GPT 3 along with the Giphy SDK to automatically write, produce and edit all my future YouTube videos. A. I'm gonna go ahead and wrap things up there. Give Remotion a star on GitHub, and let's see if we can get them past 10 k.
youtube
software development
video gaming
programming
streaming
multimedia
Thanks for watching, and I will see you in the next one.
Today's video is made different. I threw away all my fancy editing tools like Adobe Premiere and After Effects, and instead did all the editing with JavaScript code thanks to a tool called Remotion, which allows you to create video content programmatically with React. When you think about it, a video is just a function of images over time. Every second, we might render 60 still images or frames, each one changing slightly to create an animation. React is a great tool for describing UIs that change overtime. So why not use it to describe video content as well? That's the idea behind Remotion, which opens the door for web developers to storyify their data. For example, you might use a weather API to fetch the local weather forecast, then use Remotion to animate a video out of that data. If it's raining, show some raindrops. A If it's cloudy, make some clouds float by. And if there's a tornado, show the entire town being destroyed. By the end of this tutorial, you'll know how to create your own custom data even videos from scratch using nothing but JavaScript and Remotion. If you're new here, like and subscribe, and check out the full source code on GitHub. Before we jump into the code for this project, I want to give a huge shout out to William Candione. He put together the code for this video and has an awesome YouTube channel that you should definitely be subscribed to. And respect to Johnny Burger, the creator of Remotion. This tutorial is unlike anything else out there, and by the end of it, you'll be able to add video editor to your resume. And you might be surprised at how easy it really is to create videos with React once you understand the fundamentals of video animation. If you go to GitHub and clone the project, it'll pull up a browser window that allows you to scrub through the entire timeline of the intro that you just watched. And you can modify it using HTML, CSS, and JavaScript. What I'm going to show you in this video is how to recreate the weather scene from scratch. H to follow along and create your own video right now, run NPM init video from the terminal to initialize Remotion. It provides a variety of different templates to start with. My goal is to show you the 6 step by step, so I'm going to choose a blank TypeScript template. The first place we'll go is the video dot tsx file, which contains a Remotion video component. Think of this component as your entire video. Now, a video is made up of 1 or more compositions. Remotion allows you to visualize these compositions in the browser by running npm start. You'll notice in the full project that we have a bunch of different compositions here in the sidebar. These are like their own little mini videos that allow you to isolate and inspect each scene in the video. Now back in the code, you'll notice a composition has a variety of different props. It has an ID to identify it in the video player, but more importantly, it references a React component that contains the actual UI that you want to show. Before we get to that point though, we'll need to determine the resolution for the video, which I'm setting to 10 80 by 1920 to give us a portrait, and also the duration. The duration is the number of frames that will be rendered for the scene. A frame is basically just a still image at a given point in the video. Now the actual length in seconds will be based on the frames per second. If we do a 120 frames at 30 FPS, that'll give us a video length of 4 seconds. Now, let's go ahead and shift our attention over to the composition file. This is where we'll define the actual graphics for our video. Inside the component, we have a div with the text of hello world. Now, we can style it with CSS using inline styles here. Using inline styles allows us to modify them programmatically. Now, if you open the video player, you should see a 4 second long scene that says, hello world. That's pretty cool, but also extremely boring. How do we make the video do something cool. Remotion provides a variety of different hooks to provide data about the video. With use video config, we can grab data about the FPS, duration, and resolution. And we can use that data to calculate values for our animations, or as I'm doing here, display it directly in the video content. But more importantly for animation, the use current frame hook will give us the current frame in the timeline. Remember, this react component will be re rendered for each frame in video. We can use the current frame to calculate a slight difference between each frame to create an animation. Here's an example of how you might create a fade annotation. Let's define a variable for opacity as the current frame divided by the total duration in frames. That'll give us an opacity that starts at 0 and gradually increases to 1 over the duration of the video. Now we can use it as the opacity value in the CSS, and the end result is a linear fade in animation when we preview it in the browser. Pretty simple, but Remotion has a bunch of other powerful features baked into it. What I wanna do next is integrate an SVG graphic into the composition. I'm creating a new component that will be a map of France, and in the JSX, I'm simply pasting an SVG EG graphic that I found on the Internet. And the cool thing about SVG is that we can use and modify its source code directly inside our JavaScript, script. Unlike a PNG or JPEG file, you can find the SVG code on GitHub or experiment with one of your own SVG graphics. Now to make our lives easier, Remotion provides a bunch of helper components and functions. One of which is absolute fill. This component will absolutely position the child so you don't have to manually configure all these CSS properties. 8. Now, I am going to add some additional alignment and padding to position it right in the center, and then we can simply import this component into our composition and declare it there. That graphic should now appear in the video. That's pretty cool, but now let's take things a step further and do some actual SVG animation. You'll notice in the full demo that a bunch of raindrops randomly animate in from top to bottom. This effect is accomplished with a single raindrop SVG. Let's first create a new component called raindrop. Inside of it, I'm adding an SVG graphic of a single raindrop to the JSX. The SVG will have a variety of dynamic styles. We can use transform to give each raindrop a slightly different size, but more importantly, will animate the absolute position of it like left and top to move it from top to bottom. But the real question here is where do these values AceComeFrom. Some of them will come in from the parent via props, like the delay, x position, and size. We will randomize these use in the next step. The tricky part is making a raindrop go from top to bottom. For that, we'll need to interpolate the top position. That sounds like it might require some fancy a math. Luckily, Remotion has our back here with an interpolate helper function. In our case, we provide it with the frame minus the delay, then an input range and output range. 8 inch. The output range is the actual top position, which will start off the screen at 0.2 on the y axis, and then animate to the bottom off the screen at 1.1 on the y a axis. That'll get the job done, but we can make our animation even more realistic by making it kind of bouncy and gooey, because Remotion also has a primitive called spring to add spring physics to your animations. To use it, we'll create a variable called drop that calls the spring function. It takes the frames per second, as well as the frame minus delay as arguments. And you can customize the springiness with damping and stiffness. Using that as the interpolate input will give us a more interesting effect. That takes care of 1 raindrop. Now, the question becomes, how do we randomly animate 100 or millions of raindrops at the same time? To handle that, we'll create another component a called rain. Inside of it, we'll start by defining a variable called drops that contains 300 true values in it. Each value represents one raindrop. What we wanna do is randomize the x position, delay, and size of each raindrop. Let's map each value in the ray to an object of those values. And once again, Remotion helps us out here by providing a random helper that can generate random values with a seed, which means you'll get the same random value given the same seed. That takes care of the randomization. Now one extra step we wanna take here is to wrap this function and use a memo with react, and pass it an empty array as the dependency. Because we only want to run this function once when that component is first initial a. Remember, it will rerender for every frame in the video, and we don't need to recalculate on every frame. Now, in the JSX, we'll use the absolute fill component and then map over the raindrop array to display each individual raindrop and pass it the required props. And that's all it takes to make it rain. Let's go ahead and take the rain component and declare it in our composition, and then preview it in the browser. That should give you an end result that looks something like this. That's pretty awesome, but in the full demo, we have additional weather animations like clouds and tornadoes, and they're rendered conditionally based on actual weather data that comes from an API. That's pretty cool, but now let's render it to a real MP 4 video that we can upload to TikTok or YouTube. You'll first need to have FFmpeg installed on your system. From there, if you go into the package JSON file, you'll notice a build script. It contains the input and output files as well as the ID of your composition. You'll wanna make sure that matches whatever composition ID you've chosen. Now go ahead and run npm run build from the terminal, and it will render out your code to the out directory as an MP 84 file. Congratulations, you just made a video with React. What I find so cool about this is that it provides a really nice way to generate videos programmatically based on some kind of underlying data source. A My plan is to connect it to GPT 3 along with the Giphy SDK to automatically write, produce and edit all my future YouTube videos. A. I'm gonna go ahead and wrap things up there. Give Remotion a star on GitHub, and let's see if we can get them past 10 k. Thanks for watching, and I will see you in the next one.
Today's
today's
video
video
is
is
made
made
different.
different
I
i
threw
threw
away
away
all
all
my
my
fancy
fancy
editing
editing
tools
tools
like
like
Adobe
adobe
Premiere
premiere
and
and
After
after
Effects,
effects
and
and
instead
instead
did
did
all
all
the
the
editing
editing
with
with
JavaScript
javascript
code
code
thanks
thanks
to
to
a
a
tool
tool
called
called
Remotion,
remotion
which
which
allows
allows
you
you
to
to
create
create
video
video
content
content
programmatically
programmatically
with
with
React.
react
When
when
you
you
think
think
about
about
it,
it
a
a
video
video
is
is
just
just
a
a
function
function
of
of
images
images
over
over
time.
time
Every
every
second,
second
we
we
might
might
render
render
60
60
still
still
images
images
or
or
frames,
frames
each
each
one
one
changing
changing
slightly
slightly
to
to
create
create
an
an
animation.
animation
React
react
is
is
a
a
great
great
tool
tool
for
for
describing
describing
UIs
uis
that
that
change
change
overtime.
overtime
So
so
why
why
not
not
use
use
it
it
to
to
describe
describe
video
video
content
content
as
as
well?
well
That's
that's
the
the
idea
idea
behind
behind
Remotion,
remotion
which
which
opens
opens
the
the
door
door
for
for
web
web
developers
developers
to
to
storyify
storyify
their
their
data.
data
For
for
example,
example
you
you
might
might
use
use
a
a
weather
weather
API
api
to
to
fetch
fetch
the
the
local
local
weather
weather
forecast,
forecast
then
then
use
use
Remotion
remotion
to
to
animate
animate
a
a
video
video
out
out
of
of
that
that
data.
data
If
if
it's
it's
raining,
raining
show
show
some
some
raindrops.
raindrops
A
a
If
if
it's
it's
cloudy,
cloudy
make
make
some
some
clouds
clouds
float
float
by.
by
And
and
if
if
there's
there's
a
a
tornado,
tornado
show
show
the
the
entire
entire
town
town
being
being
destroyed.
destroyed
By
by
the
the
end
end
of
of
this
this
tutorial,
tutorial
you'll
you'll
know
know
how
how
to
to
create
create
your
your
own
own
custom
custom
data
data
even
even
videos
videos
from
from
scratch
scratch
using
using
nothing
nothing
but
but
JavaScript
javascript
and
and
Remotion.
remotion
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
check
check
out
out
the
the
full
full
source
source
code
code
on
on
GitHub.
github
Before
before
we
we
jump
jump
into
into
the
the
code
code
for
for
this
this
project,
project
I
i
want
want
to
to
give
give
a
a
huge
huge
shout
shout
out
out
to
to
William
william
Candione.
candione
He
he
put
put
together
together
the
the
code
code
for
for
this
this
video
video
and
and
has
has
an
an
awesome
awesome
YouTube
youtube
channel
channel
that
that
you
you
should
should
definitely
definitely
be
be
subscribed
subscribed
to.
to
And
and
respect
respect
to
to
Johnny
johnny
Burger,
burger
the
the
creator
creator
of
of
Remotion.
remotion
This
this
tutorial
tutorial
is
is
unlike
unlike
anything
anything
else
else
out
out
there,
there
and
and
by
by
the
the
end
end
of
of
it,
it
you'll
you'll
be
be
able
able
to
to
add
add
video
video
editor
editor
to
to
your
your
resume.
resume
And
and
you
you
might
might
be
be
surprised
surprised
at
at
how
how
easy
easy
it
it
really
really
is
is
to
to
create
create
videos
videos
with
with
React
react
once
once
you
you
understand
understand
the
the
fundamentals
fundamentals
of
of
video
video
animation.
animation
If
if
you
you
go
go
to
to
GitHub
github
and
and
clone
clone
the
the
project,
project
it'll
it'll
pull
pull
up
up
a
a
browser
browser
window
window
that
that
allows
allows
you
you
to
to
scrub
scrub
through
through
the
the
entire
entire
timeline
timeline
of
of
the
the
intro
intro
that
that
you
you
just
just
watched.
watched
And
and
you
you
can
can
modify
modify
it
it
using
using
HTML,
html
CSS,
css
and
and
JavaScript.
javascript
What
what
I'm
i'm
going
going
to
to
show
show
you
you
in
in
this
this
video
video
is
is
how
how
to
to
recreate
recreate
the
the
weather
weather
scene
scene
from
from
scratch.
scratch
H
h
to
to
follow
follow
along
along
and
and
create
create
your
your
own
own
video
video
right
right
now,
now
run
run
NPM
npm
init
init
video
video
from
from
the
the
terminal
terminal
to
to
initialize
initialize
Remotion.
remotion
It
it
provides
provides
a
a
variety
variety
of
of
different
different
templates
templates
to
to
start
start
with.
with
My
my
goal
goal
is
is
to
to
show
show
you
you
the
the
6
6
step
step
by
by
step,
step
so
so
I'm
i'm
going
going
to
to
choose
choose
a
a
blank
blank
TypeScript
typescript
template.
template
The
the
first
first
place
place
we'll
we'll
go
go
is
is
the
the
video
video
dot
dot
tsx
tsx
file,
file
which
which
contains
contains
a
a
Remotion
remotion
video
video
component.
component
Think
think
of
of
this
this
component
component
as
as
your
your
entire
entire
video.
video
Now,
now
a
a
video
video
is
is
made
made
up
up
of
of
1
1
or
or
more
more
compositions.
compositions
Remotion
remotion
allows
allows
you
you
to
to
visualize
visualize
these
these
compositions
compositions
in
in
the
the
browser
browser
by
by
running
running
npm
npm
start.
start
You'll
you'll
notice
notice
in
in
the
the
full
full
project
project
that
that
we
we
have
have
a
a
bunch
bunch
of
of
different
different
compositions
compositions
here
here
in
in
the
the
sidebar.
sidebar
These
these
are
are
like
like
their
their
own
own
little
little
mini
mini
videos
videos
that
that
allow
allow
you
you
to
to
isolate
isolate
and
and
inspect
inspect
each
each
scene
scene
in
in
the
the
video.
video
Now
now
back
back
in
in
the
the
code,
code
you'll
you'll
notice
notice
a
a
composition
composition
has
has
a
a
variety
variety
of
of
different
different
props.
props
It
it
has
has
an
an
ID
id
to
to
identify
identify
it
it
in
in
the
the
video
video
player,
player
but
but
more
more
importantly,
importantly
it
it
references
references
a
a
React
react
component
component
that
that
contains
contains
the
the
actual
actual
UI
ui
that
that
you
you
want
want
to
to
show.
show
Before
before
we
we
get
get
to
to
that
that
point
point
though,
though
we'll
we'll
need
need
to
to
determine
determine
the
the
resolution
resolution
for
for
the
the
video,
video
which
which
I'm
i'm
setting
setting
to
to
10
10
80
80
by
by
1920
1920
to
to
give
give
us
us
a
a
portrait,
portrait
and
and
also
also
the
the
duration.
duration
The
the
duration
duration
is
is
the
the
number
number
of
of
frames
frames
that
that
will
will
be
be
rendered
rendered
for
for
the
the
scene.
scene
A
a
frame
frame
is
is
basically
basically
just
just
a
a
still
still
image
image
at
at
a
a
given
given
point
point
in
in
the
the
video.
video
Now
now
the
the
actual
actual
length
length
in
in
seconds
seconds
will
will
be
be
based
based
on
on
the
the
frames
frames
per
per
second.
second
If
if
we
we
do
do
a
a
120
120
frames
frames
at
at
30
30
FPS,
fps
that'll
that'll
give
give
us
us
a
a
video
video
length
length
of
of
4
4
seconds.
seconds
Now,
now
let's
let's
go
go
ahead
ahead
and
and
shift
shift
our
our
attention
attention
over
over
to
to
the
the
composition
composition
file.
file
This
this
is
is
where
where
we'll
we'll
define
define
the
the
actual
actual
graphics
graphics
for
for
our
our
video.
video
Inside
inside
the
the
component,
component
we
we
have
have
a
a
div
div
with
with
the
the
text
text
of
of
hello
hello
world.
world
Now,
now
we
we
can
can
style
style
it
it
with
with
CSS
css
using
using
inline
inline
styles
styles
here.
here
Using
using
inline
inline
styles
styles
allows
allows
us
us
to
to
modify
modify
them
them
programmatically.
programmatically
Now,
now
if
if
you
you
open
open
the
the
video
video
player,
player
you
you
should
should
see
see
a
a
4
4
second
second
long
long
scene
scene
that
that
says,
says
hello
hello
world.
world
That's
that's
pretty
pretty
cool,
cool
but
but
also
also
extremely
extremely
boring.
boring
How
how
do
do
we
we
make
make
the
the
video
video
do
do
something
something
cool.
cool
Remotion
remotion
provides
provides
a
a
variety
variety
of
of
different
different
hooks
hooks
to
to
provide
provide
data
data
about
about
the
the
video.
video
With
with
use
use
video
video
config,
config
we
we
can
can
grab
grab
data
data
about
about
the
the
FPS,
fps
duration,
duration
and
and
resolution.
resolution
And
and
we
we
can
can
use
use
that
that
data
data
to
to
calculate
calculate
values
values
for
for
our
our
animations,
animations
or
or
as
as
I'm
i'm
doing
doing
here,
here
display
display
it
it
directly
directly
in
in
the
the
video
video
content.
content
But
but
more
more
importantly
importantly
for
for
animation,
animation
the
the
use
use
current
current
frame
frame
hook
hook
will
will
give
give
us
us
the
the
current
current
frame
frame
in
in
the
the
timeline.
timeline
Remember,
remember
this
this
react
react
component
component
will
will
be
be
re
re
rendered
rendered
for
for
each
each
frame
frame
in
in
video.
video
We
we
can
can
use
use
the
the
current
current
frame
frame
to
to
calculate
calculate
a
a
slight
slight
difference
difference
between
between
each
each
frame
frame
to
to
create
create
an
an
animation.
animation
Here's
here's
an
an
example
example
of
of
how
how
you
you
might
might
create
create
a
a
fade
fade
annotation.
annotation
Let's
let's
define
define
a
a
variable
variable
for
for
opacity
opacity
as
as
the
the
current
current
frame
frame
divided
divided
by
by
the
the
total
total
duration
duration
in
in
frames.
frames
That'll
that'll
give
give
us
us
an
an
opacity
opacity
that
that
starts
starts
at
at
0
0
and
and
gradually
gradually
increases
increases
to
to
1
1
over
over
the
the
duration
duration
of
of
the
the
video.
video
Now
now
we
we
can
can
use
use
it
it
as
as
the
the
opacity
opacity
value
value
in
in
the
the
CSS,
css
and
and
the
the
end
end
result
result
is
is
a
a
linear
linear
fade
fade
in
in
animation
animation
when
when
we
we
preview
preview
it
it
in
in
the
the
browser.
browser
Pretty
pretty
simple,
simple
but
but
Remotion
remotion
has
has
a
a
bunch
bunch
of
of
other
other
powerful
powerful
features
features
baked
baked
into
into
it.
it
What
what
I
i
wanna
wanna
do
do
next
next
is
is
integrate
integrate
an
an
SVG
svg
graphic
graphic
into
into
the
the
composition.
composition
I'm
i'm
creating
creating
a
a
new
new
component
component
that
that
will
will
be
be
a
a
map
map
of
of
France,
france
and
and
in
in
the
the
JSX,
jsx
I'm
i'm
simply
simply
pasting
pasting
an
an
SVG
svg
EG
eg
graphic
graphic
that
that
I
i
found
found
on
on
the
the
Internet.
internet
And
and
the
the
cool
cool
thing
thing
about
about
SVG
svg
is
is
that
that
we
we
can
can
use
use
and
and
modify
modify
its
its
source
source
code
code
directly
directly
inside
inside
our
our
JavaScript,
javascript
script.
script
Unlike
unlike
a
a
PNG
png
or
or
JPEG
jpeg
file,
file
you
you
can
can
find
find
the
the
SVG
svg
code
code
on
on
GitHub
github
or
or
experiment
experiment
with
with
one
one
of
of
your
your
own
own
SVG
svg
graphics.
graphics
Now
now
to
to
make
make
our
our
lives
lives
easier,
easier
Remotion
remotion
provides
provides
a
a
bunch
bunch
of
of
helper
helper
components
components
and
and
functions.
functions
One
one
of
of
which
which
is
is
absolute
absolute
fill.
fill
This
this
component
component
will
will
absolutely
absolutely
position
position
the
the
child
child
so
so
you
you
don't
don't
have
have
to
to
manually
manually
configure
configure
all
all
these
these
CSS
css
properties.
properties
8.
8
Now,
now
I
i
am
am
going
going
to
to
add
add
some
some
additional
additional
alignment
alignment
and
and
padding
padding
to
to
position
position
it
it
right
right
in
in
the
the
center,
center
and
and
then
then
we
we
can
can
simply
simply
import
import
this
this
component
component
into
into
our
our
composition
composition
and
and
declare
declare
it
it
there.
there
That
that
graphic
graphic
should
should
now
now
appear
appear
in
in
the
the
video.
video
That's
that's
pretty
pretty
cool,
cool
but
but
now
now
let's
let's
take
take
things
things
a
a
step
step
further
further
and
and
do
do
some
some
actual
actual
SVG
svg
animation.
animation
You'll
you'll
notice
notice
in
in
the
the
full
full
demo
demo
that
that
a
a
bunch
bunch
of
of
raindrops
raindrops
randomly
randomly
animate
animate
in
in
from
from
top
top
to
to
bottom.
bottom
This
this
effect
effect
is
is
accomplished
accomplished
with
with
a
a
single
single
raindrop
raindrop
SVG.
svg
Let's
let's
first
first
create
create
a
a
new
new
component
component
called
called
raindrop.
raindrop
Inside
inside
of
of
it,
it
I'm
i'm
adding
adding
an
an
SVG
svg
graphic
graphic
of
of
a
a
single
single
raindrop
raindrop
to
to
the
the
JSX.
jsx
The
the
SVG
svg
will
will
have
have
a
a
variety
variety
of
of
dynamic
dynamic
styles.
styles
We
we
can
can
use
use
transform
transform
to
to
give
give
each
each
raindrop
raindrop
a
a
slightly
slightly
different
different
size,
size
but
but
more
more
importantly,
importantly
will
will
animate
animate
the
the
absolute
absolute
position
position
of
of
it
it
like
like
left
left
and
and
top
top
to
to
move
move
it
it
from
from
top
top
to
to
bottom.
bottom
But
but
the
the
real
real
question
question
here
here
is
is
where
where
do
do
these
these
values
values
AceComeFrom.
acecomefrom
Some
some
of
of
them
them
will
will
come
come
in
in
from
from
the
the
parent
parent
via
via
props,
props
like
like
the
the
delay,
delay
x
x
position,
position
and
and
size.
size
We
we
will
will
randomize
randomize
these
these
use
use
in
in
the
the
next
next
step.
step
The
the
tricky
tricky
part
part
is
is
making
making
a
a
raindrop
raindrop
go
go
from
from
top
top
to
to
bottom.
bottom
For
for
that,
that
we'll
we'll
need
need
to
to
interpolate
interpolate
the
the
top
top
position.
position
That
that
sounds
sounds
like
like
it
it
might
might
require
require
some
some
fancy
fancy
a
a
math.
math
Luckily,
luckily
Remotion
remotion
has
has
our
our
back
back
here
here
with
with
an
an
interpolate
interpolate
helper
helper
function.
function
In
in
our
our
case,
case
we
we
provide
provide
it
it
with
with
the
the
frame
frame
minus
minus
the
the
delay,
delay
then
then
an
an
input
input
range
range
and
and
output
output
range.
range
8
8
inch.
inch
The
the
output
output
range
range
is
is
the
the
actual
actual
top
top
position,
position
which
which
will
will
start
start
off
off
the
the
screen
screen
at
at
0.2
0.2
on
on
the
the
y
y
axis,
axis
and
and
then
then
animate
animate
to
to
the
the
bottom
bottom
off
off
the
the
screen
screen
at
at
1.1
1.1
on
on
the
the
y
y
a
a
axis.
axis
That'll
that'll
get
get
the
the
job
job
done,
done
but
but
we
we
can
can
make
make
our
our
animation
animation
even
even
more
more
realistic
realistic
by
by
making
making
it
it
kind
kind
of
of
bouncy
bouncy
and
and
gooey,
gooey
because
because
Remotion
remotion
also
also
has
has
a
a
primitive
primitive
called
called
spring
spring
to
to
add
add
spring
spring
physics
physics
to
to
your
your
animations.
animations
To
to
use
use
it,
it
we'll
we'll
create
create
a
a
variable
variable
called
called
drop
drop
that
that
calls
calls
the
the
spring
spring
function.
function
It
it
takes
takes
the
the
frames
frames
per
per
second,
second
as
as
well
well
as
as
the
the
frame
frame
minus
minus
delay
delay
as
as
arguments.
arguments
And
and
you
you
can
can
customize
customize
the
the
springiness
springiness
with
with
damping
damping
and
and
stiffness.
stiffness
Using
using
that
that
as
as
the
the
interpolate
interpolate
input
input
will
will
give
give
us
us
a
a
more
more
interesting
interesting
effect.
effect
That
that
takes
takes
care
care
of
of
1
1
raindrop.
raindrop
Now,
now
the
the
question
question
becomes,
becomes
how
how
do
do
we
we
randomly
randomly
animate
animate
100
100
or
or
millions
millions
of
of
raindrops
raindrops
at
at
the
the
same
same
time?
time
To
to
handle
handle
that,
that
we'll
we'll
create
create
another
another
component
component
a
a
called
called
rain.
rain
Inside
inside
of
of
it,
it
we'll
we'll
start
start
by
by
defining
defining
a
a
variable
variable
called
called
drops
drops
that
that
contains
contains
300
300
true
true
values
values
in
in
it.
it
Each
each
value
value
represents
represents
one
one
raindrop.
raindrop
What
what
we
we
wanna
wanna
do
do
is
is
randomize
randomize
the
the
x
x
position,
position
delay,
delay
and
and
size
size
of
of
each
each
raindrop.
raindrop
Let's
let's
map
map
each
each
value
value
in
in
the
the
ray
ray
to
to
an
an
object
object
of
of
those
those
values.
values
And
and
once
once
again,
again
Remotion
remotion
helps
helps
us
us
out
out
here
here
by
by
providing
providing
a
a
random
random
helper
helper
that
that
can
can
generate
generate
random
random
values
values
with
with
a
a
seed,
seed
which
which
means
means
you'll
you'll
get
get
the
the
same
same
random
random
value
value
given
given
the
the
same
same
seed.
seed
That
that
takes
takes
care
care
of
of
the
the
randomization.
randomization
Now
now
one
one
extra
extra
step
step
we
we
wanna
wanna
take
take
here
here
is
is
to
to
wrap
wrap
this
this
function
function
and
and
use
use
a
a
memo
memo
with
with
react,
react
and
and
pass
pass
it
it
an
an
empty
empty
array
array
as
as
the
the
dependency.
dependency
Because
because
we
we
only
only
want
want
to
to
run
run
this
this
function
function
once
once
when
when
that
that
component
component
is
is
first
first
initial
initial
a.
a
Remember,
remember
it
it
will
will
rerender
rerender
for
for
every
every
frame
frame
in
in
the
the
video,
video
and
and
we
we
don't
don't
need
need
to
to
recalculate
recalculate
on
on
every
every
frame.
frame
Now,
now
in
in
the
the
JSX,
jsx
we'll
we'll
use
use
the
the
absolute
absolute
fill
fill
component
component
and
and
then
then
map
map
over
over
the
the
raindrop
raindrop
array
array
to
to
display
display
each
each
individual
individual
raindrop
raindrop
and
and
pass
pass
it
it
the
the
required
required
props.
props
And
and
that's
that's
all
all
it
it
takes
takes
to
to
make
make
it
it
rain.
rain
Let's
let's
go
go
ahead
ahead
and
and
take
take
the
the
rain
rain
component
component
and
and
declare
declare
it
it
in
in
our
our
composition,
composition
and
and
then
then
preview
preview
it
it
in
in
the
the
browser.
browser
That
that
should
should
give
give
you
you
an
an
end
end
result
result
that
that
looks
looks
something
something
like
like
this.
this
That's
that's
pretty
pretty
awesome,
awesome
but
but
in
in
the
the
full
full
demo,
demo
we
we
have
have
additional
additional
weather
weather
animations
animations
like
like
clouds
clouds
and
and
tornadoes,
tornadoes
and
and
they're
they're
rendered
rendered
conditionally
conditionally
based
based
on
on
actual
actual
weather
weather
data
data
that
that
comes
comes
from
from
an
an
API.
api
That's
that's
pretty
pretty
cool,
cool
but
but
now
now
let's
let's
render
render
it
it
to
to
a
a
real
real
MP
mp
4
4
video
video
that
that
we
we
can
can
upload
upload
to
to
TikTok
tiktok
or
or
YouTube.
youtube
You'll
you'll
first
first
need
need
to
to
have
have
FFmpeg
ffmpeg
installed
installed
on
on
your
your
system.
system
From
from
there,
there
if
if
you
you
go
go
into
into
the
the
package
package
JSON
json
file,
file
you'll
you'll
notice
notice
a
a
build
build
script.
script
It
it
contains
contains
the
the
input
input
and
and
output
output
files
files
as
as
well
well
as
as
the
the
ID
id
of
of
your
your
composition.
composition
You'll
you'll
wanna
wanna
make
make
sure
sure
that
that
matches
matches
whatever
whatever
composition
composition
ID
id
you've
you've
chosen.
chosen
Now
now
go
go
ahead
ahead
and
and
run
run
npm
npm
run
run
build
build
from
from
the
the
terminal,
terminal
and
and
it
it
will
will
render
render
out
out
your
your
code
code
to
to
the
the
out
out
directory
directory
as
as
an
an
MP
mp
84
84
file.
file
Congratulations,
congratulations
you
you
just
just
made
made
a
a
video
video
with
with
React.
react
What
what
I
i
find
find
so
so
cool
cool
about
about
this
this
is
is
that
that
it
it
provides
provides
a
a
really
really
nice
nice
way
way
to
to
generate
generate
videos
videos
programmatically
programmatically
based
based
on
on
some
some
kind
kind
of
of
underlying
underlying
data
data
source.
source
A
a
My
my
plan
plan
is
is
to
to
connect
connect
it
it
to
to
GPT
gpt
3
3
along
along
with
with
the
the
Giphy
giphy
SDK
sdk
to
to
automatically
automatically
write,
write
produce
produce
and
and
edit
edit
all
all
my
my
future
future
YouTube
youtube
videos.
videos
A.
a
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
Give
give
Remotion
remotion
a
a
star
star
on
on
GitHub,
github
and
and
let's
let's
see
see
if
if
we
we
can
can
get
get
them
them
past
past
10
10
k.
k
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speakers discuss creating video content with React by using theremation tools and creating weather API and weather video through various methods. They also explain how to create a raindrop animation using the online tool and add new components and functions to create a more realistic effect with spring physics. They also discuss creating a rainbow effect using a component and how to randomize the raindrop's position and size. The speakers thank their audience for watching and mention their next video.
This video was made with code. But how?
Today's video is made different. I threw away all my fancy editing tools like Adobe Premiere and After Effects, and instead did all the editing with JavaScript code thanks to a tool called Remotion, which allows you to create video content programmatically with React. When you think about it, a video is just a function of images over time. Every second, we might render 60 still images or frames, each one changing slightly to create an animation. React is a great tool for describing UIs that change overtime. So why not use it to describe video content as well? That's the idea behind Remotion, which opens the door for web developers to storyify their data. For example, you might use a weather API to fetch the local weather forecast, then use Remotion to animate a video out of that data. If it's raining, show some raindrops. A If it's cloudy, make some clouds float by. And if there's a tornado, show the entire town being destroyed. By the end of this tutorial, you'll know how to create your own custom data even videos from scratch using nothing but JavaScript and Remotion. If you're new here, like and subscribe, and check out the full source code on GitHub. Before we jump into the code for this project, I want to give a huge shout out to William Candione. He put together the code for this video and has an awesome YouTube channel that you should definitely be subscribed to. And respect to Johnny Burger, the creator of Remotion. This tutorial is unlike anything else out there, and by the end of it, you'll be able to add video editor to your resume. And you might be surprised at how easy it really is to create videos with React once you understand the fundamentals of video animation. If you go to GitHub and clone the project, it'll pull up a browser window that allows you to scrub through the entire timeline of the intro that you just watched. And you can modify it using HTML, CSS, and JavaScript. What I'm going to show you in this video is how to recreate the weather scene from scratch. H to follow along and create your own video right now, run NPM init video from the terminal to initialize Remotion. It provides a variety of different templates to start with. My goal is to show you the 6 step by step, so I'm going to choose a blank TypeScript template. The first place we'll go is the video dot tsx file, which contains a Remotion video component. Think of this component as your entire video. Now, a video is made up of 1 or more compositions. Remotion allows you to visualize these compositions in the browser by running npm start. You'll notice in the full project that we have a bunch of different compositions here in the sidebar. These are like their own little mini videos that allow you to isolate and inspect each scene in the video. Now back in the code, you'll notice a composition has a variety of different props. It has an ID to identify it in the video player, but more importantly, it references a React component that contains the actual UI that you want to show. Before we get to that point though, we'll need to determine the resolution for the video, which I'm setting to 10 80 by 1920 to give us a portrait, and also the duration. The duration is the number of frames that will be rendered for the scene. A frame is basically just a still image at a given point in the video. Now the actual length in seconds will be based on the frames per second. If we do a 120 frames at 30 FPS, that'll give us a video length of 4 seconds. Now, let's go ahead and shift our attention over to the composition file. This is where we'll define the actual graphics for our video. Inside the component, we have a div with the text of hello world. Now, we can style it with CSS using inline styles here. Using inline styles allows us to modify them programmatically. Now, if you open the video player, you should see a 4 second long scene that says, hello world. That's pretty cool, but also extremely boring. How do we make the video do something cool. Remotion provides a variety of different hooks to provide data about the video. With use video config, we can grab data about the FPS, duration, and resolution. And we can use that data to calculate values for our animations, or as I'm doing here, display it directly in the video content. But more importantly for animation, the use current frame hook will give us the current frame in the timeline. Remember, this react component will be re rendered for each frame in video. We can use the current frame to calculate a slight difference between each frame to create an animation. Here's an example of how you might create a fade annotation. Let's define a variable for opacity as the current frame divided by the total duration in frames. That'll give us an opacity that starts at 0 and gradually increases to 1 over the duration of the video. Now we can use it as the opacity value in the CSS, and the end result is a linear fade in animation when we preview it in the browser. Pretty simple, but Remotion has a bunch of other powerful features baked into it. What I wanna do next is integrate an SVG graphic into the composition. I'm creating a new component that will be a map of France, and in the JSX, I'm simply pasting an SVG EG graphic that I found on the Internet. And the cool thing about SVG is that we can use and modify its source code directly inside our JavaScript, script. Unlike a PNG or JPEG file, you can find the SVG code on GitHub or experiment with one of your own SVG graphics. Now to make our lives easier, Remotion provides a bunch of helper components and functions. One of which is absolute fill. This component will absolutely position the child so you don't have to manually configure all these CSS properties. 8. Now, I am going to add some additional alignment and padding to position it right in the center, and then we can simply import this component into our composition and declare it there. That graphic should now appear in the video. That's pretty cool, but now let's take things a step further and do some actual SVG animation. You'll notice in the full demo that a bunch of raindrops randomly animate in from top to bottom. This effect is accomplished with a single raindrop SVG. Let's first create a new component called raindrop. Inside of it, I'm adding an SVG graphic of a single raindrop to the JSX. The SVG will have a variety of dynamic styles. We can use transform to give each raindrop a slightly different size, but more importantly, will animate the absolute position of it like left and top to move it from top to bottom. But the real question here is where do these values AceComeFrom. Some of them will come in from the parent via props, like the delay, x position, and size. We will randomize these use in the next step. The tricky part is making a raindrop go from top to bottom. For that, we'll need to interpolate the top position. That sounds like it might require some fancy a math. Luckily, Remotion has our back here with an interpolate helper function. In our case, we provide it with the frame minus the delay, then an input range and output range. 8 inch. The output range is the actual top position, which will start off the screen at 0.2 on the y axis, and then animate to the bottom off the screen at 1.1 on the y a axis. That'll get the job done, but we can make our animation even more realistic by making it kind of bouncy and gooey, because Remotion also has a primitive called spring to add spring physics to your animations. To use it, we'll create a variable called drop that calls the spring function. It takes the frames per second, as well as the frame minus delay as arguments. And you can customize the springiness with damping and stiffness. Using that as the interpolate input will give us a more interesting effect. That takes care of 1 raindrop. Now, the question becomes, how do we randomly animate 100 or millions of raindrops at the same time? To handle that, we'll create another component a called rain. Inside of it, we'll start by defining a variable called drops that contains 300 true values in it. Each value represents one raindrop. What we wanna do is randomize the x position, delay, and size of each raindrop. Let's map each value in the ray to an object of those values. And once again, Remotion helps us out here by providing a random helper that can generate random values with a seed, which means you'll get the same random value given the same seed. That takes care of the randomization. Now one extra step we wanna take here is to wrap this function and use a memo with react, and pass it an empty array as the dependency. Because we only want to run this function once when that component is first initial a. Remember, it will rerender for every frame in the video, and we don't need to recalculate on every frame. Now, in the JSX, we'll use the absolute fill component and then map over the raindrop array to display each individual raindrop and pass it the required props. And that's all it takes to make it rain. Let's go ahead and take the rain component and declare it in our composition, and then preview it in the browser. That should give you an end result that looks something like this. That's pretty awesome, but in the full demo, we have additional weather animations like clouds and tornadoes, and they're rendered conditionally based on actual weather data that comes from an API. That's pretty cool, but now let's render it to a real MP 4 video that we can upload to TikTok or YouTube. You'll first need to have FFmpeg installed on your system. From there, if you go into the package JSON file, you'll notice a build script. It contains the input and output files as well as the ID of your composition. You'll wanna make sure that matches whatever composition ID you've chosen. Now go ahead and run npm run build from the terminal, and it will render out your code to the out directory as an MP 84 file. Congratulations, you just made a video with React. What I find so cool about this is that it provides a really nice way to generate videos programmatically based on some kind of underlying data source. A My plan is to connect it to GPT 3 along with the Giphy SDK to automatically write, produce and edit all my future YouTube videos. A. I'm gonna go ahead and wrap things up there. Give Remotion a star on GitHub, and let's see if we can get them past 10 k. Thanks for watching, and I will see you in the next one.
The speakers discuss creating video content with React by using theremation tools and creating weather API and weather video through various methods. They also explain how to create a raindrop animation using the online tool and add new components and functions to create a more realistic effect with spring physics. They also discuss creating a rainbow effect using a component and how to randomize the raindrop's position and size. The speakers thank their audience for watching and mention their next video.