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
<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
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.
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 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
src/index.tsx. The entry point can be passed to the render command, for example:
npx remotion render src/index.tsx. The entry point should call
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.