Skip to main content

Remotion 1.3

· 4 min read
Jonny Burger

Only 1 week after the initial launch, here is Remotion 1.3! In just 7 days, we have merged over 40 pull requests - just amazing! Let's go over the changes in this release.

2x faster - again!​

2 days ago, the rendering time was cut in half, and in this release, we managed to half it again! Check out this benchmark of the Spotify Wrapped example:

Remotion 1.1

hyperfine --min-runs 5  'npm run build -- --overwrite --concurrency=16'
Benchmark #1: npm run build -- --overwrite --concurrency=16
  Time (mean ± σ):     98.972 s ±  0.650 s    [User: 123.329 s, System: 10.103 s]
  Range (min … max):   97.951 s … 99.540 s    5 runs
hyperfine --min-runs 5  'npm run build -- --overwrite --concurrency=16'
Benchmark #1: npm run build -- --overwrite --concurrency=16
  Time (mean ± σ):     98.972 s ±  0.650 s    [User: 123.329 s, System: 10.103 s]
  Range (min … max):   97.951 s … 99.540 s    5 runs

Remotion 1.3

hyperfine --min-runs 5  'npm run build -- --overwrite --concurrency=16'
Benchmark #1: npm run build -- --overwrite --concurrency=16
  Time (mean ± σ):     17.921 s ±  0.224 s    [User: 36.492 s, System: 3.482 s]
  Range (min … max):   17.650 s … 18.264 s    5 runs
hyperfine --min-runs 5  'npm run build -- --overwrite --concurrency=16'
Benchmark #1: npm run build -- --overwrite --concurrency=16
  Time (mean ± σ):     17.921 s ±  0.224 s    [User: 36.492 s, System: 3.482 s]
  Range (min … max):   17.650 s … 18.264 s    5 runs

From 98 to 18 seconds - that's 5.5 times faster! At the same time, we have reached an important milestone: This 19-second long 720p video was rendered faster than realtime. Granted, my computer is faster than most (8-core Intel i9-9900K chip), but still very impressive!

We achieved this performance gain through various Puppeteer rendering pipeline optimizations. Big shoutout to jeetiss who implemented a sophisticated performance optimization that doesn't require a page reload for each frame anymore.

Plain-Javascript support​

My goal was to force Typescript on everybody - but I failed. Support for plain Javascript is now added! See here how to enable it. Proceed carefully 🙈

Type-safe configuration file​

Many options which you could pass in via CLI flags, you can now also add by adding a remotion.config.ts file in the repo. For example, if you want to increase the concurrency to the amount of threads you have and never want to write --overwrite, you can add the following to the config file:

tsx
import os from "os";
import { Config } from "remotion";
Config.Rendering.setConcurrency(os.cpus().length);
Config.Output.setOverwriteOutput(true);
tsx
import os from "os";
import { Config } from "remotion";
Config.Rendering.setConcurrency(os.cpus().length);
Config.Output.setOverwriteOutput(true);

You can see all the options on this page. The goal of making a config file in Typescript is to provide autocomplete, to easily highlight deprecated options and making it easier to show how to migrate in case the options change in the future.

Easing API​

While there was an Easing API, it was undocumented. Learn which Easing methods are available and how to use it with interpolate()!

tsx
import { Easing, interpolate } from "remotion";
interpolate(frame, [0, 100], {
  easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});
tsx
import { Easing, interpolate } from "remotion";
interpolate(frame, [0, 100], {
  easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

The small things​

In case you missed it​

Another example was added - Spotify Wrapped! This is a fully dynamic example where you can replace all data with a command line flag. There's a 2 hour tutorial on YouTube and the source code is on GitHub.