Introducing Remotion
I've been using After Effects for many years, but it's always been a dream of mine to code my videos instead. In the React ecosystem, I am used to being able to take advantage of powerful composition, reusability, to be able to customize the experience for every user. To use scripts, linters and external dependencies to make my life easier as a coder.
So as a proof of concept I tried to make a trailer for my AnySticker app1 in React, and to render each frame using Puppeteer and stitch them together using FFMPEG.
The final result was a video that I thought was the best one I created yet. And I realized there was something to the idea.
This is my attempt to create a tool for the community that allows you to write videos in React. Obviously this is a huge undertaking, so this is not a product with hundreds of different features built in. Rather, following the React philosophy, this is an attempt to create a minimal fundament for rendering videos in React. Basically, you get a blank canvas, and you create your motion graphics using existing web technologies built into the browser and your favorite external libraries. Remotion is so minimal in fact, it consists of only 5-6 APIs that you need to learn to get started.
To get started is super easy. Assuming you already have Yarn, run:
bash
bash
and then read the documentation. Let me know on Twitter what you think!