Please help me welcome Felix
Hello good evening
First of all, it's a real pleasure to be doing the first talk at this meetup after the long summer break
So first of all, a quick couple words about me. My name is Felix. I'm studying software engineering here in
Berlin at a place called CODE University of Applied Sciences, and I've been working with React for roughly five years
So I want to start off my talk with a little quote. In
2011 Jeff Atwood, one of the Stack Overflow founders, jokingly said
Any application that can be written in JavaScript will eventually be written in JavaScript
And if you look at the landscape right now, this seems to be half-held true
So we have mobile apps partially written in JavaScript with React Native, but even entire
applications, desktop applications, completely in JavaScript with Electron. So just to put this up a notch
we are going to talk about
Remotion today and
Remotion is a tool for creating videos in React and JavaScript
So, I mean, this doesn't really get any more ridiculous
Okay, so what is Remotion? It's actually rather simple. It's a collection of a couple of
tools and utilities that first of all make it easier to create a
single page application that
can then be turned into a video. You'll see what I mean with that in a second, then
it just takes a bunch of screenshots from your application and
Combines them into a video at the end. So I have prepared a little
budget edition of Remotion
with just
Vite
Here it is. It's
basically the traditional spinning
starter create React app, but as a video. So
this, I have the React logo and when I
modify this to add a frame parameter
it turns just a little bit. If I
pick this up a notch, it turns even more. And so
if I just change this, add this value and increase it ever so slightly and
take a screenshot every time, I think you can see where this is going. So it is
under the hood very simple. It's as I said an app created in Vite
consisting of just this hook which extracts the frame value, the frame
query parameter and returns it as a number and then I apply this a rotation based on the frame value and
then
This is a real magic, well, magic in quotes.
Marker, okay
It's really not good. Okay
in the end, I just launch a headless browser, which isn't so headless in this case and
Load up this page a hundred and fifty times in total
But I'm just changing the frame parameter every time and then I take a screenshot and after I'm done
I'm combining all of these frames, these screenshots that I just took into a video. So
I'm gonna run it. Quick warning if you're sensitive to any flickering
This has been flickering in the past. So you may want to look away for a couple seconds
So
Here we go
Just now taking a hundred and fifty screenshots in total
Combining them into this video and here we are a video of a spinning React logo
So
This approach is of course rather limited
So what would I do if I wanted to add audio to this?
What if I wanted to have multiple scenes one after the other?
I think you see where this is going. It can get quite cumbersome and this is where
Remotion comes in. So Remotion in the end, as I said, it's just a collection of tools and utilities
for building that thing out, that single page application of
which then can, of which Remotion, the library, can then later take a couple of screenshots off.
So it starts out very similarly as with the Vite
Mount your app and
then you define your video with resolution and frames per second
So how many frames you want the video to consist of every second, in this case 30
This will become actually
Will become relevant later on
so
After creating and mounting the app
We can start adding content to it
There's this helper component called Absolute Fill which fills out the entire space
Which fills out the entire screen and here I'm using Tailwind to give this a solid background color
And then I can already start using just regular React primitives like components to add
content to it
so
Oh, and I forgot and there's also a helper for using fonts from Google. So then
I'm adding this SVG and the title and this is how the video starts
Then
Because it's a video we want it of course to not be just a static website
We want it to be flashy and this is where that frame number from earlier comes into play
so again, there's a utility for this and
We need to get the current frame because
Remember how I earlier said that Remotion has to sort of reload your page for every frame
This is where you get the current frame number and because of the way how the rendering works you cannot use traditional
CSS animations or
More advanced libraries like Framer Motion instead
You need to sort of write your current state as a result based on the current frame number
Yeah
The current state of your video has to be defined by the current frame number
You can't use traditional means of animating
so
There's a spring function that you can see on the right creates this sort of spring animation when in the end
applied to the
through a simple CSS transform
Okay
but now
the next
Difficulty with my budget approach from earlier. What was
How do I deal with changing content, how do I handle changing scenes so
There we have now sequences just a basic
rich component for the video
Here's what people have to say text
I
Mean if I were to just mount both of them into my video, they would both show up at the same time, but using
Series and sequence I can segment my video into multiple
sequences
Which are which gets shown as a series one after the other so remember I set the frame rate
FPS to 50 and sorry to 30 and
Therefore this means if I now show the first part of the video for 50 frames
In other words, it's visible for one and two-thirds of a second and the one after
For one-third of a second less and therefore they don't get shown at the same time, but rather one after the other
Now this is a really fun part and
Actually the reason why in my opinion you would actually use Remotion in the first place
So as far as I'm aware, there are no great ways of using dynamic data with traditional
Animation workflows when using for example software like Adobe After Effects, so
What you want to do is of course load in custom data from somewhere from some source
for example from an API
In this case, I would have actually wanted to put in your tweets about hashtag react Berlin meetup
But unfortunately the API was paywalled
While preparing this talk
So we'll have to accept some mocked tweets
Wow, okay, so
remember again
coming back to the original concept of how the rendering works rendering works by taking a screenshot and
Before taking the screenshot the page has to load
But if you send a request asynchronously through JavaScript
the page will have already loaded and
Usually when working with react nowadays you use something like react query
then
You would have to put in some sort of loading state into your UI, but if you were to do the same here
Your video would now suddenly
Contain some text for example saying that your data is loading which of course is undesirable
So we need to pause the rendering or the taking of screenshots until our data was
Loaded so we first pause
then
we can actually fetch the data and
Then
We can after we put it into our state therefore the page was re-rendered we can tell Remotion that it can continue
So that means there will be a slight pause in the rendering while fetching the data
and
Continuing with that theme of loading asynchronous content if you know HTML and JavaScript
You might know that images are actually also
Asynchronous, so if you create an image class in JavaScript
There's also an onload event available so in other words the image doesn't load right away
So if you were to use a traditional image tag this would result in flickering so
Same procedure as before it doesn't slightly simplified. There's the special image tag which
Tells the renderer to pause or the screenshot taker
Tells it to pause until the image was loaded and then it can continue
and
Well just to really drive home the point that you can do it's that it's just react you can do whatever you like
I have the simple
Component set up where which tells you when the next react meetup is actually I hope it's correct so that I don't
Okay, we'll see about that
So and then well last challenge to tackle is audio as I mentioned earlier
You may would have to or I didn't mention
But you would have to set up some audio post processing for the video after you've combined all your frames
into a video
so
But now we're talking we're all in that react context therefore we handle it through
Components, so if you just want audio in the root it will start playing right away
that's useful for example for background music, but if we are talking about a
special sound effect like this
Wow
This should of course only start playing
Once the fitting sequence in the video is visible so you
Can delay it in this case the sequence based on?
Some arbitrary value so but the cool part about this is this
Just let's say this is frame. I'm starting in at frame 60
It's not actually starting at or not necessarily starting at frame 60 of the video itself
But at frame 60 of the current sequence, so this makes composing videos with a lot of components
significantly easier
Okay, so now it's time to render out that video which in the end
It's just a
Command this one's the application and then that's what I showed you earlier and
Couple things before I then show you the video
First of all thank you to Jonny Burger Jonny Burger. I'm sorry
Who helped me prepare the vid prepare the talk and gave me a look under the hood?
he's the main author or the author of the Remotion library and
Helped me prepare the talk and then
Quick plug so earlier I
Showed you how I had to use mocked tweets and
For that I use the project that I've been working on over the last couple of weeks called in ethic
Basically the idea is that you can take your already defined data schemas types in TypeScript, but
Whatever else is available for example. We also already support Swift
We take your already defined schemas, and then use AI to create fitting data for your use case
right from your source code
so therefore
Of course one use case would be
What I did here just some placeholder data
But this can also be very useful in some testing workflow you may have so if this sounds interesting
I'd love to tell you more about this afterwards
So now I'll show you the video the actual video not the very simple one
Let's see
Thank you, these are my socials and the full source code including the slides is available on github
Thank you