You can continue to use Media Parser in existing projects. Media Parser is not yet deprecated.
We have not yet published any material for how to migrate from Media Parser to Mediabunny, but we will slowly create it and update our documentation.
]]>Jonny Burgerhttps://github.com/JonnyBurger<![CDATA[Remotion Editor Starter]]>https://www.remotion.dev/blog/editor-starter2025-08-21T00:00:00.000ZToday, we're launching the Editor Starter, a paid template for building your own video editor!
It puts the best pieces of Remotion together into one template.
If you are planning to build a video editor with Remotion, this is a great starting point.
Learn more about the Editor Starter by clicking the links below!
This is an oversimplified example - you might get performance problems running this code with longer videos because samples are being passed faster than they can be decoded.
Developers need a better way to work with video on the web.
Media Parser is a foundational library that unlocks many upcoming improvements to Remotion and for the web in general. We will be implementing many of these ideas ourselves, but also invite you to build with Media Parser.
We built the fastest video converter on the webβ
Try out remotion.dev/convert, our web video converter powered by Remotion Media Parser and WebCodecs. Because it works offline and the conversion is hardware-accelerated, it is faster than any other web converter we could find!
note
Update, 20th October 2025: We are phasing out Media Parser and are moving to Mediabunny! remotion.dev/convert is now updated to use Mediabunny.
]]>Jonny Burgerhttps://github.com/JonnyBurger<![CDATA[Lambda renders are now faster]]>https://www.remotion.dev/blog/faster-lambda2024-03-21T00:00:00.000ZWith Remotion v4.0.130, Remotion Lambda renders now complete significantly faster!
The longer the video, the higher the speedup.
Rendering a 1920x1080px video with an <OffthreadVideo> tag
loading a 15MB Full HD video and looping it. The Lambda function has been
given 3000MB of memory.
Thanks to an innovative audio concatenation strategy that we implemented with help from Max Schnur from Wistia, we can skip an audio re-encoding step at the end.
Remotion Lambda renders portions of a video in parallel and concatenates them at the end.
The slow part is actually not the video, but the audio rendering!
While other codecs are possible, a .mp4 file usually contains AAC audio.
Concatenating the AAC chunks is usually not possible without creating some artifacts.
Online resources such as Stack Overflow were quickly exhausted.
I went to the RTC.on multimedia conference and talked about this problem in my talk.
A few listeners came up to me afterwards and gave me a few ideas. I did a session with MichaΕ ΕledΕΊ from Software Mansion, all of which helped me even understand the problem we are facing in the first place.
No immediate solution was found, but the problem was put aside when we realized that the libfdk-aac encoder is twice as fast as FFmpeg's native encoder, softened the problem for the moment.
Each audio segment needs to have a sample count divisible by 1024
Each segment should have extra packets at the beginning and the end to not lose the keyframes.
The extra padding will be removed when concatenating them together.
There are many tricky aspects to implementing this correctly:
Each audio segment needs to be a bit longer than previously and they need to be slightly overlapping. Extra frames need to be evaluated, but they don't need to be screenshotted.
Video chunks should not contain the padding, hence audio and video need to be separated.
Depending on the rounding and the position in the audio, between 1 and 3 extra packets are required.
The inpoint and outpoint FFmpeg filters need to be nano-second precise for correct trimming.
All audio layers should be resampled to be the same sample rate (we decided for 48000 Hz)
Our timeline positioning, volume curves, pitch correction, playback rate capabilities need to continue working.
Rendering only a portion of the timeline will shift the start timestamp, which changes the math for each chunk.
The video frame rate of (commonly 30fps) and the audio sample rate of (commonly 48000Hz) do seldomly align. By capturing extra frames, we get too much padding which needs to be trimmed off again for each chunk.
The FFmpeg atempo filter is imprecise: For example, speeding up 80.000 audio samples by 2x will lead to 40.014 audio samples. Tiny imperfections will lead to seamless concatenation not working at all. To fix this, we had to flip the order of trimming and speeding up audio.
Not pictured above, each AAC file has a silence of 512 samples at the beginning of the file. This delays all audio slightly, but by adding a negative offset to the MP4 container, this is usually balanced out.
If all of these factors are accounted for, concatenating AAC chunks will be completely seamless!
Upgrade to Remotion 4.0.130 or later to benefit from the faster rendering on Lambda.
We look forward to engineer even more performance improvements in the future for lower costs and better user experience!
]]>Jonny Burgerhttps://github.com/JonnyBurger<![CDATA[You can now deploy the Remotion Studio]]>https://www.remotion.dev/blog/deployable-studio2024-03-05T00:00:00.000ZWe now make it possible to export the Remotion Studio as a static website and deploy it to any hosting provider.
You can share the resulting URLs with your team, clients or friends. They can preview the video, and change the parameters to customize the video.
You can also pass the URL to any Remotion rendering API, such as npx remotion render and renderMedia(), without having to clone the code.
Use npx remotion bundle to export the Remotion Studio as a static website. Enter this build command on Vercel, Netlify or another provider to continuously deploy the Studio.
You may also deploy the Remotion Studio as a long-running server, for example on Fly.io or Render.com.
The advantage is that the Render Button stays active, meaning you can render and download videos!
]]>Jonny Burgerhttps://github.com/JonnyBurger<![CDATA[Remotion 4.0]]>https://www.remotion.dev/blog/4-02023-07-03T00:00:00.000ZWelcome to the biggest Remotion update ever!
With Remotion 4.0, we offer significant improvements to every workflow.
We added handy features to the Remotion Preview - as a result, it's more than just a preview! Therefore, we renamed it: Say hello to the Remotion Studio.
The props of a composition can now be defined as a Zod schema.
Doing this will not only make your defaultProps typesafe, but also allow you to edit them in the Remotion Studio.
Edit numbers, strings, arrays, objects, enums and dates directly using a graphical interface. Even nested data structures can be visualized and edited.
Once you are happy with the changes you've made, you can even save the props back to your project. This works with arbitrary JSON data.
Instead of typing in a CLI command, you can now simply press a button to render an asset.
A graphical interface allows you to discover and tweak all options of a render. You can follow the progress of a render in the Remotion Studio, queue multiple renders, and reveal the output in the file explorer.
Every render triggered through the UI is also trackable in the CLI as usual and synchronizes to other instances of the Remotion Studio.
Failed renders show the stack trace and allow for retries with the same configuration.
Edited props in the Remotion Studio can be used to render a video using the Render Button as well - which means you can now render a parameterized video by filling out a form and not having to touch any code.
Installing FFmpeg is now superfluous, as each Remotion project comes with a tiny version of FFmpeg baked into it.
We eliminate the our burden of having to support multiple versions of FFmpeg, and you don't have to worry about installing it anymore.
We ship a custom build of FFmpeg 6.0, which is much smaller than a version that you would download. On Lambda, it decreases the cold start time of your functions.
We also get access to the low-level C API that allows us to do things that were not possible before.
The <OffthreadVideo> component is the preferred way to embed an existing video into a Remotion project.
While previously, frames were extracted using the FFmpeg CLI, we now use the FFmpeg C API to extract frames. Because we can keep the video open between extractions, this is much faster than before
Unnecessary redundant decoding work can now be skipped, which makes the component up to twice as fast during rendering!
Precalculate props before mounting the React component
To demonstrate the possibilities of the new API, we made a new section in the docs entirely dedicated to data-driven videos. See: Parameterized rendering.
All of our templates have been upgraded to use Remotion 4.0. Many of them make use of the new features.
We also introduce new templates, such as [https://www.remotion.dev/templates/stargazer] which is a popular template for celebrating GitHub star milestones and can now be initialized using npm init video.
See the Migration Guide for a full list of breaking changes.
]]>Jonny Burgerhttps://github.com/JonnyBurger<![CDATA[Remotion 3.3]]>https://www.remotion.dev/blog/3-32022-11-17T00:00:00.000ZNo 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.
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:
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.
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.
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.
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.
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.
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.
Previously, bundle() accepted three arguments: entryPoint, onProgress and options.
Old bundle() signature
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
import {bundle} from '@remotion/bundler';bundle({entryPoint: './src/index.ts',onProgress: (progress) =>console.log(progress),publicDir: process.cwd() + '/public',});
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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().
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
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!
]]>Jonny Burgerhttps://github.com/JonnyBurger<![CDATA[We raised CHF 180k to simplify programmatic video!]]>https://www.remotion.dev/blog/seed-funding2022-11-09T00:00:00.000ZWe 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.
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.
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.
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!
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.
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.
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
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.
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.
]]>Jonny Burgerhttps://github.com/JonnyBurger<![CDATA[Remotion 3.1]]>https://www.remotion.dev/blog/3-12022-07-14T00:00:00.000ZThis 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! π
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!
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.
This component is an alternative to the <Html5Video> 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 <Html5Video> or check out our visual explanation on Instagram!
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.
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 π
]]>Jonny Burgerhttps://github.com/JonnyBurger<![CDATA[Remotion 3.0]]>https://www.remotion.dev/blog/3-02022-04-26T00:00:00.000ZAfter 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.
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.
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.
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!
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.
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.
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.
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.
[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.
]]>Jonny Burgerhttps://github.com/JonnyBurger<![CDATA[Remotion 2.6]]>https://www.remotion.dev/blog/2-62022-01-05T00:00:00.000ZThe 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!
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.
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.
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.
Data URLs are now valid sources for <Html5Audio /> and <Html5Video /> 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!
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.
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!
]]>Jonny Burgerhttps://github.com/JonnyBurger<![CDATA[Remotion 2.5]]>https://www.remotion.dev/blog/2-52021-10-26T00:00:00.000ZWe are excited to announce a packed October release!
We did work in many areas and these improvements will surely boost your productivity!
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.
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.
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.
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!
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!
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.
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.
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!
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!
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!
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.
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!
]]>Jonny Burgerhttps://github.com/JonnyBurger<![CDATA[Remotion 2.4]]>https://www.remotion.dev/blog/2-42021-09-27T00:00:00.000ZIn 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!
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!).
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.
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.
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).
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.
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.
]]>Jonny Burgerhttps://github.com/JonnyBurger<![CDATA[Remotion 2.3]]>https://www.remotion.dev/blog/2-32021-08-11T00:00:00.000ZRemotion 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.
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.
<Stillid="Thumbnail"component={Thumbnail}width={1200}height={627}defaultProps={{title: 'Welcome to Remotion',description: 'Edit Video.tsx to change template',slogan: 'Write videos\nin React', }}/>;
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.
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.
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.
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.
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.
]]>Jonny Burgerhttps://github.com/JonnyBurger<![CDATA[Remotion 2.2]]>https://www.remotion.dev/blog/2-22021-07-09T00:00:00.000ZWelcome 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 π.
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.
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.
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.
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!
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.
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:
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.
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.
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.
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.
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!
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.
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.
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
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.
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.
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!
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!
]]>Jonny Burgerhttps://github.com/JonnyBurger<![CDATA[Remotion 2.1]]>https://www.remotion.dev/blog/2-12021-05-06T00:00:00.000ZThis releases features new utility functions, improved developer experience and an experimental release of the Remotion Player!
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.
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.
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!
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.
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.
]]>Jonny Burgerhttps://github.com/JonnyBurger<![CDATA[Remotion 2.0]]>https://www.remotion.dev/blog/2-02021-04-15T00:00:00.000ZThis is our biggest and best release so far - today we are unloading a lot of awesome, highly requested features!
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!
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.
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.
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!
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.
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.
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).
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.
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.
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.
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.
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.
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.
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!
]]>Jonny Burgerhttps://github.com/JonnyBurger<![CDATA[Announcing pricing for company licenses]]>https://www.remotion.dev/blog/company-licenses2021-03-15T00:00:00.000ZWe 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!
]]>Jonny Burgerhttps://github.com/JonnyBurger<![CDATA[Remotion 1.5]]>https://www.remotion.dev/blog/1-52021-03-03T00:00:00.000ZThis release contains no big new features, but addresses some common problems.
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.
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.
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.
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.
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.
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.
