Skip to main content

· 12 min read
Jonny Burger

No more FFmpeg installation!

Now, when you are rendering a video and don't have FFmpeg installed, Remotion will download a copy for you. Previously, installing FFmpeg required 7 steps on Windows and took several minutes when using Homebrew on macOS.

When deploying Remotion on a server, you can now also let Remotion install FFmpeg for you using the ensureFfmpeg() API or the npx remotion install ffmpeg command. Learn more about FFmpeg auto-install here.

New @remotion/google-fonts package

It is now easy to import Google Fonts into Remotion! @remotion/google-fonts takes care of correct loading, and is fully type-safe!

New @remotion/motion-blur package

This package contains two components: <Trail> and <CameraMotionBlur>, assisting you with achieving awesome motion blur effects!

A quick demo of what is now called <Trail>:

New @remotion/noise package

This package offers easy, type-safe, pure functions for getting creative with noise. Check out our playground to see what you can do with it!

A video demo of how you can create interesting effects with noise:

New @remotion/paths package

This package offers utilities for animating and manipulating SVG paths! With 9 pure, type-safe functions, we cover many common needs while working with SVG paths:

Quick Switcher

By pressing Cmd+K, you can trigger a new Quick Switcher. It has three functions:

  • Fuzzy-search for a composition to jump to that composition.
  • Type > followed by an item in the menu bar to trigger that action.
  • Type ? followed by a search term to query the docs.

Remotion Core

<Sequence> makes from optional, accepts style and ref

<Sequence from={0}> can now be shortened to <Sequence>. Our ESLint plugin was updated to suggest this refactor automatically.

You can now also style a sequence if you did not pass layout="none".

A ref can be attached to <Sequence> and <AbsoluteFill>.

Video and Audio support loop prop

The <Video> and <Audio> components now support the loop property.

Preview

New CLI output

When starting the Remotion Preview, it now shows on which URL the preview is running. The Webpack output is now also cleaner.

Pinch to Zoom

If your device supports multitouch, you can now pinch to zoom the composition. Alternatively, you can hold Ctrl/Cmd and use your scrollwheel to zoom.

Using two fingers, you can move the canvas around and pressing 0 will reset the canvas. For the latter, there is also a button in the top-right corner that you can click.

Search the docs from the Remotion Preview

Pressing ? to reveal the keyboard shortcuts now has a secondary function: You can type in any term to search the Remotion documentation!

Shorter commands

Previously, a Remotion CLI command looked like this:

bash
npx remotion render src/index.tsx my-comp output.mp4
bash
npx remotion render src/index.tsx my-comp output.mp4

We now allow you to skip the output name, in this case the render would land in out/my-comp.mp4 by default:

bash
npx remotion render src/index.tsx my-comp
bash
npx remotion render src/index.tsx my-comp

You can also omit the composition name and Remotion will ask which composition to render:

bash
npx remotion render src/index.tsx
bash
npx remotion render src/index.tsx
note

Experimental: We might change the behavior to rendering all compositions in the future.

Finally, you can also omit the entry point and Remotion will take an educated guess!

bash
npx remotion render
bash
npx remotion render

If you deviate from the defaults of our templates, you can set an entry point in your config file and leave it out from Remotion commands.

Auto-reload environment variables

If you change values in your .env file, the Remotion Preview will reload and pick them up without having to restart.

Signal that Remotion Preview disconnected

When quitting the Remotion Preview using Ctrl+C, for example to render a video, A new popup will signalize that Fast Refresh will not work anymore.

Rendering

--muted render

This new flag can be passed to a render to ignore the audio. If you know that your video has no audio, this can make your render faster.

--enforce-audio-track

When no audio was detected in your video, the audio will now be dropped (except on Lambda). With this new flag, you can enforce that a silent audio track is added.

--audio-bitrate and --video-bitrate

These flags allow you to set a target bitrate for audio or video. Those flags are not recommended though, use --crf instead.

--height and --width flags

Using these flags, you can ignore the width and height you have defined for your output, and override it. The difference to --scale is that the viewport and therefore the layout may actually change.

Obtain slowest frames

If you add --log=verbose, the slowest frames are shown in order, so you can optimize them. Slowest frames are also available for renderMedia() using the onSlowestFrames callback.

Negative numbers when rendering a still

When rendering a still, you may now pass a negative frame number to refer to frames from the back of the video. -1 is the last frame of a video, -2 the second last, and so on.

Override FFmpeg command

The FFmpeg command that Remotion executes under the hood can now be overriden reducer-style.

Server-side rendering

Resuming renders if they crash

If a render crashes due to being resource-intensive (see: Target closed), Remotion will now retry each failed frame once, to prevent long renders from failing on low-resource machines.

Getting the overall progress from renderMedia()

Previously, the progress for rendering and encoding was reported individually. There is a new field, simply named progress, in the onProgress callback that you can use to display progress without calculating it yourself.

Easier function signature for bundle()

Previously, bundle() accepted three arguments: entryPoint, onProgress and options.

Old bundle() signature
ts
import { bundle } from "@remotion/bundler";
 
bundle("./src/index.ts", (progress) => console.log(progress), {
publicDir: process.cwd() + "/public",
});
Old bundle() signature
ts
import { bundle } from "@remotion/bundler";
 
bundle("./src/index.ts", (progress) => console.log(progress), {
publicDir: process.cwd() + "/public",
});

Since getting the progress was less important than some of the options, bundle() now accepts an object with options, progress callback and entryPoint altogether:

New bundle() signature
ts
import { bundle } from "@remotion/bundler";
 
bundle({
entryPoint: "./src/index.ts",
onProgress: (progress) => console.log(progress),
publicDir: process.cwd() + "/public",
});
New bundle() signature
ts
import { bundle } from "@remotion/bundler";
 
bundle({
entryPoint: "./src/index.ts",
onProgress: (progress) => console.log(progress),
publicDir: process.cwd() + "/public",
});

The previous signature is still supported.

Player

<Thumbnail> component

The new <Thumbnail> component is like the <Player>, but for rendering a preview of a still. You can use it to display a specific frame of a video without having to render it.

tsx
import { Thumbnail } from "@remotion/player";
 
const MyApp: React.FC = () => {
return (
<Thumbnail
component={MyComp}
compositionWidth={1920}
compositionHeight={1080}
frameToDisplay={30}
durationInFrames={120}
fps={30}
style={{
width: 200,
}}
/>
);
};
tsx
import { Thumbnail } from "@remotion/player";
 
const MyApp: React.FC = () => {
return (
<Thumbnail
component={MyComp}
compositionWidth={1920}
compositionHeight={1080}
frameToDisplay={30}
durationInFrames={120}
fps={30}
style={{
width: 200,
}}
/>
);
};

Player frameupdate event

In addition to timeupdate, you can subscribe to frameupdate, which fires whenever the current frame changes. You can use it for example to render a custom frame-accurate time display.

Player volume slider is responsive

If the Player is displayed in a narrow container, the volume control now goes upwards instead of to the right, in order to save some space.

Get the scale of the Player

Using the imperative getScale() method, you can now see how big the displayed size is in comparison to the canvas width of the component.

Controls are initially shown

On YouTube, the video always starts with controls shown and then they fade out after a few seconds. We have made this the default behavior in Remotion as well, because users would often not realize that the Player is interactive otherwise. You can control the behavior using initiallyShowControls.

Play a section of a video

Using the inFrame and outFrame props, you can force the Remotion Player to only play a certain section of a video. The rest of the seek bar will be greyed out.

Customize Play button and Fullscreen button

Using renderPlayPauseButton and renderFullscreenButton, you can customize the appearance of the Player more granularly.

Start player from an offset

You can define the initialFrame on which your component gets mounted on. This will be the default position of the video, however, it will not clamp the playback range like the inFrame prop.

New prefetch() API

In addition to the Preload APIs, prefetch() presents another way of preloading an asset so it is ready to display when it is supposed to appear in the Remotion Player.

Prefetching API
tsx
import { prefetch } from "remotion";
 
const { free, waitUntilDone } = prefetch("https://example.com/video.mp4");
 
waitUntilDone().then(() => {
console.log("Video has finished loading");
free(); // Free up memory
});
Prefetching API
tsx
import { prefetch } from "remotion";
 
const { free, waitUntilDone } = prefetch("https://example.com/video.mp4");
 
waitUntilDone().then(() => {
console.log("Video has finished loading");
free(); // Free up memory
});

Video and audio tags will automatically use the prefetched asset if it is available. See @remotion/preload vs. prefetch() for a comparison.

Remix template

The Remix template is our first SaaS template! It includes the Remotion Preview, the Player and Remotion Lambda out of the box to jumpstart you with everything you need to create your app that offers customized video generation.



Get started by running:
bash
npx create-video --remix
bash
npx create-video --remix

Lambda improvements

Webhook support

You can now send and receive a webhook when a Lambda render is done or has failed. Examples for Next.js and Express apps have been added and our documentation page features a way to send a test webhook.

Payload limit lifted

Previously, the input props passed to a Lambda render could not be bigger than 256KB when serialized. Now, this limit is lifted, since if the payload is big, it will be stored to S3 instead being passed directly to the Lambda function.

Lambda artifact can be saved to another cloud

The output videos generated by Lambda can now be saved to other S3-compatible protocols such as DigitalOcean Spaces or Cloudflare R2.

Deleting a render from Lambda

The new deleteRender() API will delete the output video from the S3 bucket, which you previously had to do through the console or with the AWS SDK.

Make renderMediaOnLambda() params optional

The following options are now optional:

Benchmark command

The new npx remotion benchmark helps you compare different render configurations and find out which one is the fastest. Currently, you can compare different codecs, compositions and concurrency values. Each configuration is run multiple times in order to increase confidence in the results.

New guides

We have added new guides that document interesting workflows for Remotion:

We try to avoid jargon, but we have also created a Remotion Terminology page to define some commonly used terms. When using these terms, we will from now link to the terminology page for you to read about it.

Better structure and naming in templates

The file that was previously called src/Video.tsx in templates is now called src/Root.tsx, because it did not contain a video, but a list of compositions. That component was also renamed from RemotionVideo to RemotionRoot. The new naming makes more sense, because that component is passed into registerRoot().

Notable improvements

Get the duration of a GIF

The new function getGifDurationInSeconds() allows you to get the duration of a GIF.

Lottie animation direction

Using the new direction prop, you can play a Lottie animation backwards.

Lottie embedded images

Should a Lottie animation contain an embedded image, it will now be properly awaited.

Temporary directory Cleanup

The temporary directory that Remotion creates is now completely cleaned up after every render.

Parallel encoding turned off if memory is low

Parallel encoding will not be used when a machine has little free RAM. You can also force-disable it using disallowParallelEncoding.

Thank you

Thank you to these contributors that implemented these awesome features:

  • ayatko for implementing the @remotion/google-fonts package
  • Antoine Caron for implementing the <Thumbnail> component, for reloading the page when the environment variables change and implementing negative frame indices
  • Apoorv Kansal for implementing the documentation search in the Quick Switcher, the benchmark command and the option to customize Play button and fullscreen button in the Player
  • Akshit Tyagi for implementing the --height and --width CLI flags
  • Ilija Boshkov, Marcus Stenbeck and UmungoBongo for implementing the Motion Blur package
  • Ravi Jain for removing the need to pass the entry point to the CLI
  • Dhroov Makwana for writing a tutorial on how to import assets from Spline
  • Stefan Uzunov for implementing a composition selector if no composition is passed
  • Florent Pergoud for implementing the Remix template
  • Derryk Boyd for implementing the loop prop for Video and Audio
  • Paul Kuhle for implementing Lambda Webhooks
  • Dan Manastireau for implementing a warning when using an Intel version of Node.JS under Rosetta
  • Pompette for making the volume slider responsive
  • Logan Arnett for making the composition ID optional in the render command
  • Patric Salvisberg for making the FFmpeg auto-install feature
  • Arthur Denner for implementing the direction property for the Lottie component

Many of these contributions came during Hacktoberfest where we put bounties on GitHub issues. We also want to thank CodeChem for sponsoring a part of those bounties!

· 3 min read
Jonny Burger

We are delighted to announce that we have raised 180'000 Swiss Francs from Remotion users and customers!

With our first funding, we will make it easier for you to programmatically create videos and video apps. We'll introduce new components, templates and tools to help you build more with less code.

Our investors use Remotion

Our line-up of investors consists of companies and people that use Remotion for fun or to build their businesses.

We are so happy to partner with investors who understand our vision and can help us with relevant connections.

For One Red

Design Studio

Heiko Hubertz

Founder & CEO, Oxolo

Simon Schmid

Product, iubenda

William Candillon

Can it be done in React Native?

Sébastien Lorber

This Week in React, Docusaurus

Nick Dima

Senior Engineering Manager, Musixmatch

Stephen Sullivan

Founder, Middy.com

Dominic Monn

Founder, MentorCruise

Jeremy Toeman

Founder, augxlabs.com

Robbie Zhang-Smitheran

Cameo.com

Ilya Lyamkin

Senior Software Engineer, Spotify

Lucas Pelloni

Co-Founder, Axelra

Michiel Westerbeek

Co-Founder, Tella

David Salib

Co-Founder, Momento

Making Remotion easier for creatives

The number one feedback that we have heard is that being able to write videos in React is powerful, but simple things can be hard. Fortunately, almost any complexity in React can be abstracted, packaged up, released to NPM and shared with others.

While our low-level primitives will always be here, we will also develop higher-level components solving common needs that people face. This will allow more developers, not just React experts, to use Remotion.

We also encourage our community to create building blocks for Remotion and will sponsor developers as well as help them monetize their work.

Enabling new business opportunities

With the Remotion Player and Remotion Lambda, we provide APIs that allow you to build apps that produce videos for end users.

We have tons of opportunities to make it easier to build an app with Remotion. We are going to release UI elements, SaaS templates and even best practices for payment integration, so companies can realize Remotion solutions faster and with fewer resources.

Why did we "only" raise 180‘000 CHF?

We recognize that startups usually raise more money than we do at an earlier stage. At the same time, they are entering a high risk of failure due to running out of money.

With the amount we have raised, we are not only able to continue but accelerate our operation and grow our company license revenue to confidently stay here for a long time.

Remotion is a thriving community of business customers, creative coders, professional Remotion freelancers and indie hackers whose interest is our long-term success. Our aim is to grow in a healthy way together with our community!

Thank you…

To everybody who tried out Remotion, sent a pull request, tweeted about it or filed a bug. It is a huge thrill to see people believe in the ideas that we put out and we are very privileged to able to continue working on them.

· 5 min read
Jonny Burger

Up in this release: More ways to create videos and better workflow!

Lottie support

Announcing the official @remotion/lottie package, including a typesafe component and extensive documentation. With Lottie, you can import thousands of premade animations from LottieFiles and we even made a guide on how to import animations created in After Effects!

Animations from Lottiefiles embedded in Remotion: 1, 2, 3

To get started, install @remotion/lottie into your Remotion project and import the <Lottie> component:

bash
npm i @remotion/lottie
bash
npm i @remotion/lottie

Thanks to Arthur Denner for implementing this feature!

React Native Skia support

Using the @remotion/skia package, you can now use React Native Skia in Remotion! Thanks to our collaborators William Candillon and Christian Falch, Remotion is now a first-class target for React Native Skia.

Check out the epic announcement video, read the docs and make your first video using:

bash
npx create-video --skia
bash
npx create-video --skia

Zoomable timeline

Our timeline has some new features that make it behave more like traditional video editors. You can now zoom in and out of the timeline to better focus on a certain section of a video. When playing the video, the timeline moves along with the cursor. Scrubbing with the cursor or keyboard will also scroll the timeline so the cursor is always in the viewport.

The other new timeline feature is that there are now ticks that appear every second, and when zoomed in, smaller ticks that denote the positions of a single frame. This should help you orient yourself when you are asking yourselves at which point of the video you are at.

Improvements to audio-only and video-only rendering

You can now explicitly drop the audio of a video by passing --muted in the render. Videos that include no audio are now faster because we don't include a silent audio track anymore (use --enforce-audio-track to get the old behavior).

Renders that are audio only are now faster because Remotion will not wait for the video tags to seek.

Renders that are only video are now faster because no assets need to be downloaded to be included in the audio track.

Handy features

  • The back and forwards button now work in the preview.
  • Chrome 104 is now available on Remotion Lambda which means you can use the handy transform shorthands!
  • You can now render ProRes on Remotion Lambda.
  • Remotion Lambda now has a privacy: "no-acl" option if you are rendering into a bucket that has the ACL feature disabled.
  • Remotion Lambda now supports a downloadBehavior prop which makes it that when a output file link gets clicked in the browser, it will download instead of play in the browser.
  • Adding an output filename to the npx remotion render command is not necessary anymore, it will default to out/{composition-id}.{extension} now.
  • The <Player> has a new moveToBeginningWhenEnded prop that determines if the player moves back to the beginning when the video has reached the end and is not looping.
  • The <Player> has a new fullscreenchange event that allows you to
  • You can now assign a className to the <Player>.

Developer experience

  • New ESLint rule that warns you if you are passing a relative path or remote URL to staticFile: staticFile("../my-file.png") or staticFile("https://example.com")
  • Better error message on Remotion Lambda when the s3:ListBucket permission for the bucket you are rendering into is missing.
  • ESLint warning when passing a file ending in .gif to the <Img> component.
  • Better error message and help page when calling renderMediaOnLambda() inside another serverless function and AWS credentials are conflicting
  • Better error message and help page when rendering into a bucket that has ACL disabled but you are setting the privacy to public or private.

Notable bug fixes

  • The <Player> now works correctly in React 18 strict mode.
  • The preview server should not crash anymore in any scenario.
  • Remotion now cleans up any temporarily created files and does not pollute the hard drive.
  • Executing npx remotion commands outside of the project root now works.
  • Open in VS Code now works if the code command is not installed.
  • Remotion Lambda now uses less memory and is less prone to crashing when using <Video>'s.

Internals

  • The CLI configuration code has moved from remotion to @remotion/cli, which makes the remotion package 30% smaller.
  • We moved from jest to vitest for some packages.
  • puppeteer-core and chalk dependencies have been inlined.
  • We adopted Node.JS Corepack.

· 5 min read
Jonny Burger

This release brings support for GIF as an output format, official support for Tailwind and makes springs and sequences easier! Plus we recap the best features from v3.0.1 until v3.0.31! 🎉

Render as GIF

To render a GIF instead of a video, pass the --codec=gif flag during a render. We tweaked Remotion's rendering process to adapt for the speciality that are GIFs:

  • Commonly, a GIF has a framerate in the range of 10-15, and so that you don't have to refactor your video, you can use the --every-nth-frame flag.

  • GIFs are loopable - using the --number-of-gif-loops flag you have control over the GIFs looping behavior!

  • You can even render your GIF distributed across many small VMs using Remotion Lambda!

You can put <Gif>'s in your GIF!

TailwindCSS support

After being broken for a while, TailwindCSS support is now stable, and we even made a starter template for it! To get started, visit our homepage, generate a GitHub repo from a template, try it out online via StackBlitz, or type the following into your terminal:

bash
npx create-video --tailwind
bash
npx create-video --tailwind

Yes, you can write a GIF in Tailwind now.

Springs with durations

You can now do this:

tsx
const fps = 30;
 
const value = spring({
fps,
frame,
config: {
damping: 200,
},
durationInFrames: 300,
});
tsx
const fps = 30;
 
const value = spring({
fps,
frame,
config: {
damping: 200,
},
durationInFrames: 300,
});

The result will be a spring animation that will take 10 seconds!

Why is this such a game changer? Normally, a spring animation curve is not defined by timing, but by physical parameters. It complicates planning quite a bit, as the duration of a spring is not well-defined. Theoretically, a spring animation is never finished, it keeps on going forever (even though after some time the movement is barely noticeable).

We introduced measureSpring() a while ago which allows you to calculate the duration of a spring by allowing you to set a threshold.

But to change the duration of a spring, you had to change the physics parameters which then in turn change the animation curve!

Until now - if you pass a duration to a spring, we will detect the trajectory of the curve and stretch it so it fits your duration.

<OffthreadVideo> component

This component is an alternative to the <Video> component that extracts frames using FFMPEG and renders them inside an <Img> tag.

We made the <OffthreadVideo> component in order to counteract problems with seeking and throttling that users were reporting with the <Video> tag. The new way improves reliability but has it's tradeoffs - read <OffthreadVideo> vs <Video> or check out our visual explanation on Instagram!

Follow us on Instagram where we explain concepts visually!

renderMedia() returns a buffer

Previously you could only save your video to a file when using the renderMedia() and stitchFramesToVideo() APIs. Now it can also return a Node.JS Buffer!

@remotion/preload package

This new package offers three APIs that are handy for preloading assets before they appear in the <Player>: resolveRedirect(), preloadAudio() and preloadVideo().

We first announce and explain new features on Twitter!

If your screen real estate is tight, you may also hide the left sidebar now!

Built-in color picker

In the preview, go to Tools -> Color picker to trigger an eye dropper that allows you to pick any color from the screen! Only Chrome has this feature enabled for now.

For power users

  • Previously you could not wrap your <Composition>'s in a React context (e.g. Redux), but this is supported now!
  • If you add --log=verbose to a Lambda render, you'll see which frames took the longest to render.
  • If you provide a file for --props during the preview, it will now reload the preview if the props have changed.
  • Pressing A in the preview goes to the beginning of the video, pressing E goes to the end.
  • Pressing play in the preview, then pressing Enter pauses the video and goes back to the point where the video started playing.
  • <Sequence>'s can now have a style prop if the layout="none" is not set!
  • You can customize the binaries for Remotion Lambda renders, for example to switch out the Emoji font used.
  • The registerRoot() call can now be deferred using delayRender(), so asynchronous loading tasks can be completed first.

Behind the scenes

We welcome Patric as our intern! As you can see on our new team page, we are now a team of three and are in the preparations of our first fundraising round.

Patric's first Remotion video!

Remotion won the "Most Exciting use of Technology Award" at React Summit - we owe it all to you!

Going forward, we want to make Remotion even easier to use through new tools, templates and tips!

And wouldn't it be nice if Remotion was faster - I'm exploring multiple options from an alternative concurrency model to a C++ based rendering solution - stay tuned for what's about to come 🚀

· 5 min read
Jonny Burger

After more than 10 months in development and 1400 commits, it feels so good to announce Remotion 3.0!

I am convinced that Remotion Lambda is the best piece of software that I have ever written. It is the final puzzle piece needed to complete our vision: A full stack for developing video apps! Enjoy the changelog, and if you haven't, check out the Remotion 3.0 Trailer.

Announcing Remotion Lambda

Remotion Lambda is a distributed video renderer based on AWS Lambda. It is made for self-hosting, so you deploy it to your AWS account. Once your Lambda function is up, you can give it rendering tasks, which it will split up into many small units of work that get processed in parallel by spawning itself many times.

Lambda is the best of all worlds:

  • Fast: Lambda can render a video up to many times faster than the fastest consumer computers. The longer the video, the higher the speed gain. The Remotion Lambda trailer was rendered in 15 seconds instead of 60 seconds, and a 2 hour video was rendered in just 12 minutes[1].

  • Cheap: You only pay for when you are rendering. The Lambda functions use ARM architecture for best price-performance efficiency.

  • Scalable: You can render many multiple videos at the same time. Lambda concurrency limits apply, but can be increased.

  • Easy: Chromium and FFMPEG are already pre-installed, and we handled all the edge cases. You only need to code your video, follow the steps to deploy a function and invoke a render.

All functionality is available via CLI commands and Node.JS functions. We've written 45 pages of documentation, released over 50 alpha versions to testers, and written many tests from unit to end-to-end. Lambda is mature and used in production by companies like Combo and Jupitrr.

Parallel rendering and encoding

Previously, rendering frames, and stitching them together to a video has been a sequential process where one step can start once the other has finished. In Remotion 3.0, stitching can start while rendering is still in progress! This will result on average in a 10-15% speedup.

Additionally, downloading audio assets now happens earlier in the rendering pipeline and if you rely on remote audio, you should see a handsome speedup as well.

New renderMedia() API

A new function has been added to @remotion/renderer called renderMedia(). It combines already existing functions renderFrames() and stitchFramesToVideo() but takes advantage of the new parallel rendering pipeline. It can render videos as well as audio and requires fewer arguments, so it's a win for speed and ease of use!

New openBrowser() API

Since opening and closing a browser instance can take time, we introduce a new API called openBrowser() for opening an instance of Puppeteer that you can use across the SSR APIs: renderMedia(), renderStill(), getCompositions(), and renderFrames().

Better error reporting

We are taking an initiative to make error easier to understand. While much of error handling has been handled by third-party libraries until now, we've inlined the logic, allowing us to streamline it. Minified errors are being symbolicated, we've implemented a new error overlay, and timeout errors are more descriptive. Let us know what you think!

A minified error that happened inside a Chrome browser inside a remote Lambda function displays a proper stacktrace!

Our custom error overlay has the ability to open the troublesome file in your default editor, and look for similar GitHub issues.

Config file can now import other files.

In the remotion.config.ts file, you can now import other files. Under the hood, we use ESBuild instead of Typescript to read the file. This was a paint point before: Node.JS APIs don't read from the config file and require you to specify the options explicitly. Configuration such as a Webpack config override could not be shared in a good way between CLI and Node.JS renders so far, which we address with this change.

React 18 supported

React 18 is now supported and we recommend that you upgrade to it. See our React 18 upgrade guide on how to do it!

Node 14, ESLint 8

Keeping our stack modern allows us to move faster and also, eliminate dependencies.

With Remotion 3.0, support for Node 12 is dropped, and we officially support Node 18. Our ESLint config has been updated to take advantage of ESLint 8, which is now also officially supported.

How to update

Read the migration guide to update to Remotion 3.0. The most severe breaking changes revolve around server-side rendering in an attempt to make it faster and simpler. Other than SSR changes and the Node 14 requirement, nothing should break.


[1] See the trailer repository for instructions on how to reproduce.

[2] Rendering the composition 2hrvideo in the example folder in the Remotion repository with --frames-per-lambda=1080, a Lambda function running on the arm64 architecture with 2048MB RAM, on warm Lambdas in the us-east-1 region.

· 3 min read
Jonny Burger

The biggest announcement of this release is that the @remotion/player package is now generally available - but not just that, we have some other sweet new features too!

<Player/> is now stable



With the <Player/> component, you can embed a Remotion Video inside a React app without rendering the video. The API is modeled after the native HTML <video> tag that many developers are already familiar with.

The API allows you to use our predefined controls, or build your own. Familiar UI patterns like volume slider, fullscreen button, as well as gesture mechanics such as click to play/pause are supported.

You can dynamically update the props of the video at runtime, which creates an experience that stuns user: videos that react to their user input!

On mobile, restrictive policies prevent auto-play of audio content. We help you architect your player so it can play audio in as many cases as possible while still respecting the browser policies. This includes the option to mount silent audio tags, activate them while the user interacts with the page and use them later to play audio.

In this release, we added a new renderLoading prop and wrote docs for how to scale your player, code-sharing between Remotion and Create React App/Next.JS and preloading assets.

See the landing page for @remotion/player
Demo and Documentation

New error overlay

Recently, we broke the error overlay that pops up when your code contains an error. This is now fixed and we went deeper than ever before!



The Fast Refresh and error overlay is now inlined in our codebase and allows for customization that makes sense for Remotion. The overlay now matches the dark theme of the Remotion Preview and includes handy links such as opening a file in the editor, looking for the error in our GitHub issues and our Discord community.

Support for /public folder

You can now put static files inside a /public folder in your Remotion project and load it using the new staticFile() API. If you include the new <Player /> component in a Create React App or Next.JS project, the folder can be shared across Remotion and the framework you are using.

<Audio /> or <Video /> now support data: URLs

Data URLs are now valid sources for <Audio /> and <Video /> tags. This is useful for example for tones that are programmatically generated. To help with development of such projects, a new API was added to the @remotion/media-utils project: audioBufferToDataUrl(). See our festive Tone.js sample project for an example!

New audiogram template

When running npm init video, there's a new template to choose from: "Audiogram"! This one allows you to convert podcast clips to clean visualizations that you can post on social media.

getCompositions() now returns defaultProps

The getCompositions() API has been updated to return a new field for each composition: The defaultProps that you have specified for that composition.

Miscellaneous

  • Fixed videos playing in the <Player /> after they should have ended.
  • Fixed ended event in the <Player /> not firing correctly.
  • Fixed certain vulnerability messages that would show up during installation.
  • Updated @remotion/three to use React Three Fiber v7.

What's next

The next release is finally going to be our new major new release containing a refactor of our rendering pipeline and serverless rendering support. Look out as we release the missing puzzle piece in our vision of programmatic video!

· 6 min read
Jonny Burger

We are excited to announce a packed October release! We did work in many areas and these improvements will surely boost your productivity!

In/Out markers

You may know this feature from programs like After Effects and Davinci Resolve already. It is as simple as it is useful: You can set an “In” mark and an “Out” mark and the preview will only play whatever is in-between those timestamps. This makes it much easier to visually “debug” a section of the video without having to watch the whole thing.

Thanks to Ankesh for implementing this feature!

<Loop> component

Previously, in order to repeat content, you had to manually create a bunch of sequences and calculate the timestamps yourself. We added a helper called <Loop /> which will repeat it’s children either indefinitely or for a fixed number of times. Another benefit is that we display the loop component cleanly in our timeline.

Thanks to Brian Pederson for implementing this feature!

Support for different playback rates

You can now change the playback rate in the editor and play a video in slow-motion, in fast-forward, and even in reverse! We support speeds between -4x and 4x. This makes debugging animations that don’t look clean much easier.

It also works in the <Player />! See the new playbackRate prop and we also added a ratechange event - just like the native HTML5 Video element.

Thanks to Brian Pederson for implementing this feature!

Support for J, K, L keyboard shortcuts

These new shortcuts are super handy for navigating through a timeline. With the L key, you play the video as normal. Pressing the L key again will increase the speed to 2x, and pressing L three times in total will play the video in 4x.

The J key works the same, but plays the video backwards. Now you can reach any point in the video easily with just those two keys, even if the video is playing, without using the mouse.

Once you have reached the point where you want to pause the video and continue to code it, the K key will reset the playback rate to 1x and pause the video.

Once you learn how to navigate using JKL keys, you'll never use your mouse for scrubbing again!

Thanks to Brian Pederson for implementing this feature!

tip

Press the ? button to learn about all keyboard shortcuts!

durationInFrames={Infinity} is now optional

If you wanted to delay an element but not cap it’s duration, you had to explicitly specify durationInFrames={Infinity} . Not anymore! This is now the default and may be omitted. If you upgrade the @remotion/eslint-config package as well, we will even automatically remove the prop when you have autofix enabled!

Thanks to Khalid Ansari for implementing this feature!

Fig autocomplete

In case you don’t know Fig, it is a free macOS application that provides autocomplete for the terminal. What sounds like a gimmick, actually works surprisingly well and I personally would miss it a lot if I didn’t have it! The Remotion CLI that you can invoke using npx remotion now has full autocomplete support in Fig! You have to do nothing except install Fig.

Thanks to Mattèo Gauthier for implementing this feature!

Node.JS 17 support

This version came out recently and broke almost every Webpack project because legacy crypto functions were removed.

We added the necessary modifications to our default Webpack config, and even contributed a pull request to Webpack to fix the last remaining bug that would break Remotion with Node 17! If you are upgrading Node, definitely make sure get this new version of Remotion.

Monorepo migrated to pnpm

Contributors to Remotion would previously often struggle to correctly set up our monorepo. Indeed it was hard to correctly link all the packages and too easy to mess it up and run into error messages.

This is why we are happy to have migrated to pnpm, which gets rid of the linking problems and also speeds up installation significantly. In your CI systems, we saw build times go down by 40%, which allows to iterate much more faster.

Thanks to Sergio Moreno for implementing this migration!

“Empty” template

A new template has been added to npm init video / yarn create video: The blank template. This template contains only the bare minimum Remotion boilerplate and a completely empty canvas. It is especially useful for people already familiar with Remotion who would like to skip deleting the Hello World project every time.

Thanks to Aneesh Relan for creating this template!

Render video to out folder

Previously by default, a video would be rendered to out.mp4 in the root directory of your project. This also meant that in order to ignore it from Git, we had a complicated .gitignore by default that would ignore video files in the root but inverse-ignore other video files. Time to simplify: From now on, we render a file into an out folder by default and simply ignore that folder.

Thanks to ahmadrosid for implementing this feature!

Updates to @remotion/three

A few interesting updates for users of @remotion/three:

  • The Three Canvas is now wrapped in <Suspense> and the render is delayed until the content has been loaded (unsuspended). This works better with the React Three.JS ecosystem and now components such as drei’s <Environment /> component will work out of the box.
  • We now default to the angle OpenGL engine for Google Chrome, which we, through empirical testing, have found to have the best overall support for Three.JS content across platforms.

More updates

  • Added support for OTF fonts - Thanks William Candillon!
  • Added possibility to customize <Player> error message - Thanks AudreyKj!
  • Windows Node.JS 14 cleanup bug fixed - Thanks Raznov!
  • Upgraded Docusaurus to the newest version, obtaining the newest features and layouts

Hacktoberfest Roundup

We opted into participating in Hacktoberfest, and put $100 bounties on 11 issues as an extra incentive! Every single of those issue has been picked up and solved! Every contributor did a great job, many greatly surpassing our expectations!

Thank you everybody who participated and contributed to this release!

· 4 min read
Jonny Burger

In this release, we are revamping the Remotion Preview interface to make it easier on the eyes and add new features. While Remotion will always be about leveraging code instead of clicking buttons, we want to add complementary helpers to help you get your videos done faster!

New toolbar

All the actions that can be performed in the editor are now organized in a toolbar at the top, plus we added quick links to resources such as Documentation, Changelog, GitHub, Support options and our social media accounts (follow us over there!).

"New composition" helper

You can press N to bring up a modal that helps you generate code for creating a new <Composition /> or <Still />. Drag the sliders to quickly adjust the dimensions and duration of the video. Lock or unlock the aspect ratio. Click the numbers to enter an exact value. Receive warnings on invalid configuration. Once you are happy with the code, you can click the copy button and paste it in your src/Root.tsx file.

"Keyboard shortcuts" pane

To get an overview of all keyboard shortcuts, you can now press ? to bring up a list of all shortcuts.

Improved keyboard navigation

For those true hackers that don't use mouses, we optimized the whole new UI to be usable with just the keyboard. Use the Tab key to focus items, the arrow keys to navigate through menus. Press Enter or Space to click on items. Use Escape to quit modals and menus.

Built with 0 dependencies

We want to add new features to the Preview, but not bloat Remotion by adding tons of third-party packages that increase startup time and at some point will cause you to fight with your package manager. So we carefully crafted the editor with no dependencies except React and Remotion (which also only has react and react-dom as it's only dependencies).

Other improvements

  • New <Series /> component: Introduced in 2.3.2, we added a new <Series /> component that helps you layout many sequences in a row. See this post (Instagram | Twitter) for additional infographic explanation!

  • Better handling for browser autoplay policies: If you use the <Player /> and include audio in it, you might hit a browser limitation where audio cannot be played because of a browsers autoplay policy. Remotion can now avoid some of those scenarios by playing some silent audio when the user actively triggers a play on the Remotion Player. If you then later in the video want to play some audio, Remotion will route that audio to an <audio /> tag that was already playing silent audio and was already freed from the playback restrictions of the browser. You can control the amount of silent audio tags that Remotion should place using the numberOfSharedAudioTags prop.

  • Better handling of invalid dimensions: It turns out that MP4s can only have even dimensions. So while a 1000x1000px MP4 is completely fine, a 999x999px MP4 is not possible according to the spec. Instead of erroring out when rendering, we now warn you early using a new ESLint rule, and also when you use the "New composition" dialog.

  • Bug fixed when using frameRange: A one-off error would cause the wrong frames being rendered when using the frameRange option. If you specified a frame range of 0-20, the frames -1 until 19 would be rendered. This is now rectified, if you were reliant on this option, please make sure your video renders as intended after the update!

  • Component mounts directly at desired frame: During rendering, previously the browser would always mount the React component at frame 0, and then update the component with the initial frame that should be rendered. This is now changed, so if you are e.g. using the frameRange option to render frames 20-39, your component will now never mount at frame 0 after this update.

Up next

We are working on revamping the rendering pipeline and adding more ways to render a Remotion video and plan to release this as a major version bump (v3.0) with some breaking changes. Stay tuned for announcements on how we make Remotion much easier to scale.

· 4 min read
Jonny Burger

Remotion 2.3 is out and features first-class support for still images!

So far we focused on streamlining the workflow for making videos. While it was always possible to render out a single image instead of an encoded video, we have optimized this use-case in this release.

New <Still /> component

This new component is the same as <Composition /> but is meant for defining a compositions that output a still image. Since it's already implied, you don't have to define the fps and durationInFrames properties.

tsx
<Still
id="Thumbnail"
component={Thumbnail}
width={1200}
height={627}
defaultProps={{
title: "Welcome to Remotion",
description: "Edit Video.tsx to change template",
slogan: "Write videos\nin React",
}}
/>;
tsx
<Still
id="Thumbnail"
component={Thumbnail}
width={1200}
height={627}
defaultProps={{
title: "Welcome to Remotion",
description: "Edit Video.tsx to change template",
slogan: "Write videos\nin React",
}}
/>;

Optimized editor for stills

There are now icons in the sidebar for compositions, and those who are stills have an image icon.


Now still images (compositions with a duration of 1 frame) are marked with a special icon.

For still images, you don't need the timeline, so it will hide itself and give you a bigger canvas.


New remotion still command

Rendering stills has become easier as well. The new remotion still command allows you to quickly generate a PNG or JPEG on the command line.

npx remotion still --props='{"custom": "data"}' my-comp out.png
npx remotion still --props='{"custom": "data"}' my-comp out.png

New renderStill() API

If you render using the Node.JS APIs, we have a new equivalent API for rendering stills as well.

ts
await renderStill({
composition,
serveUrl: bundleLocation,
output: "/tmp/still.png",
inputProps: {
custom: "data",
},
});
ts
await renderStill({
composition,
serveUrl: bundleLocation,
output: "/tmp/still.png",
inputProps: {
custom: "data",
},
});

New Stills template with server rendering

We have made a new template that includes a social media preview card and a server that you can customize and easily deploy to the cloud. We have tested it on DigitalOcean and Heroku and have added instructions on how to deploy it.

We use this service to generate the social preview card for the blog post you are reading right now. Feel free to go to this URL and play around with the parameters:

https://remotion-still.herokuapp.com/PreviewCard.jpeg?title=Remotion%202.3&description=%3CStill%20/%3E%20component,%20renderStill()%20API,%20optimized%20editor%20and%20CLI,%20Server%20rendering%20template

The server includes different caching options, rate limiting and limits to 1 render at a time, so hopefully it's ready for production. We put the URL out there for you play around with it, should there be any unexpected problems, we'll fix the template.

🔜 Serverless in the works

We are also working on getting still image rendering working in a serverless environment and providing a framework for it. We aim to launch it this fall - if you are interested in testing an early version, write us a message in our Discord.

yarn create video now has multiple templates

When creating a new video, you now get to choose between different templates, that give you a great starting point for your usecase.


In addition to the default template and the previously announced Three.JS template, there now is also a plain-JS template, a text-to-speech template and the above mentioned Stills template.

Player now supports space key to play/pause

The <Player /> component now supports the new spaceKeyToPlayOrPause prop to toggle the video playback. We designed it with focus management in mind so it behaves well when multiple players are on the same page. This prop is by default true.

· 9 min read
Jonny Burger

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

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} />;
};
LightningSpeed.tsx
tsx
import { Video } from "remotion";
import myVid from "./vid.mp4";
 
export const MyVideo = () => {
return <Video src={myVid} playbackRate={4} />;
};

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!


Three.JS is admittedly not easy, but with the work that Poimandres is doing to make it more approachable and more integrated with React, this is changing rapidly. Creating 3D videos in React and rendering them to real MP4 videos, we are making it possible!

Learn more about @remotion/three and get started using our template.

ProRes support and MKV support

Creating MP4 videos with React, that's just our marketing tagline. We support a lot of other codecs too, like H265, WebM, and even transparent WebM!

We are adding two more codecs:

  • ProRes is a codec suitable for video editors using Final Cut Pro, Adobe Premiere or Davinci Resolve. Say you want to create an overlay animation using Remotion and use it in a traditional video cutting program, you can now use ProRes to export the video with an alpha channel and import it to many other programs losslessly.

  • The Matroska container format (which can be recognized using the .mkv extension) is a format that commonly also just contains the H.264 videos, the same codec used for MP4s. However it has more flexibility for audio and allows lossless audio streams to be contained by the format. MKV support will come in handy for an upcoming Remotion feature, and is the first step in allowing us to go to the moon.

Read the Encoding guide to see an overview of all options.

<Player /> updates

The @remotion/player, currently still experimental, allows Remotion videos to be played on the web without having to encode them. We've made the following progress towards getting it stable:

Audio controls

A player now has a volume slider, and a mute button to allow the user to control the video. You can decide whether you want to display these controls using the showVolumeControls prop.

Audio can also be controlled programmatically. We added the methods getVolume(), setVolume(), mute(), unmute() and isMuted() to allow you to implement your own solutions.

timeupdate event

Inspired by the HTML5 event with the same name, we added a timeupdate event to the Player. Unlike the seeked event, it does not fire on every frame, so if you want only periodic updates about the time being updated, you can use this event without having to throttle it.

clickToPlay prop

This prop allows you to control whether the user is allowed to click on the video to make it pause or play. It is true by default if the controls of the player are enabled.

doubleClickToFullscreen prop

This prop allows you to control whether the user is allowed to double click on the video to make it go fullscreen. If enabled, single-clicking to pause the video will have a short delay in order to wait for a potential second click.

Timeline scroll position gets persisted

When coding a video, and refreshing the preview, the video would jump back to the first frame which was annoying. Not anymore - if you refresh you are back where you left off!

Remotion waits for fonts to be loaded

If a Webfont gets loaded via Google Fonts, it would be loaded using font-display: swap, which means Remotion would sometimes render a frame before the font is loaded. Now we use the document.fonts.ready browser API to make loading webfonts completely seamless for you.

Specify a custom --port

By default the Remotion preview starts a server on port 3000. Should you want to have it start on a different port for any reason, you can now pass a CLI flag.

More helpful error handling

We want to help you out whenever you are facing a tricky issue. Here are some examples of scenarios where we now give you a helpful warning and linking to the documentation:

  • Multiple versions of Remotion are imported on a page (for example when using the <Player /> in your app)
  • A video is loaded that does not support seeking (for example when serving from Google Cloud Storage)
  • A video with an unsupported codec is loaded (for example an MP4 in the Chromium browser)
  • A delayRender() handle has been created but never cleared

Documentation upgrades

We now have a search at the top right of the docs! Thanks to Algolia for hosting the widget and indexing the documentation.

Type hints

Did you notice it in the snippets above? You can now hover over any symbol and see it's type. It's powered by Typescript + Twoslash. A really nice side effect is that it's now impossible for us to make typos in the documentation since all snippets are type checked.

Troubleshooting guides

We now have help articles on various issues that you may face. Currently we have written about 6 common problems, and put them in a new section of the docs called Troubleshooting.

Page about third party integrations

A new page has been created listing some popular libraries and describing how well they work together with Remotion - or don't.

New landing page

Finally, the homepage of Remotion got a makeover! We hope to better communicate what Remotion is and why it's awesome.

Various Bugfixes

  • Fixed a memory leak while calling getCompositions() #480
  • Add emoji support to Dockerfile #476
  • The preview now shows the current time within a sequence in a timeline #468
  • TTF fonts can now be loaded locally #462
  • Fix Remotion Player assuming it's in a rendering environment #460
  • Fix getAudioMetadata() and getAudioDuration() not returning an error in the onError event #459
  • Added documentation on how to use TailwindCSS 69b079e
  • Fixed documentation about how to use SASS/SCSS e92c917
  • If you are using a plain JS entry file, you can also use a remotion.config.js config file #475
  • You can customize how many timeline tracks should be shown at most using Config.Preview.setMaxTimelineTracks() #439
  • Fixed a bug where environment variables would not be immediately accessible #432
  • Input props flag can now also be passed for preview #430
  • Better input validation of the most common functions
  • Improve rendering of very long videos, using less memory and avoiding a maximum callstack exceeded error message. #398
  • Setting crf to 0 is not allowed anymore for H264 videos as it will lead to a video that does not play on all platforms. #379
  • The docs for <Sequence /> now have interactive examples. #378
  • A lot of tests have been added to the core functions. #376 etc.
  • The Typescript types have been improved to allow for more types of components to be passed to component. #372

Thank you to all the contributors

Most of these features were brought up and implemented by the community which is super awesome. Time for some shoutouts!

  • Thanks to Björn Zeutzheim for implementing the @remotion/three package!
  • Thanks to Frenco for making all documentation code snippets typesafe and adding hover preview. You even fixed a bug in Twoslash, the library powering this feature and executed this with so much care!
  • Thanks to cnnr for implementing environment variables support!
  • Thanks to Arthur Denner for discovering the document.fonts.ready feature!
  • Thanks to Ashik Meerankutty for implementing the timeupdate event for the Player!
  • Thanks to Soham Shah for adding GitHub Issue Templates and working on a Next.JS template!
  • Thanks to William Candillon for implementing ProRes support!
  • Thanks to Salvatore for implementing playbackRate support for Video and Audio components!
  • Thanks to ahgsql for improving how Sequences are displayed in the timeline!
  • Thanks to Mika Andrianarijaona for implementing the --port parameter!
  • Thanks to Jonas Brunner, Tobias Boner and Calvin Falter for vastly improving the test coverage!
  • Thanks to Tamás Sallai for filing and commenting many important issues and drafting accessibility features.

As well as many other contributing bugfixes and documentation improvements.

Business update

We start seeing people launching products and startups using Remotion, which is awesome. Stay tuned for posts that highlight how people are using Remotion for their business case! At the time of writing, five customers are currently in possession of a Company license.

In addition to Shankhadeep Dey, we are also welcoming Mehmet Ademi to the team as a project manager and business developer.

We are increasingly putting bounties on non-urgent issues and have rewarded $657 to Remotion contributors to far, in addition to multiple thousands of dollars being paid out to top contributors that were approached by us.

We are working on multiple fronts to make Remotion even better for businesses and Indie Hackers that want to integrate programmatic video into their product - stay tuned!