Video details

React Chicago August 2021 - "Writing Videos With Remotion" by Sebastian Kurpiel


React Chicago August 2021 Summer Party Meetup Sponsored By Inspire 11
Writing Videos With Remotion Sebastian Kurpiel
Editing videos can be a hassle with software crashing and things turning out not the way you like them. But with Remotion you're able to leverage web development skills to create videos using React and CSS! I'll go through the process of how I create the GraphQL Chicago intro and how I automate the editing to create weekly videos efficiently and with ease using Remotion.
Sebastian Kurpiel is a lifelong tech geek who has always found himself tinkering and modifying to create awesome experiences and products. Currently he's an engineer at Inspire 11, where he's helping companies turn their products up to 11. When he's not behind the keyboard you can find him taking photos or day dreaming about traveling(specifically to Japan). We are actively looking for speakers!
Reach out
at [email protected] you would like to give a talk


I said I'm going to begin to talk about writing videos with emotion a little bit about myself, the profession for Hi. Everybody ate at the previous slide set. I'll be giving a talk about anything videos with emotion and about me. I'm an engineer at Inspire Eleven or hiring. So if you want to work on a Mason team, I'm going up also well, if you mentioned open conversation transfee in conversation rating from Fishing Escalators usage and Guy Meka robot and frequently I was a father talking about father. Be sure in for one. I'm also in February of 2020, as Bill mentioned, I'm Nico organizer and video editor of this we meet up. So if you're watching this post meetup on YouTube like the video, it gives me the kind of encouragement. Also, during the past year I came up with a couple of workflows and processes to edit the video quicker and more efficiently. Coming up with three to find templates for the intro and stay nice and how the videos look. But like programming, it's always a good idea to keep your mind fresh and learned something. As someone. Bill asked me if I could help jump in and as the videos to the graph, who else calling me up? Also also meet up. Come join that one. That was a perfect opportunity to try a new library that I saw credit call remote. And now you're probably wondering what what your notion is is a title to stock remoting is actually a video under built on React and allows you to lock it to front end skills to run beautiful animation. Ten video can react using React we should remove you can use any library tool that's available on the Web. Not limited information three s and if you kind of use a software like a Dope Premiere or Final Cut can still right at home with a similar Timeline Scoping feature. And if not you knowledge use CSS and JavaScript and it's always there to back you up and kind of help you out of those videos. I'm going to dive into a demo right now. Like I said, if you use Adobe Premiere or a video editor like Final Time, you probably rent a home. So this is kind of like the basic scrubber, and as you can see it's time. Similar to those programs, however, you don't have the ability to edit or add animations or CSS to be listen platform. All that is done with code was this is the basic file structure. I'm kind of planning on looking at my laptop unit. It's so hard, but I it's kind of similar to like a React project. So you have your index or the or the video in this case is initialized and then you go into your video, which is the main composition where you're able to compose the video itself. At the moment I have the intro. So this is like a part for section you're able to break up and just do a component. So normally a video you might have an intro, you might have an engine scene, you might have a middle of texting, whatever you need to get the video different done. You're able to break that up in component. In this case, I only have one component the intro. So if you go into that folder for that file, open up into a lot of smaller bits and as you can see the DiSante script. So you can also add a new video that's type safety. We've done like type safety in the video. Additionally, you can add animations with styling such as I'm using animation actually from spring KS. It's natively included in the library, and these are smaller component that I said before. So you have a logo you grab you give a subtitle of the title. These are all smaller components that can be found in this filter itself. And I was also able to use inline styling, which is always a plus. And you can also use table with CSS or any other styling that you want if you want to how to do and that was kind of a basic, crude example of promotion to you. I bet there's lots of people here that have better front end skills than I do and that can do better animations. So these are a couple of them. One cool thing that people actually do risk promotion is create animated preview slide for their videos or their apps or website. So if you link a video on Twitter, you can see the website in action as that's the first one to shown above. Also, people have recreated into the famous Netflix shows like down and Robots over there. That's another one. And also you can animate your visualizations and data with promotion as well. A little five note trying to automate the flow of video in a bit. I create steal I tool that unfortunately grow people able to show it off, but it's a cool tool that allows me to efficiently build these intro. Normally in the past with intro, I would have to open a Fax and then use an app respect I would have to wait to render. However, with the CLI tool, I'm able just input the data that I want to export into a video so that title and the presenter and I'm able to export that video in a quick manner. Additionally, this led me to do some crazy automations to set you up an obligation for the thumbnail and the automation to upload to you because that's sorry many other questions. I completely be able to do it for years essentially rendered as more or any video that you want. You can center it in any file format and I forgot to mention, but I actually run a concurrency so I actually use all your course. So that's a pretty quick I think when I tested it between after effect from this after effect is a little bit quicker, but that has taken effect of opening it up after effects. I put the export button. This is just all viyour on MPM bill and build the video up. Audio audio is supported. I built the intro. It wasn't supported, but it actually really simple to add in. You just add in like an audio that and you put the store to the audio that you want. And Additionally, you haven't parameters to put in a start and stop like you do with a normal web editor, so you can put a specific sign you want to start and pay that as well. It's similar to when you're building on the web app. So you have that hop reloading capability so it will play in the start. Unfortunately. But the way I find Tom reactive, that is, it is kind of come the code that I don't want to see. And then I will just play that far as open over again product. No, not at the moment. I guess technically, you YouTube. I will find a client that wants this at some point, and I will incorporate it. They all right. Give it up for submission.