Skip to main content

Terminology

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!

Composition​

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 <Still>.

In the Remotion Player, you don't use the <Composition> component, rather you pass the component and metadata directly to the <Player>.

Sequence​

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 from prop.

Using a sequence, you can also trim the start and end of an animation by passing the durationInFrames prop.

Composition ID​

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

Bundle​

Once you have written your video in React, you need to bundle it using Webpack in order to render it. The output artifact of the bundling process is called the bundle. It is a folder containing HTML, CSS, JavaScript and other assets.

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 bundle() method.

Serve URL​

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.

Public Dir​

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.

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 --log=verbose.

Entry point​

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.ts.
  • In older projects, it may have an .tsx extension instead of .ts.
  • The entry point can be passed to the render command, for example: npx remotion render src/index.ts.
  • The entry point should call registerRoot().
  • 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 Config.Bundling.setEntryPoint().

In the Remotion Player, there is no concept of an entry point. You directly pass a React component and metadata to the <Player>.

Remotion Preview​

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.

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.

Concurrency​

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​

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 desigining 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 <Player>.