**This video was made with code. But how? — Transcript & Summary | SozAI** Source: https://sozai.app/transcript/video-made-with-code-how/ Learn how to create and animate videos programmatically using React and Remotion, turning code into dynamic video content. ## Key Takeaways - Remotion enables video creation and animation using React components and JavaScript. - Videos are composed of frames rendered programmatically, allowing precise control over animations. - SVG graphics can be integrated and animated dynamically within videos. - Remotion provides useful hooks and helper functions to simplify animation math and timing. - Developers can create data-driven videos that respond to real-time data like weather APIs. ## What the video covers - The video demonstrates how to replace traditional video editing tools with JavaScript and React using the Remotion library. - Remotion allows developers to create video content programmatically by rendering frames as React components. - The tutorial covers setting up a project with a blank TypeScript template and explains the structure of Remotion video components. - It shows how to animate scenes based on data, such as weather conditions, by dynamically rendering raindrops, clouds, and tornado animations. - Viewers learn to use Remotion hooks like useVideoConfig and helper functions like interpolate and spring for smooth animations. - The video explains how to integrate SVG graphics and animate them within the video compositions. - It highlights the ability to visualize and scrub through video timelines in the browser for easy editing and previewing. - The tutorial emphasizes creating reusable compositions and managing multiple mini videos within a project. - The video encourages viewers to clone the GitHub project to explore and modify the code themselves. - By the end, viewers will be able to create custom data-driven videos entirely with JavaScript and React. ## Chapters 1. 00:00 Introduction to Remotion and video creation with code 2. 00:38 Animating weather scenes with Remotion 3. 01:10 Setting up the project and choosing templates 4. 02:18 Overview of Remotion video components and compositions 5. 02:52 Defining graphics and styling with CSS 6. 03:27 Creating a weather scene from scratch 7. 04:03 Animating SVG graphics and integrating them 8. 04:37 Visualizing compositions and timeline scrubbing 9. 05:13 Animating raindrops and using helper functions 10. 05:48 Setting video resolution and duration Answers ## Questions about this video What is Remotion and how does it work? Remotion is a tool that allows developers to create and animate videos programmatically using React components. It renders videos as a sequence of frames, each represented by React UI elements, enabling precise control over video content through code. Can I use SVG graphics in Remotion videos? Yes, Remotion supports integrating SVG graphics into video compositions. You can animate SVG elements dynamically using React and Remotion’s animation helpers to create complex visual effects. How do I start creating a video project with Remotion? You can initialize a Remotion project by running 'npm init video' in your terminal, which sets up a starter template. From there, you define video components and compositions in TypeScript or JavaScript and use Remotion’s tools to animate and preview your video. ## Full Transcript — Download SRT & Markdown 00:00 Speaker A 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. 00:13 Speaker A 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 00:26 Speaker A 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 over time. 00:38 Speaker A then use remotion to animate a video out of that data if it's raining show some raindrops 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 00:50 Speaker A 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 storify their data. For example, you might use a weather API to fetch the local weather forecast. 01:00 Speaker A 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 01:10 Speaker A Then use Remotion to animate a video out of that data. If it's raining, show some raindrops. If it's cloudy, make some clouds float by. And if there's a tornado, show the entire town being destroyed. 01:20 Speaker A 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 01:32 Speaker A By the end of this tutorial, you'll know how to create your own custom data-driven 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. 01:44 Speaker A templates to start with my goal is to show you the basic step by step so i'm going to choose a blank typescript template the first place we'll go is the video.tsx file which contains a remotion video component think of this component 01:56 Speaker A 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. 02:07 Speaker A different compositions here on 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 02:18 Speaker A 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. 02:30 Speaker A for the video which i'm setting to 1080 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 02:40 Speaker A You might be surprised at how easy it really is to create videos with React once you understand the fundamentals of video animation. 02:52 Speaker A 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 03:04 Speaker A 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. 03:15 Speaker A 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 03:27 Speaker A What I'm going to show you in this video is how to recreate the weather scene from scratch. To follow along and create your own video right now, run npm init video from the terminal to initialize Remotion. 03:41 Speaker A 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 animation let's define a variable for opacity as the current frame divided by the total 03:53 Speaker A It provides a variety of different templates to start with. My goal is to show you the basic step by step, so I'm going to choose a blank TypeScript template. 04:03 Speaker 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 want to do next is integrate an svg graphic into the composition i'm creating a new 04:15 Speaker A The first place we'll go is the video.tsx file, which contains a Remotion video component. Think of this component as your entire video. 04:26 Speaker A inside our javascript 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 different helper components and 04:37 Speaker A Now, a video is made up of one or more compositions. Remotion allows you to visualize these compositions in the browser by running npm start. 04:49 Speaker A 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 05:01 Speaker A You'll notice in the full project that we have a bunch of different compositions here on the sidebar. These are like their own little mini videos that allow you to isolate and inspect each scene in the video. 05:13 Speaker A 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 we'll animate the absolute position of it like left and top to move 05:25 Speaker A 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. 05:37 Speaker A 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 math luckily remotion has our back here with an interpolate helper function in our 05:48 Speaker A Before we get to that point though, we'll need to determine the resolution for the video, which I'm setting to 1080 by 1920 to give us a portrait, and also the duration. 06:00 Speaker A the bottom off the screen at 1.1 on the y-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 06:12 Speaker A 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. 06:24 Speaker A and stiffness using that as the interpolate input will give us a more interesting effect that takes care of one raindrop now the question becomes how do we randomly animate hundreds or millions of raindrops at the same time to handle that we'll create another 06:36 Speaker A Now, the actual length in seconds will be based on the frames per second. If we do 120 frames at 30 fps, that will give us a video length of 4 seconds. 06:50 Speaker A let's map each value in the array 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 07:02 Speaker A 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. 07:13 Speaker A function once when that component is first initialized remember it will re-render 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 07:24 Speaker A Inside the component, we have a div with the text of "Hello World." Now we can style it with CSS using inline styles here. 07:36 Speaker A 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 07:49 Speaker A Using inline styles allows us to modify them programmatically. 08:01 Speaker A build script it contains the input and output files as well as the id of your composition you'll want to make sure that matches whatever composition id you've chosen now go ahead and run npm run build from the terminal and it will 08:12 Speaker A 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. 08:24 Speaker A kind of underlying data source my plan is to connect it to gpthree along with the giphy sdk to automatically write produce and edit all my future youtube videos i'm going to go ahead and wrap things up there and give remotion a star 08:35 Speaker A How do we make the video do something cool? Remotion provides a variety of different hooks to provide data about the video. Topics: Remotion React JavaScript video editing programmatic video SVG animation data-driven video video tutorial web development animation --- This is the markdown twin of https://sozai.app/transcript/video-made-with-code-how/ — the same content, without the markup. Published by SozAI (https://sozai.app). Reuse and quotation are allowed with attribution and a link back. Machine-readable index: https://sozai.app/llms.txt · data API: https://sozai.app/api/