yeah you are kinda right. but if you want to make a data driven videos or graph something programmatically then there is a use case. there is a library called manim in python which allows you to make math video. 3b1b UA-cam channel uses it
Most professional grade 3D/2D video, graphics software come with their own scripting language. You could always make pixar like full feature film using just programming.
Atwood's Law: “Any application that can be written in JavaScript, will eventually be written in JavaScript.” P.S. - Just found out about this law today and am totally convinced
I imagine in the future we can create videos that update themselves. One of the biggest problems in this community is how fast things become outdated. Imagine if we could create tutorials based on documentation and when the documentation updates so does the video ? One day.
That's a pretty sick idea for the potential app/project. Just imagine having this in your resume over the boring movie app or "insert any known app" clone.
The potential with this is absolutely insane. With enough work and though put into structuring things, you can actually make something resembling a quick wizard of video creation. You select the things you want in the video, in what sequence, with what information, etc. Then, you just click "Finish" and a complete custom video gets made with your exact specifications. All you need to do is perhaps add voiceover, and done!
If you already know Python and Numpy, the pip package "imageio" allows you to create video files as well, by calling append_data on a Writer object. That gives you total control over every pixel in the video. Very handy for when you want total control of what the visual result should be.
If you want control over every pixel, just create a bunch of bitmaps and put them into an uncompressed container named .avi Now you have a (huge filesize) video which you can turn into a more convenient format using any number of tools and libraries
@@borstenpinsel that's an option too, but it's not programmatic (unless you render the images through some graphics library in which case you can just do what I suggested and skip the ffmpeg step)
@@gb76231 probably means z-index among the raindrops itself while France has the lowest z-index. imo that's not needed. It's just that raindrops are too big here + random speed needed.
Thanks for this, the project file, and everything you do. Longtime motion graphics artist and more recently learning to code. It's tough going, but having example files like this is one of the most helpful things for learning.
People love to bash react for being so unopinionated but it is only with react that you can write your own custom renderer for any platform and still use your existing js knowledge and apply them across different spectrums. It's very very hard to implement a library like this in other frameworks effectively. Great job by the contributors.
It would be cool to see automatocally animated changes in code snippets. Scenario: A code block of 4 lines, one line is added in the middle. Animation: The last two lines move down with a shift animation, then the middle line fades in. The animator would one provide the before and the after code snippet, the rest is done by remotion.
This might finally solve my problem of being visually impaired but a good-ish coder. I can just code my videos xD. I used RevealJS for countless presentations before, this might help out in the other department then. Really cool, thanks for showcasing this. Absolutely leaving a star there.
Making powerful software has gotten so stupid easy. It really kind of mind blowing. At least that's my perspective as a long time developer. 20 years ago I said we're still at the very beginning of the digital age. I feel that more strongly than ever.
@@tdiblik there are many uses, you could make a live dynamic livestream without complex and messy systems, you can also make data driven, automated youtube videos
Can't happen, won't happen. Svelte is very much a black box filled with all sorts of compiler magic. It doesn't expose a vdom that you can translate across multiple platforms , it only uses the browser's Dom. Only way this will happen is if one of the core contributors makes this happen but it is unlikely. Learn proper javascript (or better, typescript) and learn react instead. It's a better investment that teaches you js instead of relying on compiler magic to fill in your shortcomings.
@@That_Darned_S he is just pissy cause react is really bloated since it’s not compiled and instead relies on a heady virtual dom. Since when is writing JavaScript not enough ? As far as I’m aware writing JSX is more of a handicap than svelte flavor of JavaScript which looks and acts like pure JavaScript. You said learning proper JavaScript is a better investment than why learn JSX? That’s not really JavaScript either lol. Before you recommend stuff to people at least realize how stupid it sounds to recommend React as it makes you a better JavaScript developer xD
@@tylerlaceby ur talking like jsx is something completely different syntax, will take u just few minutes to get used to it. Ur points maybe are correct but ur counter argument nah
@@tylerlaceby jsx is syntactic sugar that gets transpiled to react.createElement calls. Svelte, too uses a custom template language that is like jsx. The kind of compiler magic svelte does is on a whole different level -- your code will not even remotely look the same after it is compiled. Without a virtual Dom there is no way for react to understand the component hierarchy. The vdom is what allows react native, and remotion to exist. Also yes react will make you a better js developer as it does not rely on compiler magic of the same scale as svelte or vue. Most people who prefer those frameworks are new and don't really know how to deal with js that well. Svelte's ecosystem sucks and it will never have libraries like remotion.
@@tylerlaceby In this day and age there is not such thing as plain js. You always need transpilers and compilers so that you can keep using the latest features while being able to support older browsers, that being said react is the closest to being plain js as it does not use anything else other than babel and that too is optional, you could keep using React.createElement if you wanted to. And literally every js-based app uses babel as it is a fundamental part of the tooling. React really DOES teach you a lot about functional programming patterns, about application structuring (as it is unopinionated, you have to dictate how to architecture it). Svelte on the other hand? it's a different game. The compiler is basically a giant black box designed to simplify the code, therefore what code you write isn't what the output is, it's far from what you've written. It's an abstraction over an abstraction over an abstraction -- great for beginners, bad for people who want to do something unique (like in case of remotion -- mapping components to a set of 'frames' to be used as data to be fed into ffmpeg), it just can't be done easily in Svelte. Keep on hating, everyone knows your lack of knowledge is why you cling onto frameworks like svelte.
Johnny is really a driven person. I've been following him for a year now, I was blown away by this concept a year ago. Lot of progressions after that, they also won a hackathon I beleive. I always wanted you to check this out Jeff. Great job!
This might eventually revolutionize educational content. Potentially easy access to web animations that can replicate more elaborate effects usually reserved for experienced video editors and professional video editing software is something I've always wanted to see.
While Remotion is next level cool and super flexible, I made something similar called «editly» back in the day, for more simple use cases like stitching together videos from the command line with fancy transitions and colors
You should make a video about tampermonkey, it is basically a chrome extension allows you to inject JavaScript into pages. You can use it to make stuff like themes and addons for websites.
@@blazkify no problem, but it’s just for fun and a little bit of scripting on your own representation of a website. Imho there’s more useful stuff you can do :D
imagine if youtube eventually supported something like this natively to support infinite quality in videos created in that style feel like some channels would be built around that
I actually managed to do this. For people who are confused, do this: 1) Download and install node.js 2) make sure that you are in the correct folder when using the terminal, create a new folder or go to an existing project 3) use "npm init video" to learn how to create a helloworld video, or use "npm start" to edit an existing video (refer to step 2!)
As a French, I didn't even realised that you used a map of France for your weather scene before you said it. I felt so natural to me that I didn't even questioned the fact that I was watching a video in English 😅
That's a lot of work to make a video. I wonder if you thought it was easier than just editing with a timeline or if you think that it would just make automating some parts of batch editing easier.
@@Fireship That sounds like it could eventually replace all those current Whiteboard Animation Tools that many of these Self Improvement Channels like to use.
You know videos that display graphs? (like "minecraft gas gas meme" if you want an example) This must be insanely powerful for this kind of data oriented videos.
It would be kinda cool to have the unrendered video on your website. You could have crisp video with a tiny filesize that probably is less processing intensive than loading a new image each frame. Imagine a video streaming site with only HTML video, your servers wouldn't even need much storage or a high bandwidth connection and the loading times would still be snappy. That could be revolutionary
I've been doing something similar with the Greensock. What I've been looking for is a way to render to a video container... EDIT: Okay I got the part about rendering using ffmpeg. I've used this in other setups ( eg. Phantom.js renders ).. The problem is when encoding from code, ffmpeg can introduce dropped frames. Hope this isn't the case but will give it a go.. Thanks :)
Bloody'el this is brilliant 🙌🏾🙌🏾 but the thought of editing JavaScript code in 4 second snippets for a total of 521 seconds made my brain hurt and had to go take a nap before coming to finish the video 😪😪😪 We don't deserve the amount of effort you put into these kind sir
He said that future videos will be created by combining Remotion, GPT, and the Giphy SDK. I figured he already had some sort of ultra-advanced AI to be able to push out so many high quality videos.
This is swesome. Why can't you guys integrate it with ChatGPT API and then people can easily just give prompts and ChatGPT can modify codes accordingly as well as generate SVG images.
Tried it. It's pretty cool, and unfortunately one of the only libraries I can find to do something similar. Put simply, I really wish people would stop stuffing react in places it doesn't belong. The render process for Remotion takes forever, especially on comparatively mid-tier hardware. I'm just looking for a library that makes it possible to batch-edit a bunch of videos and apply the same styles (logo, progress bar, subtitles, etc.) Across all of them. Lo, my search for something that doesn't suck continues.
Coding this video with you and Jonny was crazy fun. Let's do it again 🙌🏼
:D
William 👋🏻
Wizard
Hey I'm wondering how is this different from creating animations with CSS + screen recorder
I saw the repo today and was wondering when the video will drop. Awesome collab from awesome creators! 🚀🔥
As if making videos wasn't already difficult, you added programming on top of it... I love it!
yeah you are kinda right. but if you want to make a data driven videos or graph something programmatically then there is a use case.
there is a library called manim in python which allows you to make math video. 3b1b UA-cam channel uses it
Você por aqui cara kkkkkk Acabo de sair do JN e encontro você
Most professional grade 3D/2D video, graphics software come with their own scripting language. You could always make pixar like full feature film using just programming.
@@chiragsingla. I always wondered how did his videos/.
As a react developer this seems much more accessible to me than having to learn adobe premier and such
Atwood's Law:
“Any application that can be written in JavaScript, will eventually be written in JavaScript.”
P.S. - Just found out about this law today and am totally convinced
lol yeah. there is even a javascript based operating system called NodeOS.
oh no
Fixed:
“Any application that can be written in JavaScript will eventually be written in -JavaScript- TypeScript and compiled to JavaScript.”
@@Atabascael NodeOS is written mostly in C, because it uses the Linux kernel.
@@Atabascael there's a lite one built in JS, but it's easy to find
You are the best man! Thanks for the collaboration, we truly had a lot of fun 😊
Love your work, Jonny!
I love your last name, Burger🍔
Very interesting projet Jonny.
Editing as code seems like a promising idea to me.
Also, thanks for the generous Free Tier.
gratuliere bro! du hesches in coding olymp gschafft 😀
@@BenjaminAster Thanks a lot! 😁
I imagine in the future we can create videos that update themselves. One of the biggest problems in this community is how fast things become outdated. Imagine if we could create tutorials based on documentation and when the documentation updates so does the video ? One day.
GitVideo
Hold on, my youtube video has a breaking change. Better dig thru the dependencies
Great idea
That's a pretty sick idea for the potential app/project. Just imagine having this in your resume over the boring movie app or "insert any known app" clone.
@@Will4_U also no compilation required
The potential with this is absolutely insane. With enough work and though put into structuring things, you can actually make something resembling a quick wizard of video creation. You select the things you want in the video, in what sequence, with what information, etc.
Then, you just click "Finish" and a complete custom video gets made with your exact specifications. All you need to do is perhaps add voiceover, and done!
If you already know Python and Numpy, the pip package "imageio" allows you to create video files as well, by calling append_data on a Writer object. That gives you total control over every pixel in the video. Very handy for when you want total control of what the visual result should be.
there is also manim which 3b1b created and uses to make his videos
If you want control over every pixel, just create a bunch of bitmaps and put them into an uncompressed container named .avi
Now you have a (huge filesize) video which you can turn into a more convenient format using any number of tools and libraries
@@borstenpinsel that's an option too, but it's not programmatic (unless you render the images through some graphics library in which case you can just do what I suggested and skip the ffmpeg step)
You can also do animations in Matplotlib.
The rain could use some different z values with different speeds at different z values it looks so much better that way
🤣🤣🤣
oh yeah how?
Wdym different z values? You want some raindrops to go under france?
do falling raindrops speed vary?
@@gb76231 probably means z-index among the raindrops itself while France has the lowest z-index.
imo that's not needed. It's just that raindrops are too big here + random speed needed.
Thanks for this, the project file, and everything you do.
Longtime motion graphics artist and more recently learning to code. It's tough going, but having example files like this is one of the most helpful things for learning.
As the saying goes, “Any application that can be written in TypeScript React, will eventually be written with TSX.”
Any application that can be written in Javascript, will eventually be written in Javascript, and then thrown and replaced with typescript
The TypeScript Center for Children Who Can't JS Good
People love to bash react for being so unopinionated but it is only with react that you can write your own custom renderer for any platform and still use your existing js knowledge and apply them across different spectrums. It's very very hard to implement a library like this in other frameworks effectively. Great job by the contributors.
React haters don't make sense. It will continue to grow regardless of detractors.
It would be cool to see automatocally animated changes in code snippets.
Scenario: A code block of 4 lines, one line is added in the middle.
Animation: The last two lines move down with a shift animation, then the middle line fades in.
The animator would one provide the before and the after code snippet, the rest is done by remotion.
This might finally solve my problem of being visually impaired but a good-ish coder.
I can just code my videos xD. I used RevealJS for countless presentations before, this might help out in the other department then.
Really cool, thanks for showcasing this. Absolutely leaving a star there.
You have no idea, what you've done by giving me this content. Thank you 3000! 😌
I’m already imagining ways to create school presentations using code for those little extra points. Thanks!
Making powerful software has gotten so stupid easy. It really kind of mind blowing. At least that's my perspective as a long time developer. 20 years ago I said we're still at the very beginning of the digital age. I feel that more strongly than ever.
This is the future! Thank you for that high-quality video.
Having had started my career with motion graphics animation. I feel like I've have come full circle...😁
THIS IS EXACTLY WHAT IVE BEEN LOOKING FOR!!! Thank you so much fire ship!
Hi, really currious, why? I mean, what's the ussage here?
@@tdiblik there are many uses, you could make a live dynamic livestream without complex and messy systems, you can also make data driven, automated youtube videos
A Svelte version of Remotion would be lovely!
Can't happen, won't happen. Svelte is very much a black box filled with all sorts of compiler magic. It doesn't expose a vdom that you can translate across multiple platforms , it only uses the browser's Dom. Only way this will happen is if one of the core contributors makes this happen but it is unlikely. Learn proper javascript (or better, typescript) and learn react instead. It's a better investment that teaches you js instead of relying on compiler magic to fill in your shortcomings.
@@That_Darned_S he is just pissy cause react is really bloated since it’s not compiled and instead relies on a heady virtual dom.
Since when is writing JavaScript not enough ? As far as I’m aware writing JSX is more of a handicap than svelte flavor of JavaScript which looks and acts like pure JavaScript. You said learning proper JavaScript is a better investment than why learn JSX? That’s not really JavaScript either lol.
Before you recommend stuff to people at least realize how stupid it sounds to recommend React as it makes you a better JavaScript developer xD
@@tylerlaceby ur talking like jsx is something completely different syntax, will take u just few minutes to get used to it. Ur points maybe are correct but ur counter argument nah
@@tylerlaceby jsx is syntactic sugar that gets transpiled to react.createElement calls. Svelte, too uses a custom template language that is like jsx. The kind of compiler magic svelte does is on a whole different level -- your code will not even remotely look the same after it is compiled. Without a virtual Dom there is no way for react to understand the component hierarchy. The vdom is what allows react native, and remotion to exist. Also yes react will make you a better js developer as it does not rely on compiler magic of the same scale as svelte or vue. Most people who prefer those frameworks are new and don't really know how to deal with js that well. Svelte's ecosystem sucks and it will never have libraries like remotion.
@@tylerlaceby In this day and age there is not such thing as plain js. You always need transpilers and compilers so that you can keep using the latest features while being able to support older browsers, that being said react is the closest to being plain js as it does not use anything else other than babel and that too is optional, you could keep using React.createElement if you wanted to. And literally every js-based app uses babel as it is a fundamental part of the tooling.
React really DOES teach you a lot about functional programming patterns, about application structuring (as it is unopinionated, you have to dictate how to architecture it). Svelte on the other hand? it's a different game. The compiler is basically a giant black box designed to simplify the code, therefore what code you write isn't what the output is, it's far from what you've written. It's an abstraction over an abstraction over an abstraction -- great for beginners, bad for people who want to do something unique (like in case of remotion -- mapping components to a set of 'frames' to be used as data to be fed into ffmpeg), it just can't be done easily in Svelte. Keep on hating, everyone knows your lack of knowledge is why you cling onto frameworks like svelte.
Really looking forward to your new RGG (Remotion + GPT3 + Giphy) videos!
Johnny is really a driven person. I've been following him for a year now, I was blown away by this concept a year ago. Lot of progressions after that, they also won a hackathon I beleive. I always wanted you to check this out Jeff. Great job!
Your videos are the only ones I don't watch at 1.5x speed. Love it.
This might eventually revolutionize educational content.
Potentially easy access to web animations that can replicate more elaborate effects usually reserved for experienced video editors and professional video editing software is something I've always wanted to see.
Could this replace video files altogether if you skip the conversion, and even allow interaction with individual elements?
THANK YOU I've been looking for something like this for YEARS
yup, that's a very clean way of making videos, and it's so cool that it comes with batteries included.
Nice to see a video about remotion, I can still remember the first time when I saw a post about it on reddit.
Now I can easily add animations to videos. Thanks Remotion team and Fireship ❤️
OMG i was thinking lately to learn video editing so i can start youtube after that but now you came with a brilliant idea for me thank you
While Remotion is next level cool and super flexible, I made something similar called «editly» back in the day, for more simple use cases like stitching together videos from the command line with fancy transitions and colors
You should make a video about tampermonkey, it is basically a chrome extension allows you to inject JavaScript into pages. You can use it to make stuff like themes and addons for websites.
No please don’t 🙈 Those plugins are as old as the internet. :D
@@davids9096 so whats the problem?
that's userscript
At first i used these extensions to inject code to a website. Then I learned how to make browser extensions themselves.
@@blazkify no problem, but it’s just for fun and a little bit of scripting on your own representation of a website. Imho there’s more useful stuff you can do :D
I think this can be used for some really, really cool stuff. Thanks for sharing!
This is why I ❤ JS. Anything possible in JS.
I had a project in my backpocket but never thought it possible until this video. Thank you!
can you share?
imagine if youtube eventually supported something like this natively to support infinite quality in videos created in that style
feel like some channels would be built around that
Finally we can recreate flash, the best and most creative era of the internet.
I actually managed to do this. For people who are confused, do this:
1) Download and install node.js
2) make sure that you are in the correct folder when using the terminal, create a new folder or go to an existing project
3) use "npm init video" to learn how to create a helloworld video, or use "npm start" to edit an existing video (refer to step 2!)
"Download and install node.js" - use NVM to manage node.
You have the coolest 'dev' content.
Jeff is still my favourite tech youtuber
Excellent! I really hate video editing, but I have a lot of experience in programmatic animation, so this will help me a lot!
This has so much potential! Incredible
As a French, I didn't even realised that you used a map of France for your weather scene before you said it. I felt so natural to me that I didn't even questioned the fact that I was watching a video in English 😅
Same!
That's a lot of work to make a video. I wonder if you thought it was easier than just editing with a timeline or if you think that it would just make automating some parts of batch editing easier.
It's most useful when you want to generate graphics automatically based on some underlying data. The more data you have, the more powerful it becomes.
@@Fireship That sounds like it could eventually replace all those current Whiteboard Animation Tools that many of these Self Improvement Channels like to use.
@@Fireship So... Plugin replacement ?
Components can be recicled. Thats the beauty.
You know videos that display graphs? (like "minecraft gas gas meme" if you want an example)
This must be insanely powerful for this kind of data oriented videos.
All videos in my channel are made with Remotion! 😉
I truly recommend it, it is such an amazing lib!
one of the coolest things i’ve seen in a while, thanks 🙏
All you'd need now is to make an AI to recreate your voice, and you'll never have to physically make a video ever again. 🔥
This man could video edit with code better than I could video edit in general
The phrase about being able to do anything with Javascript is really true
I swear the entire web-dev ecosystem is someone looking at something and going... "but can you do it with web tech?"
here I am starting at basic JS and my mind is blown. wow, JS is so cool
It would be kinda cool to have the unrendered video on your website. You could have crisp video with a tiny filesize that probably is less processing intensive than loading a new image each frame.
Imagine a video streaming site with only HTML video, your servers wouldn't even need much storage or a high bandwidth connection and the loading times would still be snappy. That could be revolutionary
FYI, you can also embed unrendered Remotion videos in any React app :) www.remotion.dev/player
I've been doing something similar with the Greensock. What I've been looking for is a way to render to a video container... EDIT: Okay I got the part about rendering using ffmpeg. I've used this in other setups ( eg. Phantom.js renders ).. The problem is when encoding from code, ffmpeg can introduce dropped frames. Hope this isn't the case but will give it a go.. Thanks :)
Uploaded an hour ago, Remotion already over 10k lol.
Well played.
I've done this with ffmpeg only. Been waiting for this for over 10 years
Bloody'el this is brilliant 🙌🏾🙌🏾 but the thought of editing JavaScript code in 4 second snippets for a total of 521 seconds made my brain hurt and had to go take a nap before coming to finish the video 😪😪😪 We don't deserve the amount of effort you put into these kind sir
Is this what people got out of Adobe Flash back in the day? It rings a bunch of bells...
This is bonkers. Absolute bonkers. Love it!
This is so cool. Amazing work 🔥🔥🔥
The thumbnail for this video looks cool.
This has huge potential for data storytellers.
This could be great for creating web animations not necessarily exported as mp4
I wonder if this might even save bandwidth compared to embedded videos.
@@LinkEX it would, depending on the rest of your assets
Omg mindblowing. 🤩 I’ll try this!
There is also ffmpeg plugin for Python to manipulate video files (throught code as well)
If I wouldn't have realized this video was created in a unusual if you wouldn't have mentioned it.
I'm astonished by what is possible.
so proud u used france as a weather background
Video collaboration done right. Just use it like git.
Using UI framework to build video editor on top sounds like a weird idea to me, but I guess the only important thing is for it to be convenient
You may like Motion Canvas. It's procedural TS (it's API requires knowledge of generator functions, I will note) and works very similarly
love how he calls "mom" his "world" 3:00
I'm definitely trying this for my next video. thank you 🙏
Looks cool! Might try it. Your idea of using GPT3 with Giffy is good haha, could see that happening
Amazing! Great job guys!
I thought this was going to be a video on Motion Canvas, another similar package. This comes across much more complicated and less feature rich.
WOW, that's such a cool tool. I need that for project. Thank you for the tip!!
Wow, and I thought me editing coding videos with LumaFusion on an iPad was pretty out there 😂
This would be perfect for AI TikToks / Shorts / Stories!
That may also open a new branch of generative art, that’s really awesome
now that took coding to the next level
i think this guy can change the world
this can be game-changing for nft space, wooo weee!
Wow, that's a fancy way of writing CSS animations
This has inspired me to build something very cool...
I hope to reply to this comment with a demo within 3 weeks.
Very cool, I'm going to mess with this tonight... might be old news but I'd love to see a video on Phaser.js!
awesome video
everyone can have fun coding, it's just a matter of knowing how
i love the way that he described "mom" by his world
Ngl, i feel this is more easy than most editing softwares. lol
At start i thought that there was a mistake on the video. But next, i understand that fireship said that his mom is his world. 🥺
As someone that used Avisynth a lot, this is very cool!
0:48 don't touch France !!
You guys are nuts 🤯
DAMN this looks awesome I should really give that a try
I can dig this but I may have to watch a few more times😅
He said that future videos will be created by combining Remotion, GPT, and the Giphy SDK. I figured he already had some sort of ultra-advanced AI to be able to push out so many high quality videos.
This is the coolest channel on UA-cam!!!
I'm officially subbed with 7 different channels :D
This is swesome. Why can't you guys integrate it with ChatGPT API and then people can easily just give prompts and ChatGPT can modify codes accordingly as well as generate SVG images.
Tried it.
It's pretty cool, and unfortunately one of the only libraries I can find to do something similar.
Put simply, I really wish people would stop stuffing react in places it doesn't belong. The render process for Remotion takes forever, especially on comparatively mid-tier hardware.
I'm just looking for a library that makes it possible to batch-edit a bunch of videos and apply the same styles (logo, progress bar, subtitles, etc.) Across all of them.
Lo, my search for something that doesn't suck continues.
Maybe we can also integrate it with vue and other ones too?
Svelte
Nah it currently working on react only :(
"if there's a tornado, show the entire town being destroyed"😂😂
I am a big fan of your videos, this is so cool. Can you also make a video on any React framework for creating a canvas type app like Miro ?
Interesting. Let's do it!
Gotta definitely try this