Create videos as React apps with Remotion

Hey there!

I hope you are doing well! I'm back today to discuss a shiny tool: Remotion. Remotion allows you to create videos programmatically using web technologies: HTML, CSS, JavaScript, and React.

I have followed Remotion's progress for a few years now but have only recently found great use cases for it.

Speaker Scene and Podcast-to-Video

For my podcast Parlons Dev, my co-host and I recorded a video with friends in which we tried to create a vase with flowers in HTML/CSS. We didn't record the camera, so I had to fill in the blank scenes where we were only speaking and not writing code. I chose to generate a video with Remotion showing a grid with every speaker and highlighting the profile picture of the speakers currently talking.

I made another version of this project to generate a video from a podcast episode. I used an AI model on Replicate to identify when each speaker talks and passed the generated segments to Remotion. The project is on GitHub and I recorded a tutorial for YouTube.

Because it's all HTML and CSS, I can use Tailwind CSS to style my videos. What a dream. Check out the Remotion template for Tailwind CSS.

GitHub Unwrapped

The Remotion team has partnered with GitHub for a few years to build the GitHub Unwrapped campaigns. That's a tremendous social acknowledgment!

Remotion Studio

Remotion comes with the Remotion Studio, a web app where you can preview and render your videos.

You can inspect your videos frame by frame and use your browser's debugger to fix layout issues. Indeed, Remotion prints the frames of your videos as HTML in your browser during development. So, you can use your favorite tools to debug your code.

Add a thumbnail at the beginning of a video

Another use case I had for Remotion was to add a static image at the beginning of a video with a cool transition.

Twitter doesn't allow you to add a thumbnail to a video you post. When I release a new YouTube video, I like to talk about it on Twitter and post the intro. However, to give more context to people scrolling on Twitter and seeing my post, I want to add a thumbnail at the beginning of the video.

I couldn't find the effect I wanted in my video editing software, so I built it with Remotion!

The code of the project is public. I released a video to show how I built it by using the Transitions feature of Remotion. Check it out!

Transparent overlays

Before you go try Remotion by yourself, I want to mention that Remotion can output transparent overlays to be used in traditional video editing software. That's an exciting feature for adding custom visual elements to a video.

And to be honest with you, I used the transparent overlay feature for my speaker grid project. The generated video had a transparent background (without the macOS wallpaper), as I wanted to set the background in my video editing software (ScreenFlow) for consistency. I told Remotion to output an Apple ProRes file.

See the transparency represented by a checkerboard below.

Thanks to Remotion, I have video creation superpowers. Now, I must be imaginative in using this power best!

I hope you find a use case for Remotion, too.

Best,

Baptiste