This video was made with code. But how?

#javascript #tech #tutorial

🔗 Resources

Subscribe to @wcandillon and @JonnyBurger for more awesome content.

📚 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

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
- Ways to create video programmatically

[wcandillon]

Coding this video with you and Jonny was crazy fun. Let's do it again 🙌🏼

[pesterenan]

As if making videos wasn't already difficult, you added programming on top of it... I love it!

[JonnyBurger]

You are the best man! Thanks for the collaboration, we truly had a lot of fun 😊

[magicalnoodles]

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!

[thomasgrove]

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.

[kevinstern]

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.

[nezby]

The rain could use some different z values with different speeds at different z values it looks so much better that way

[qUBr-]

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

[finsflexin]

As the saying goes, “Any application that can be written in TypeScript React, will eventually be written with TSX.”

[HassanShahidCh]

I swear the entire web-dev ecosystem is someone looking at something and going... "but can you do it with web tech?"

[Mekuso]

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.

[ГеоргиЧавдаров-вз]

This is the future! Thank you for that high-quality video.

[Kolibril]

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.

[IngwiePhoenix_nb]

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.

[Hypnusrecords]

Your videos are the only ones I don't watch at 1.5x speed. Love it.

[iamredencio]

You have no idea, what you've done by giving me this content. Thank you 3000! 😌

[rubenuijtde]

I’m already imagining ways to create school presentations using code for those little extra points. Thanks!

[LaviYatziv]

Having had started my career with motion graphics animation. I feel like I've have come full circle...😁

[That_Darned_S]

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.

[anouarbf]

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<3