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.
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!
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.
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.
@@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.
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)
@@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
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 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.
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.
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.
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.
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.
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
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.
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 😅
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
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.
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
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!)
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
A more elegant way (in my opinion) to create an array like this is to use Array.from({ length: 300 }, (_, i) => i). That gives you [0, 1, 2, 3, ... 299].
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 :)
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
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! 😁
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!
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
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
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.
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.
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.
You have no idea, what you've done by giving me this content. Thank you 3000! 😌
This is the future! Thank you for that high-quality video.
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
Your videos are the only ones I don't watch at 1.5x speed. Love it.
I’m already imagining ways to create school presentations using code for those little extra points. Thanks!
THANK YOU I've been looking for something like this for YEARS
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
yup, that's a very clean way of making videos, and it's so cool that it comes with batteries included.
You have the coolest 'dev' content.
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 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.
Now I can easily add animations to videos. Thanks Remotion team and Fireship ❤️
Nice to see a video about remotion, I can still remember the first time when I saw a post about it on reddit.
Having had started my career with motion graphics animation. I feel like I've have come full circle...😁
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
Finally we can recreate flash, the best and most creative era of the internet.
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 is why I ❤ JS. Anything possible in JS.
Really looking forward to your new RGG (Remotion + GPT3 + Giphy) videos!
I swear the entire web-dev ecosystem is someone looking at something and going... "but can you do it with web tech?"
I think this can be used for some really, really cool stuff. Thanks for sharing!
one of the coolest things i’ve seen in a while, thanks 🙏
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.
Wow. The remotion homepage links to this as the demo. That's how you know. Go Fireship!
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.
This has so much potential! Incredible
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 man could video edit with code better than I could video edit in general
I had a project in my backpocket but never thought it possible until this video. Thank you!
can you share?
so proud u used france as a weather background
The phrase about being able to do anything with Javascript is really true
This is so cool. Amazing work 🔥🔥🔥
The thumbnail for this video looks cool.
This is bonkers. Absolute bonkers. Love it!
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
Uploaded an hour ago, Remotion already over 10k lol.
Well played.
Jeff is still my favourite tech youtuber
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?
Omg mindblowing. 🤩 I’ll try this!
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!
Excellent! I really hate video editing, but I have a lot of experience in programmatic animation, so this will help me a lot!
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
This is the coolest channel on UA-cam!!!
i love the way that he described "mom" by his world
Is this what people got out of Adobe Flash back in the day? It rings a bunch of bells...
Amazing! Great job guys!
here I am starting at basic JS and my mind is blown. wow, JS is so cool
Ngl, i feel this is more easy than most editing softwares. lol
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.
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.
Wow, that's a fancy way of writing CSS animations
I've done this with ffmpeg only. Been waiting for this for over 10 years
This has huge potential for data storytellers.
I'm definitely trying this for my next video. thank you 🙏
WOW, that's such a cool tool. I need that for project. Thank you for the tip!!
"if there's a tornado, show the entire town being destroyed"😂😂
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
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. 🔥
There is also ffmpeg plugin for Python to manipulate video files (throught code as well)
now that took coding to the next level
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.
oh my god I'll try that in my free time :D
thanks for sharing :)
i think this guy can change the world
love how he calls "mom" his "world" 3:00
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
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
6:41 can someone explain what Array(300).fill(true) does? Does it create an array with 300 values of just true?
yes
A more elegant way (in my opinion) to create an array like this is to use Array.from({ length: 300 }, (_, i) => i).
That gives you [0, 1, 2, 3, ... 299].
I'm officially subbed with 7 different channels :D
DAMN this looks awesome I should really give that a try
Finally a way I can edit videos
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!
I have always wondered if this was possible, and indeed!! It is soo cool :))
All videos in my channel are made with Remotion! 😉
I truly recommend it, it is such an amazing lib!
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!
awesome video
everyone can have fun coding, it's just a matter of knowing how
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
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.
You could write your JS right inside the Adobe After Effects ))
this can be game-changing for nft space, wooo weee!
Damn, this is so cool! It opens so many doors :)
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 :)
Man, "coding a video" is something I'm going to need to get used to
this video makes my bluetooth headphones act up
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. 🥺
You guys are nuts 🤯
Maybe we can also integrate it with vue and other ones too?
Svelte
Nah it currently working on react only :(
Gotta definitely try this
Any Python alternative for Remotion library?
This has inspired me to build something very cool...
I hope to reply to this comment with a demo within 3 weeks.
I can dig this but I may have to watch a few more times😅