Supper Club × Remotion React Video with Jonny Burger

just enough scripting things that it makes you feel

Yeah. Yeah. I know. After Effects specifically is one that gives you kind of, like,

it got such a Feedback that I was in in a constant feedback loop and never really had time to work on the original app. So now Remotion is my main project. Isn't that Funny how that works where Lottie, if you would just import it, Each layer lags a bit behind the previous one.

anytime you're used to working in WebTech, you know just how much of a pain in the butt the the scripting in in general and And, after effects can be. But not only that, like, working in, like, a vectorized context instance, so to say. I don't know what they refer to them as. And then recording doing a screen recording of that. Is that what's happening?

And then they build an entirely new project around that that then becomes the product. I mean, it's exactly what you're you're describing. It feels like that is

And my plan was to make a new app and launch it. It was like a WhatsApp sticker app.

SVG, you find start up ideas while building like, way for users to time.

in comes the web, which you can now

trying to coach that in React and, a web project

We have CSS, where And you're not able to do

It feels like that's happened so many times where where people work on a project, they hit a need,

Adjust your things to various camera sizes and and whatnot. Did you have a background specifically

I was definitely just a hobbyist who After Effects, but I was a much stronger If if you just use the Remotion core, I think,

what I would be able to do with my abilities in with Adobe programs.

was, I would say, pretty good at making mobile apps at that time.

my idea was that tools oftentimes, you are pretty,

with, I guess, And then I I started my experimentations

I I knew that's the web was very powerful for making graphics.

The project.

much longer and worked on the remotion instead.

it using code.

Packages that do all kind of things, effects, you can render anything that you want. And then as the the value As the return value of the hook changes, as the time changes, we just tell you, hey. Render something different

Does. Yeah. Functions all the way down.

this can be Lottie animations, animates for for the same time, you Always need to render the same thing. So,

update a react state or not, where if you think you could just invest a lot of time in it,

by yourself with without our package, package that you can install

presets allow you to use third party libraries.

plays not idempotent or let's say,

So we need a way to synchronize it. Otherwise, we cannot achieve this idempotency.

Yeah. So Lotte so it is an optional

they would just integrations Then we And we also want

include these types of things.

That it's so cool. So okay. So the other dependencies that you're in in your repo are are more or less tools to assist with video creation. So, like,

on your own on how to implement certain stuff. So we try to Stock prices, and then people make bots out of, that where the bot post a video every day. Yeah. Yeah. I I see this a lot with,

change their appearance

and, yeah, we also have few other Independently if you just have a time stamp and a blank canvas, it's pretty hard to animate something complicated.

people might not have heard of Lottie before. Do you wanna talk a little bit about how you use Lotte?

type of video, marketing video, or whatever TikTok video that people are are making with this? Yeah. So we try to

Mhmm.

Is there a specific

but I was like, okay. Like, me as a video creator, like, I'm probably not gonna use this to make my Screencast, I don't think.

with this type of thing? Because I was kinda looking at it. I was like, this is really cool. Some of the examples are unreal, You're just taking screenshots because, like, video is

allow a variety of use cases. But I can mention a few videos that that I like. For example, Declarative. You you get to frame from a try to build Products, especially for developers, if all frames are idempotent,

a marathon in Switzerland,

make the framework as generic as possible to, chunk of the and we And when I launched it, to do that.

Totally. Awesome. So, like, what type of videos are people making

and then, send a personalized video to everyone who finished the marathon and they Over late time, like, greetings from a famous, that take the duration of the videos. If your video has 900 then Kind of, proud of that they made it like that.

finish our videos. So they would film at the event

you'll end up hitting a lot of problems that that are in our stack,

a programmatic interface for creating videos. The next thing you know, you have All of this content that would have taken so long to do by hand. And then you you get into more tools on the web, and you could probably stitch that together in other videos or make a whole work all around it. I I see a huge amount of potential for for a tool like this.

And then we use

like right now in TikTok, the popular videos are people take a,

what are you using 3. Js for specifically?

And a template

you can constantly

data, like you said, that changes at any given time, and can pipe it in. And you don't have to specifically like

Very simple. So we we give you use a real React functional component You can do pretty much everything. There are no no constraints.

and and a way to specify frames is 30 seconds long,

be it weather or, like, the final image will still be smooth.

just pull in the fresh data, which is so cool.

you're passing that into

Dynamic video content.

like, I would say, like, data driven videos Nothing big came out of it, but

you know, that is a major strength of of programming. Right? You're able to do a lot of operations is no fun in any of those situations. Right? I mean, you You can't work with the vector tools that we know and love typically. So,

With, in motion graphics before this, or were you just a hobbyist?

over time.

is an is a category that where Remotion is Very strong ad where you fetch data from API, video.

I've dove into your your repo, and I've pulled out some dependencies. And I wanna, like, maybe talk a little bit about how you made this thing. So I I do see that you're using Turborepo

I have some questions eventually around the like, Converting

Tell your editor, all right, here's the file of data, and then they have to copy paste it in, and you have to make sure they get it right, is you could just get that hot out of an API

and some parameters,

in, you know, what would be like a project into a product. We can talk about that. But do we wanna get into the the tech stack a little bit?

of the canvas. And then a way And that's how you create a motion so much of it, is still unsolved.

I see 3 j s. I see Lottie.

For being able to take

Puppeteer.

the the core of which,

It does seem like,

to be able to do things rapidly that you would take forever to do by hand. I mean, I have, what, like, 400 courses on the whole of tutorials.

I was like, this this is unreal

I see FFmpeg,

a popular Reddit Story, and and they take, like, a video from YouTube, and then they do some AI voice on top of that. And,

the width and height render across like 100 Lambda functions

you know, over the course of data, I'm interested in, like, kind of what's doing what. In this in this type of project,

Yeah. I had a Really similar motivation for building Remotion.

Clean. Yeah.

project in the React native to create a streamlined so I put off the actual app that I wanted to do for,

make the size a little bit bigger and export it. Right? And someone was like, you should check out Remotion because, like, obviously, it does a lot more than that, but,

export your videos because I I was having to deal with this, like, weird Twitter issue where Twitter was cropping the video, and I just had to make it, like, Twenty pixels wider, and, Welcome to Syntax, the podcast with the tastiest web development treats out There. Today, we've got one for you. This is pretty cool.

as a way that's built in React.

space. And it's been about 18 months since I started Remotion,

like, previewer

until, like, 2 years ago,

you actually write

code to actually just describe where they go, and you can create different scenes and put them together. And I was like, this is this is really nifty.

And then putting your videos together,

and someone said, hey. Yeah. Like,

which is

you need to check out Remotion

at least the far as far as I got into it is, Oh, that's cool. We always like when people have heard of us. Like, I always have to, like, explain who we are to everybody when I bring them on,

I fired it up,

it it that's something you could do as well. So I was like, okay. I'll I'll check this out. And so I kinda went into it, and I was like it's like make videos programmatically.

and there's, like, this whole,

now I have to, like, export 2 versions of it, and it's a pain. And I was like, well, like, wouldn't it be nice if I could just, like, have a script or something that could, At the very least, just

to programmatically

So, like, why why did you make this type of thing? Is this a problem that you're trying to solve or what? Right into the video. And if there's an issue or you need to update it or anything like that,

What we render is not necessarily what is being and also did some open source if you just,

over the speed, whereas with a CSS animation, it just Place in one direction Instead of

Something backwards or play them half the speed. You kind of have control the the web is really powerful.

it is Pretty hard to create complex animations with just, Each frame that you render needs to be idempotent.

And sometimes

remotion,

the

and one of the as you can imagine, if we just use this very simple technique,

model where everything is totally

CSS also gets in in in the way. So for example, CSS animations, they just Play on their own. Right? Oh, yeah. Whereas Mhmm. We have a developer, and The the stuff that developers face, I

React and CSS.

Able to A very common theme we see with successful products. I guess it makes a lot of, sense that, Wicked. Well, Johnny, thank you so much for coming on. I appreciate it. Yeah. Very happy to. I have the podcast in my player, and I was very excited when I saw the DM From you.

Johnny, just explain to us. Yeah. You can you can kind of think of a video as a

or, like, random random values.

Yeah. That's way more intense than I think I was getting from the the surface of things. Can we ex I'll explain to our audience really quickly,

because I know there's a lot of new developers listening, and they probably are hearing the word idempotent about making videos programmatically in React. Yeah. Nice. That's like, this is really cool because so I'll tell you how I stumbled across it. So I've been making short form content,

you cannot use CSS animations

Both a larger and a much smaller degree. I'm impressed with just how much of this is,

like, a true

True video editor style of things where, like you said, because each frame is always going to be the same, You can step through your animations and always know that this thing is always going to exactly how you'd expect Final Cut Pro to work, right, or any of that stuff.

thing, it will give you the same thing every single time. And because of that, you get all the benefits that,

and not not understanding what that is. We talk about this On the podcast every now and then is, pure function.

It will always, always, always return the exact same thing. That's beautiful because people always ask like, Oh, why, like, why do you need pure Pure functions and and idempotent JavaScript. This is a really good example of why you would need that because,

based on the time. And it is kind of beautiful because And, include Lottie animations in your And

Now we actually we we have Two types Necessary I I guess we don't use Puppeteer anymore. We have kind of inlined that all in,

just opening 1 chrome tab, we can actually open 4 or 8 chrome tab Recently, I experimented with rough JS function that takes in a current time and

But I think it's very important that we introduce these rules I was already making videos before with the Adobe Suite used Remotion to to batch make, it back together, and then it's a super fast render. Oh, super fast render. You could literally spin up, like,

Meaning that no matter you could you have a function,

video, and, then we concatenate

where you can distribute your Video And there's also that makes it so that I realized it's it has some beauty in it. Yeah.

and paralyze the rendering because, await something, where each Lambda function renders one Yeah. I guess it's a Swiss thing. I'm from Zurich, Switzerland.

and given that you pass it in some data, like you have a A animation, you say give me frame 7.

2 2,000 Lambda servers, and and all of them render 1 frame and then shut down. I mean, it's like having, like, a a Pixar studio, you know, where they have Rendering tiny little bits of animation across several computers. I remember doing that in college, and, like, this is that same thing, but to

And as an extension for that, we have also made something like, that we call Remotion Lambda

limit subset of something? But it's It's full blown whatever works in the browser and you could take a screenshot of. Right? Yeah. Exactly. And,

So so what What are you doing? Are you are you rendering Yeah. I do see, like, a motion blur package as well inside of here, and that feels to me like it would be a particularly challenging issue.

So

to await, are usually,

It's, it's not a screen recording because So implementation called camera motion blur,

like like, a whole rendering engine and whatnot. But, like, The rendering engine is Chrome. And because of that, you have

Sort of. So, all the time. Uh-huh. So there are some use cases

that

FFmpeg.

tree into

Iterate over displayed in the real time in the browser. Mhmm. And we can also, for example, If I could just make a bunch of screenshots of web pages and then

So that way the the render will maybe not be in real time if it is a complex project, just that it Returns a And there are, like, various other For making, like, some hands drawn type of stuff, a different image, one hook. It's called use current frame most difficult ones for users to get right is that

But we can ensure that there are no flakers, and everything is, very smooth. I I don't know why I'm so surprised play but we wait for all that to be to be done.

most because then we can also parallelize the render I think GIFs, and we pack them up so that you can use them in remotion.

that way we we also of Remotions'

all of CSS available and all of HTML available and all of React because that was my next question is, like, Can you use all of CSS, or is it like this, like, React Native thing where, like, you gotta use your own

and FFmpeg I could probably make something that that looks better than Canvas. We can do three d stuff.

a puppeteer, How how does that all fit into the the puzzle here? Yeah. So motion blur, it's something that

But what we do is we open a Chrome browser, we load the codes that you have written,

to encode the video. I would say these are the That's one thing that I was

the current react

so much yet. Okay. I have a I have a time and and a blank canvas. Can I can I, sorry? Can I have you elaborate just a little bit on that puppeteer,

Puppeteer to make screenshots of that which, the idea is Very

set the time, take a screenshot, set the time again, and screenshot it again. So we That's we make a lot of images.

screenshots. It's just lots of small images played at a frame per second, and then it's smooth to us. But,

that we need to have.

and Yeah? and Vite and PNPM, so all the the cool stuff for the build tools. But in terms of, like, actually creating

For some reason, I thought that there would be a lot more,

we ensure that there are no frame drops. So You can make, like, really complex stuff that maybe takes, like, 2 seconds to render in a in a browser, shortly before lunch, I decided, okay, I need to make a a launch video.

And on each iteration, it changes the time stamp a you would have this problem that it just normal regular projects all the time, It was necessary for them to create network requests, for example, or any asynchronous operations.

are those like,

mix blend mode property, like 12 lines of codes,

and, make each layer a bit less transparent.

you pass some it's a React high order component, and by the way, a really simple which uses the CSS I guess what's the drawback of it is that, in our codes to make it a bit more efficient.

Is the the motion blur and trail effects you're doing, you're the the the thing that you have that is the need in your workflow ends up becoming Powerful, but at the same time,

yeah, is pretty advanced. And you can even set like a So we have a bunch of helper packages very simple. And with just that,

do it. And provide a bunch of helper Regardless of whether you

where it just takes any React markup And duplicate it.

The first one is put that together and code that into a video, you can do in most Video editing programs. So we also need to have a way to

little bit so that things that

the blur depends on which way your Camera is set up.

blur effect. You you duplicate it

shutter angle so you can say, okay, implementation React hook and render something, and you're also runner.

of blur.

And that was the naive Implementation, As I said, if you just have a time Okay. Maybe we should start with,

and then there's, like, the sophisticated it would be so great.

Because rules to

Programmatically

Hair programming,

the fastest way to build modern websites. And Tupelo, an app built specifically for remote I could generate an introduction video for every single one of my courses simply based out of the data we have in our database

a couple of years ago, I would have said, what are you talking about? But I stumbled upon this project a couple Couple days ago only, and, I was like, this is really cool. We gotta get Johnny on to talk about it. So,

making videos using React.

What? Like, if you would have said that was a sentence,

giving you high resolution

2 awesome companies today. Gatsby, regardless of how many times you request Frame 32 of this

screen sharing and low latency remote control.

we are sponsored by or when I propose that they come on the podcast. And then a lot of people are like, Yeah. I've been listening for a couple years. Or, yeah, I've part a couple episodes here and there, so that's really cool.

This

so buckle up and grab that old handle because this ride is going to get wild.

is the Syntax supper club.

I sure hope you're hungry.

Wash those hands, pull up a chair, and secure that feed bag, because it's time to listen to Scott Talinsky and Wes Bos attempt to use human language to converse with and pick the brains of other developers. I thought there was gonna be food,

Oh, I'm starving.

So do you wanna give us a quick rundown of who you are and what you do and what Remotion is? You can take as long as short as you want. Yeah. Sure. My name is Tony Burger. In America, they call me Tony Burger. Both is fine. Is that your is that your real last name? That is my my real last name.

I've been a app developer previously the the idea of how Remotion works is