This video was made with code. But how?
HTML-код
- Опубликовано: 28 июн 2024
- Learn how to produce video content programmatically with HTML, CSS, and JavaScript thanks to Remotion - a React library that can create real MP4 videos github.com/remotion-dev/remotion
#javascript #tech #tutorial
🔗 Resources
Subscribe to @wcandillon and @JonnyBurger for more awesome content.
Source Code github.com/wcandillon/remotio...
Remotion Docs www.remotion.dev/
SVG in 100 Seconds • SVG Explained in 100 S...
📚 Chapters
00:00 This Intro is 100% Code
00:58 Introducing Remotion
01:49 Code your First Video
04:06 Make it Rain with Animated SVGs
07:50 Render as MP4
🔥 Get More Content - Upgrade to PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- How to make MP4 videos with code
- Remotion basics tutorial
- Video animation basic concepts
- Make videos with React.js
- Ways to create video programmatically 
Наука
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 RUclips 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! 😁
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 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
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 think this can be used for some really, really cool stuff. Thanks for sharing!
You have no idea, what you've done by giving me this content. Thank you 3000! 😌
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!
This is the future! Thank you for that high-quality video.
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 has so much potential! Incredible
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.
yup, that's a very clean way of making videos, and it's so cool that it comes with batteries included.
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.
Your videos are the only ones I don't watch at 1.5x speed. Love it.
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
Excellent! I really hate video editing, but I have a lot of experience in programmatic animation, so this will help me a lot!
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.
one of the coolest things i’ve seen in a while, thanks 🙏
This is so cool. Amazing work 🔥🔥🔥
Really looking forward to your new RGG (Remotion + GPT3 + Giphy) videos!
I had a project in my backpocket but never thought it possible until this video. Thank you!
can you share?
WOW, that's such a cool tool. I need that for project. Thank you for the tip!!
Having had started my career with motion graphics animation. I feel like I've have come full circle...😁
Omg mindblowing. 🤩 I’ll try this!
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 the coolest 'dev' content.
I'm definitely trying this for my next video. thank you 🙏
Amazing! Great job guys!
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
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.
DAMN this looks awesome I should really give that a try
This is bonkers. Absolute bonkers. Love it!
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.
Looks cool! Might try it. Your idea of using GPT3 with Giffy is good haha, could see that happening
so proud u used france as a weather background
Gotta definitely try this
literally always wanted to do this; dope
oh my god I'll try that in my free time :D
thanks for sharing :)
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
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 have always wondered if this was possible, and indeed!! It is soo cool :))
Very cool, thank you for sharing.
The phrase about being able to do anything with Javascript is really true
now that took coding to the next level
Uploaded an hour ago, Remotion already over 10k lol.
Well played.
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.
I swear the entire web-dev ecosystem is someone looking at something and going... "but can you do it with web tech?"
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?
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
This man could video edit with code better than I could video edit in general
Finally we can recreate flash, the best and most creative era of the internet.
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.
There is also ffmpeg plugin for Python to manipulate video files (throught code as well)
exactly what i was looking for
That may also open a new branch of generative art, that’s really awesome
The thumbnail for this video looks cool.
Jeff is still my favourite tech youtuber
here I am starting at basic JS and my mind is blown. wow, JS is so cool
This is why I ❤ JS. Anything possible in JS.
This has huge potential for data storytellers.
This is so dope!
Wow, that's a fancy way of writing CSS animations
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 ?
this looks awesome
I was checking out this and editly couple weeks ago, editly has a different approach it works with json5 config files to create videos.
Thanks for sharing! What do you use GIPHY SDK for?
I've done this with ffmpeg only. Been waiting for this for over 10 years
Very interesting way of creating videos
As someone that used Avisynth a lot, this is very cool!
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
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.
I wonder if I could use this to combine youtube videos with select start/end times and silence audio at certain times.
This is the coolest channel on RUclips!!!
this video makes my bluetooth headphones act up
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 :)
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!
Damn, that is amazing!!!
Interesting. Let's do it!
You guys are nuts 🤯
Amazing , thanks
this can be game-changing for nft space, wooo weee!
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. 🔥
Damn, this is so cool! It opens so many doors :)
This is freaking 😎, it's a game changer
i love the way that he described "mom" by his world
freaking amazing!
Video collaboration done right. Just use it like git.
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'm officially subbed with 7 different channels :D
Nice video and ideas
All videos in my channel are made with Remotion! 😉
I truly recommend it, it is such an amazing lib!
Maybe we can also integrate it with vue and other ones too?
Svelte
Nah it currently working on react only :(
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!