Welcome 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.
Read more: Visual editing
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.
Remotion 4.0 ships with a Rust binary that speeds up current and future features.
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.
<OffthreadVideo>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!
Previously you could generate PNGs and JPEGs using Remotion - now we support WebP and PDF as well!
There are plenty of ways you can render stills: the new Render button, the npx remotion still command, the renderStill() Node.JS API, render on Lambda with renderStillOnLambda() or on Google Cloud Run using renderStillOnCloudrun()!
We are introducing a new calculateMetadata() API for the <Composition> component. It helps if you want to:
Adjust the duration or resolution based on the props of the React component
2
Perform data fetching before the video renders
3
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.
These features added inbetween v3.3 and v4.0 are worth highlighting:
@remotion/rive packageRive is a faster and smaller alternative to Lottie.
With the new @remotion/rive package, you can include Rive animations in your project.
@remotion/shapes package@remotion/shapes is a handy package for including geometric shapes like <Triangle>, <Star> or <Pie> in your components!
Those components are easy to animate, pure, dependency-free and work well with @remotion/paths.
Each shape can be used as a React component <Star> or as a pure function that returns an SVG path makeStar().
@remotion/tailwind packageThe new Tailwind package allows you to install Tailwind more easily in any Remotion project.
Instead of the audio codec being tied to the video codec, you can now choose the audio codec independently.
speculateFunctionName() API allows for faster launches of a render.npx remotion lambda compositions and getCompositionsOnLambda() APIs have now been added."use client" to support import in React Server Components.mutechange, scalechange, volumechange eventsAll APIs that can be imported in the browser now have an ES Module version.
In your apps, you can now display a font picker and load fonts dynamically only when they are needed.
The remotion package has had the following improvements:
getStaticFiles() allows you get get a list of files in the public/ folder.cancelRender() allows you to abort a render should you run into an error.<Experimental.Clipper> and <Experimental.Null><Series.Sequence> and <Loop> now support style and ref.As a counterpart for Lambda, we are developing a Google Cloud Run package.
The alpha is now available, help us test it by becoming an early adopter.
See the GitHub release to see the full changelog.
See the Migration Guide for a full list of breaking changes.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。