import { ThreeDPlayer } from "../components/3DPhonePlayer.tsx";

Welcome to the release notes of Remotion 2.2! It's been a while since v2.1, but in the meanwhile we had a dozen smaller releases inbetween. This post summarizes the highlights of the past 2 months 🎉.

Environment variable support​

We developers use environment variables extensively to manage configuration, secrets and other stuff you don't want to commit to a GitHub repo. If you write videos with code, environment variables are useful too!

We added support for environment variables from the CLI, using a .env file, and allowing you to pass environment variables via our Node.JS APIs too. Click here to learn more.

<Freeze /> component​

This new core component will freeze all of it's children and make them think that the video is paused at a certain time.

You can use it for example to display a still frame from a video:

MyVideo.tsx
tsx
import { Freeze, Video } from "remotion";
import myVid from "./vid.mp4";
 
export const MyVideo = () => {
  return (
    <Freeze frame={30}>
      <Video src={myVid} />
    </Freeze>
  );
};
Copy

MyVideo.tsx
tsx
import { Freeze, Video } from "remotion";
import myVid from "./vid.mp4";
 
export const MyVideo = () => {
  return (
    <Freeze frame={30}>
      <Video src={myVid} />
    </Freeze>
  );
};
Copy

However, it works for any content. As you can see the API is dead simple! You can combine it with the <Sequence> API to make any content play, pause and then continue again.

Read the docs for the <Freeze /> component here.

Video + Audio playbackRate​

This prop allows you to slow down or speed up video and audio elements! Now you can import a video in normal speed and play it in slow motion or timelapse without re-rendering the video.

LightningSpeed.tsx
tsx
import { Video } from "remotion";
import myVid from "./vid.mp4";
 
export const MyVideo = () => {
  return <Video src={myVid} playbackRate={4} />;
};
Copy

LightningSpeed.tsx
tsx
import { Video } from "remotion";
import myVid from "./vid.mp4";
 
export const MyVideo = () => {
  return <Video src={myVid} playbackRate={4} />;
};
Copy

While previewing, we are using the HTML5 playbackRate API, and when rendering, we will calculate the correct FFMPEG command for any tempo.

Learn more about the playbackRate props for <Audio /> and <Video />.

@remotion/three package​

In case you missed it, we released a new helper package for React Three Fiber!

import { PlayerExampleWithControls } from "../components/PlayerExampleWithControls.tsx";

This releases features new utility functions, improved developer experience and an experimental release of the Remotion Player!

New interpolateColors() function 🌈​

Now you can easily animate between colors and mix colors to create interesting animations using interpolateColors().

I personally used it to recreate Apple's 'Spring Loaded' logo in Remotion using only <div> elements.

Thanks for Shankhadeep Dey for implementing this feature!

New measureSpring() function 🌀​

One problem when using a spring animation for transitions is that you don't know the duration of the animation. This is why we added a new measureSpring() function!

Now you can adjust your timings in Remotion dynamically when changing spring configurations.

Thanks to Samuel Rodriguez-Lozano for implementing this feature!

Documentation and developer experience updates​

We invested time in making sure that if something goes wrong, you don't get stuck. Here are some things we did to improve your experience with Remotion:

• If you encounter a timeout, you will now see a stacktrace of where the delayRender() handle was not cleared. We also now have a troubleshooting page for timeouts and link to the documentation if you encounter the error.
• If you use Chromium and import an MP4 video, you get a more helpful error and we link to a help page.
• We added a guide for improving performance while development and while rendering.
• The server-side rendering APIs bundle(), getCompositions(), renderFrames() and stitchFramesToVideo() with all their parameters are now more properly documented.
• If an exception is thrown while rendering, the log output in the console is now better.

Alpha release of @remotion/player​

We are working on a Remotion player component that you can import into your React app. Today we are prereleasing the player for those who wish to experiment and provide us with feedback. Let us know what you think!

Read the documentation for @remotion/player

Test coverage updates​

We now have over 450 tests, and the Remotion core has a test coverage of over 80% now. Thanks to Tobias Boner, Calvin Falter and Jonas Brunner for continuining their massive testign initiative!

We now also test across different node versions (12, 14 and 16), npm versions (v6 and v7) and FFMPEG versions (4.1 and 4.4) in addition to testing on 3 different operating systems so we can confidently release new features quickly.

For contributors, we now have a TESTING.md file.

Miscellaneous​

• You can now press Shift+Right Arrow to jump 1 second forward in the timeline and Shift+Left Arrow to jump 1 second back.
• npm init video will now setup a Remotion project with NPM, yarn create video will setup a project with Yarn.
• Node 16 and NPM 7 is now better supported, no warnings will be shown during installation and execution.
• Fixed several audio rendering issues: [#292](https://github.com/remotion-dev/remotion/issues/292 #293 #320
• When the update banner appears in the editor, you can now click to copy the command.
• You can now pass a React ref to <Audio/> and <Video /> tags.
• We revamped the CLI output! How do you like it?
• The preview size option in the editor is now persisted, thanks Oluwatobiju Judah!
• In the editor, the transparency toggle is now enabled by default.

This is our biggest and best release so far - today we are unloading a lot of awesome, highly requested features!

Audio support​

We are happy to ship audio support with a flexible API!

You can import one or multiple audio tracks into your project, cut, trim and align them in your composition. The volume can be controlled for the entirety of a track, or you can control it frame by frame to create fade effects and much more. Apply your React mindset - Remotion doesn't care how you render the audio tag, just that it's there. The mechanic of how we tell FFMPEG to mix the audio just like you hear it in the browser preview is really complex and was challenging to build - we are very proud of the outcome!

Audio visualization​

With newly introduced audio visualization APIs, you can make your visuals react to the frequency of the audio.

What you need are the new getAudioData() and visualizeAudio() APIs that have been published in it's own package.

Read more about audio visualization in the docs or watch a sample video (the source can be found here).

Export as MP3, AAC, WAV​

You can now also completely omit the video from the output and only emit an audio file. Yes, Remotion can also be used as an audio editing program! Pass mp3, aac or wav as a codec using the --codec flag or in your config file.

@remotion/media-utils package​

This is a new helper package which includes functions useful for dealing with audio. Besides audio visualization, you can also for example measure the duration of an audio or video source, which is really useful for making a composition duration dynamic. The functions included are getAudioData(), getAudioDuration(), getVideoMetadata(), getWaveformPortion(), visualizeAudio() and useAudioData().

All of them except the last one are completely independent from the ideas of Remotion, so they might be a great fit for your other non-Remotion projects as well! This package is MIT-licensed, so you everybody can use it without obtaining a company license.

Rich Timeline (experimental)​

With the normal timeline, you don't see the full picture of all the media that you have placed in your composition. The reason is that the visualization you see is based on what's currently rendered at the position of your playhead.

Introducing a new timeline mode: The rich timeline will render additional frames other than the current one to gather enough information to visualize a full timeline. Sequences which are normally not rendered because the playback head is not within the time range of the sequence, will appear because Remotion is doing an additional render at a time where the sequence is visible.

By default the rich timeline feature is disabled, but will be enabled by default if the feedback is good. You may switch between the rich timeline and simple timeline by clicking the icon with the three lines. Try it out and let us know what you think!

ESBuild loader​

The traditional transpilation of Javascript and Typescript using babel-loader has been replaced by the faster esbuild-loader by default.

This will speed up bundling by a lot - hopefully you won't notice any other differences! If you for some reason need to go back to the previous behavior, you may override the Webpack config - we are releasing a helper that makes it easy.

Webpack caching​

Even though transpilation is done using ESBuild now, Webpack is still being used for bundling. We rely on Webpack features such as Hot Module Replacement, asset importing, it's strong loader ecosystem and now it's caching features.

When you run npm run build for the first time, you will get a message that a cache is building. From the second time on, bundling will be much faster, even if you change your code. You shouldn't have to ever do it, but you can opt out of caching.

Partial video rendering + Stills​

Want to render partial video or a still for thumbnail? You can do that with Remotion 2.0. We introduced a new CLI flag --frames to render a subset or a still of a video.

--frames=0-9 (To select the first 10 frames) or --frames=50 (To render a still of the 51st frame).

Learn more about the --frames CLI option.

@remotion/gif component​

A new GIF component released in the @remotion/gif package is now available. The <Gif /> component allows to load a local or remote GIF and synchronizes it with Remotions useCurrentFrame(). For that it parses the GIF using WebAssembly - basically it's really cool tech! Thanks a lot to @jeetiss for contributing this new component.

Learn more about the GIF component here.

Resizable editor panels​

In the editor, you can now resize the timeline as well as the left sidebar. Thanks a lot to Arthur Denner for this awesome contribution!

interpolate()​

interpolate() now supports arrays with lengths bigger than 2. Really useful for a lot of scenarios - for example you can create a combined fade in/fade out transition with one line.

tsx
const opacity = interpolate(
  frame,
  [0, 10, durationInFrames - 10, durationInFrames],
  [0, 1, 1, 0]
);
Copy

tsx
const opacity = interpolate(
  frame,
  [0, 10, durationInFrames - 10, durationInFrames],
  [0, 1, 1, 0]
);
Copy

170+ tests added​

While not strictly a new feature, this is definitely worth mentioning.

Calvin Falter, Jonas Brunner and Tobias Boner took Remotion as their project for their university seminar and contributed over 100 tests, strengthening the code and ironing out edge cases.

@cnnr contributed a really cool end-to-end test that tests the video seeking of Remotion and makes sure it is frame-accurate by matching the colors in each frame.

The remaining added tests are testing the tricky parts of audio rendering. Thanks to test-driven development, we've been able to catch regressions and ship really solid audio support.

The bottom line: In Remotion 1.5.4 we had total 43 tests, in Remotion 2.0 we added a total of 174 tests to come out at a total of 217.

<Video/> and <Audio/> have startFrom and endAt props​

These new props make it easier to cut the start or the end of the video. This is implemented using sequences, which was also possible before, but this is a convienient shorthand.

Fixed: Frame seeking​

In Remotion 1.x, a <Video/> would not always perfectly synchronize with Remotions time during render. This is now fixed and validated by tests that scan the color of the output frames - however not in the most efficient way. Help on improving it further is still welcome.

Fixed: Timeouts while importing large videos​

Importing files into your webpack bundle that were of significant size (the problems started at around 40MB) led to slow renders and timeouts. This is now fixed by swapping out dependencies and making sure the whole stack supports the HTTP range header well. Now if you seek a video, only the necessary parts will be loaded from the filesystem rather than the whole file being read.

Breaking changes and upgrade​

We've taken this opportunity of a major release to introduce some breaking changes that we think are beneficial for an awesome future of Remotion. Please take a moment to read through the 2.0 Migration guide and see if you are affected.

The future​

Most of the core functionality for making videos in React is now implemented. This gives us time to focus on improving all the areas around it - we are talking better documentation, developer experience, examples, abstractions on top or Remotion, improving speed and reliability of Remotion.

Furthermore, we want to provide a way to embed Remotion compositions in traditional web apps and to make server-side rendering easier - stay tuned!

We got rid of the "Contact us for pricing" policy and have announced the pricing for Remotion publicly. Head over to companies.remotion.dev to see it!

This is a new platform where you can directly buy a Remotion license, get invoices, upgrade/downgrade or cancel without having to get in touch with us.

Needless to say, you can still email us if you like a consultation!

This release contains no big new features, but addresses some common problems.

No Chromium download necessary​

Until now, every time you ran yarn create video, a binary of Chromium was installed, which was slow and took a lot of space (between 170-280MB depending on the OS). Making matters even worse, these binaries would not include the codec required to play MP4 videos, meaning if you wanted to embed one, you had to convert it to WebM first.

Now Remotion will try to find an existing installation of Chrome on your machine and if it finds one, it will use it and skip the download. If it doesn't find one, you can specify the path using the setBrowserExecutable() option or the --browser-executable command line flag.

If you are running Remotion on a machine where neither Chrome nor Chromium is installed, Remotion will still download a version from the internet. However, the download only happens when you invoke npm run build for the first time, so you don't have to wait so long before you can start experimenting.

Improved Apple Silicon and WSL support​

Apple Silicon support is another nice side-effect of the Puppeteer refactor, since previously the installation would fail because no Chromium binaries were available for the Apple Silicon architecture. Now that Remotion will try to use the local Chrome installation this is way less likely to happen.

On Windows Subsystem for Linux, a missing flag would lead to Remotion getting stuck during rendering. This is now fixed. Linux users also need to install some additional libraries, which is now documented.

Smoother timeline​

Why would the timeline of your 30 FPS only play at 28.7FPS? Turns out it's a bug that was investigated and fixed by yuta0801! Now the playback during preview is smoother and the FPS counter is way more likely to display a number matching your desired FPS.

Failing to render a frame fails hard​

If a frame fails to render for some reason (such as calling delayRender() and never resolving the lock), this will now stop the rendering process. Previously you would get an error message but Remotion would keep trying and keep failing.

Rendering will happen on a localhost server​

Previously during rendering, frames would be opened via file:// protocol and get screenshotted. Now the frames are being served on http://localhost:3000 (if port is not available, it will try 3001, 3002, etc.), which is the same behavior as in the preview.

Now APIs can now simply whitelist localhost domains in their CORS configurations, and you can more easily use those APIs to feed data into your video.

New tutorial: Programmatic Instagram Stories​

In case you missed it, I released a new tutorial showing the workflow of how to programmatically create Instagram Stories with dynamic content. You can watch it here.

Upgrade​

As always, you can upgrade to the newest version by running npm run upgrade in your Remotion project.

import { TransparentVideoDemo } from "../components/TransparentVideoDemo";

Welcome to the release notes of Remotion 1.4! This is a big release adding support for more use cases and makes Remotion more stable, intuitive and robust.

Support for HEVC and WebM codecs​

Instead of just supporting H.264, you can now also encode a video in H.265 (HEVC), or as a WebM (in either VP8 or VP9 codec). These codecs will result in smaller file sizes, but have some trade-offs. To help you decide which codec to use, there is now an encoding guide in the docs. See also the documentation for changing the codec in the config file as well as in the CLI.

Transparent videos​

Did you know that Chrome and Firefox support video with alpha channels? Play the video and click the button below to dynamically change the background.

tsx
export const MyComp = () => {
  // ⚠️ Bug! Random values will change during render
  const [particles] = useState(() => {
    return new Array(100).fill(true).map(() => ({
      x: Math.random(),
      y: Math.random(),
    }));
  });
};
Copy

tsx
export const MyComp = () => {
  // ⚠️ Bug! Random values will change during render
  const [particles] = useState(() => {
    return new Array(100).fill(true).map(() => ({
      x: Math.random(),
      y: Math.random(),
    }));
  });
};
Copy

tsx
import { useState } from "react";
import { random } from "remotion";
 
export const MyComp = () => {
  // ✅ Pseudo-random values that will be same across threads
  const [particles] = useState(() => {
    return new Array(100).fill(true).map((_, idx) => ({
      x: random(`x-${idx}`),
      y: random(`y-${idx}`),
    }));
  });
};
Copy

tsx
import { useState } from "react";
import { random } from "remotion";
 
export const MyComp = () => {
  // ✅ Pseudo-random values that will be same across threads
  const [particles] = useState(() => {
    return new Array(100).fill(true).map((_, idx) => ({
      x: random(`x-${idx}`),
      y: random(`y-${idx}`),
    }));
  });
};
Copy

tsx
export const RemotionVideo: React.FC = () => {
  const [videoLength, setVideoLength] = useState(null)
  useEffect(() => {
    const handle = delayRender();
    determineVideoLength()
    .then((duration) => {
      setVideoLength(duration)
      continueRender(handle)
    })
    .catch(err => /**/)
  }, [])
  if (videoLength === null) {
    return null;
  }
  return (
    <>
      <Composition
        id="HelloWorld"
        component={HelloWorld}
        durationInFrames={videoLength}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  )
}
Copy

tsx
export const RemotionVideo: React.FC = () => {
  const [videoLength, setVideoLength] = useState(null)
  useEffect(() => {
    const handle = delayRender();
    determineVideoLength()
    .then((duration) => {
      setVideoLength(duration)
      continueRender(handle)
    })
    .catch(err => /**/)
  }, [])
  if (videoLength === null) {
    return null;
  }
  return (
    <>
      <Composition
        id="HelloWorld"
        component={HelloWorld}
        durationInFrames={videoLength}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  )
}
Copy

tsx
import {Img} from 'remotion';
import hi from './hi.png';
// ✅ Correct: Using an import statement
<Img src={hi} />
// ⚠️ Warning since 1.4: Import the asset instead
<Img src="./hi.png"/>
Copy

tsx
import {Img} from 'remotion';
import hi from './hi.png';
// ✅ Correct: Using an import statement
<Img src={hi} />
// ⚠️ Warning since 1.4: Import the asset instead
<Img src="./hi.png"/>
Copy

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
Copy

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
Copy

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
Copy

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
Copy

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);
Copy

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

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",
});
Copy

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",
});
Copy

The small things​

• The exports of Remotion have been cleaned up and the internal stuff has been moved into Internals. You shouldn't rely on these APIs are you are at risk of them changing over time.

• The bundling step now has a progress indicator.

• You can now configure a different pixel format that will be passed to FFMPEG.

• Class properties are now supported.

• PNG sequences now have padded filenames (element-0000.png instead of element-0.png) for better interoperability with ImageMagick and for ensuring the right order in file explorers

• Better error messages for when FFMPEG is not correctly linked on Windows

• Lots of spelling mistakes fixed!

• Added analytics for docs - You can see how many page views the Remotion docs get here.

• Fixed an issue with PowerShell

• Fixed a puppeteer issue "Session closed. Most likely the page has been closed".

• Big files have been removed from the repository so it's faster to clone.

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.

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
      ],
    },
  };
});
Copy

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

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
Copy

npm run upgrade
Copy

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
Copy

bash
yarn create video
Copy

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