You have tested Remotion and provided an enormous amount of feedback! Thanks to it, this version of Remotion is vastly improved 🎉

Rendering time cut in half!​

It turns out rendering each frame as JPEG is much faster than rendering them in PNG and results in no visible quality difference. Using this trick, the time of the 'Rendering Frames...' of an example video went down from 14 seconds to 6.5 seconds! That's more than twice as fast.

Now that the rendering process is JPEG-based, a new flag --quality was added to command line. For server-side rendering, you may pass in a new imageFormat option. If you render a PNG sequence, Remotion will of course still deliver PNGs.

The goal is to make rendering even faster, finding further optimizations is going to be a very interesting task!

Windows support​

Windows support is very important (just like PHP). All the bugs that prevented proper Windows installation have now been fixed. Plus I now have a proper Windows setup so from now on Remotion will be tested on Windows as well!

Discord community​

We now have a Discord! Join now and chat about Remotion!

Licensing now available​

The terms of the company license have now been worked out and a billing system with Stripe has been set up. Contact me for pricing!

Roadmap​

A GitHub Project board has been setup with the goal of indicating the next priorities. Check it out!

Miscellaneous​

• Add .dockerignore
• Use npm init video instead of npx create-video
• Fix refs of <Image/> component
• Improve page management pool

What an extraordinary launch! In less than 24 hours, the Remotion announcement video has gotten more than 100'000 views on Twitter. The feedback was absolutely overwhelming!

Now it's time to iterate and make Remotion better. This release contains two new features: Customizing the Webpack configuration and new <Img> and </IFrame> components!

Customizing Webpack configuration​

See docs

People had wild ideas on what to do with Remotion like importing MDX files or using React Native components. Now it is possible!

When providing the possibility on how to configure Remotion, it was of big importance to provide both a high degree of flexibility and a good developer experience. This is how you update the webpack config:

remotion.config.ts

ts
import {overrideWebpackConfig} from '@remotion/bundler';
overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...currentConfiguration.module.rules,
        // Add more loaders here
      ],
    },
  };
});

There is a new Remotion config file, that you can write in Typescript. Updating the Webpack config uses the reducer pattern: You get the default configuration and it is your responsibility to return an updated Webpack config. You get type checking, auto completion and the flexibility to either only update a single property or pass in a completely new configuration. No black magic here - since this is just a pure function, the outcome will be very predictable.

New <Img /> and <IFrame /> components​

See docs

The purpose of these new components is to help with something that is easy to overlook in Remotion: Images or Iframes are being rendered, but Remotion does not wait until the loading of these network resources are complete. The result: Flicker in the end result! The correct thing is to wait using the delayRender API, but this is not very obvious. Now Remotion comes with built-in components that will wait until assets are loaded.

Bonus: ESLint rule​

To prevent shooting yourself into your foot, Remotion now comes with an ESLint rule that warns if you use the native <img>, <iframe>, <video> or <audio> tags. These tags work better when you use the Remotion-wrapped versions instead.

Upgrading is easy​

Simply type

npm run upgrade

in your project and you'll get all the newest Remotion packages! Maybe you also noticed that there is a banner in the editor that notifies you when an upgrade is available.

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 app¹ 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
yarn create video

and then read the documentation. Let me know on Twitter what you think!