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 Studio 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
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.
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
- 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
The Remotion Studio is the editor that opens that when you run
npx remotion studio or
npx remotion preview. 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 former name of the Remotion Studio, renamed in v4.0. Since the Preview gained more capabilities than just previewing, the name was not fitting anymore.
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 Studio.
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 Studio, 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. See: How props get resolved
Cloud Run Url
For rendering on Cloud Run, this url is the address you use to access the service that performs the render. It is possible to make use of a custom domain, by visiting the console in GCP and navigating to Cloud Run.
For rendering on Cloud Run, this is the name of the deployed service. It can be used as an alternative to the full Cloud Run url.