Here we try to explain the meaning of some terms that are used often in the documentation, but are not self-explanatory. Which terms would you like to have explained? Let us know!
A composition is the definition of a renderable asset. It consists of a React component, width, height, FPS and a duration. It can be registered in the Remotion Preview by rendering a
<Composition> (to render video or audio render target) or a
In the Remotion Player, you don't use the
<Composition> component, rather you pass the component and metadata directly to the
<Sequence> is a built-in component that manipulates the time for its children. For example, you might have an animation that starts at frame
0. If you would like to delay the animation, rather than refactoring the animation, you can wrap it in a
<Sequence> and define a delay using the
Using a sequence, you can also trim the start and end of an animation by passing the
The string that you pass to the
<Composition> component. You need the composition ID to reference what you would like to render, for example:
npx remotion render src/index <composition-id>. See: Defining compositions
When you render using the command line, a bundle is automatically generated. When you are using the Node.JS APIs, you need to use the
A serve URL is a URL under which the bundle is hosted. When rendering your video, Remotion will open a headless browser and visit that URL in order to make screenshots of it.
The most common use case for a serve URL is when rendering a video on Lambda, you need to deploy your bundle to Amazon S3, which will turn the bundle into a serve URL.
If you have a serve URL, you can also render a video locally by passing a serve URL instead of an entry point. A serve URL doesn't have to be on S3, it can be on any provider that supports static deployments (e.g. Netlify, Vercel or GitHub pages) or even be a URL that runs on Localhost.
The public dir is the directory in which you can put assets that can be loaded using
staticFile(). By default, it is the directory that is named
public/ inside the Remotion Root.
The Remotion Root is the directory in which Remotion commands get executed in. It influences the default location of the public dir, the
.env file and the config file amongst others. To determine the Remotion Root, take the directory from which you execute commands or run scripts, and go upwards until you hit a directory that contains a
package.json file. Many Remotion CLI commands also print the Remotion Root directory if you pass
The entry point is the file where the Remotion CLI and Node.JS APIs will look for a Remotion project.
- By default in most templates, it is
- In older projects, it may have an
.tsxextension instead of
- The entry point can be passed to the render command, for example:
npx remotion render src/index.ts.
- The entry point should call
- If you render a video using
npx remotion render, the entry point is printed in grey.
- You can customize the entry point in the config file using
In the Remotion Player, there is no concept of an entry point. You directly pass a React component and metadata to the
The Remotion Preview is the editor that opens that when you run
npx remotion preview followed by the entry point. It allows fast editing and playback of compositions. It is included in the
@remotion/cli package. It is not the same as the Remotion Player.
The Remotion Player is a React component
<Player> that can be embedded into a React app. It can be used by installing the
@remotion/player package into a React app (for example: Create React App, Next.JS, Remix). It is not the same as the Remotion Preview.
For local rendering, concurrency refers to how many render processes are started in parallel. Each process holds a Chrome tab that renders web content and then screenshots it.
For rendering on Lambda, concurrency refers to the amount of Lambda functions that are spawned for a render.
Higher concurrency can lead to faster render times, but too high concurrency will lead to diminishing returns and to overload of the machines.
Input props are data that can be passed to a render in order to parametrize the video. They can be obtained in two ways:
- This data is passed as actual React props to the component that you defined in your composition
- Using the
getInputProps()function, you can retrieve the props even outside your component, for example to dynamically change the duration or dimensions.
In the Remotion Preview, you can set default props to serve as placeholder data for designing your video. If your input props don't override the default props, the default props will be used.
In the Remotion Player, there are no default props, but you can pass
inputProps directly to the