Remotion

https://www.remotion.dev/docs
Admin
Remotion is a React-based framework for programmatically creating videos and motion graphics. It...
Tokens:1,259,261
Snippets:11,012
Trust Score:9.6
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Initiate a render and get its status (render.php)

Source: https://www.remotion.dev/docs/lambda/php

This snippet shows how to set up the PHP client, initiate a render, and poll for its progress. It requires the Lambda setup and environment variables: AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, REMOTION_APP_REGION, REMOTION_APP_FUNCTION_NAME, and REMOTION_APP_SERVE_URL. The example supports .env files and uses the 'unsafe' Dotenv method because AWS reads from getenv().

```php
<?php
use Aws\Credentials\CredentialProvider;

// We'll assume you use Composer, which will add autoload.php
require_once dirname(__DIR__) . '/vendor/autoload.php';

use Dotenv\Dotenv;
use Remotion\LambdaPhp\PHPClient;
use Remotion\LambdaPhp\RenderParams;

// Load environment variables
// Use "unsafe" because AWS reads environment variables from getenv(), not $_ENV
$dotenv = Dotenv::createUnsafeImmutable(__DIR__);
$dotenv->load();

// Specify the region you deployed to, for example "us-east-1"
$region = getenv('REMOTION_APP_REGION');
// Specify the function you would like to call
$functionName = getenv('REMOTION_APP_FUNCTION_NAME');
// Specify the URL to your Webpack bundle
$serveUrl = getenv('REMOTION_APP_SERVE_URL');


$provider = CredentialProvider::defaultProvider();

// Instantiate the client
$client = new PHPClient($region, $serveUrl, $functionName, $provider);

// Initiate the param object and customize as needed
$params = new RenderParams();

$params->setComposition('react-svg');

// Set input props
$params->setInputProps(['message' => 'yo whats up']);

// Execute the render and get the response

$renderResponse = $client->renderMediaOnLambda($params);

// Output render response
print_r($renderResponse);


// Get render progress
$renderId = $renderResponse->renderId;
$bucketName = $renderResponse->bucketName;


$renderProgressResponse = $client->getRenderProgress($renderId, $bucketName);

while (!$renderProgressResponse->done) {
  // Render is not done
  // Get the render progress
  $renderProgress = $renderProgressResponse->overallProgress;
  // Output render progress
  print_r("progress: " . ($renderProgress * 100) . "%\n");
  // Wait 1 second
  sleep(1);
  // Get render progress again
  $renderProgressResponse = $client->getRenderProgress($renderId, $bucketName);
}

print_r("Render is done!\n");
```

--------------------------------

### Basic Player setup with @remotion/player

Source: https://www.remotion.dev/docs/player/examples

A minimal example showing the required props for the Player component: component, durationInFrames, compositionWidth, compositionHeight, and fps.

```tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";

export const App: React.FC = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
    />
  );
};
```

--------------------------------

### Example output of npx remotion versions

Source: https://www.remotion.dev/docs/cli/versions

Example output when all Remotion packages are aligned. The command prints the current version and lists each installed package, followed by a success message.

```text
On version: 4.0.498
- @remotion/bundler
- @remotion/cli
- @remotion/eslint-config
- @remotion/renderer
- @remotion/media-utils
- @remotion/babel-loader
- @remotion/lambda
- @remotion/three
- @remotion/gif
- remotion

✅ Great! All packages have the same version.
```

--------------------------------

### Example response with status and videoUrl

Source: https://www.remotion.dev/docs/azure-container-apps

Example JSON response from the GET /renders/{jobId} request. If status is completed, combine YOUR_SERVICE_URL and videoUrl to generate the download link.

```json
{
  "status": "completed",
  "videoUrl": "/renders/955338f6-2607-48bd-bedb-6d4c98f7b4dc.mp4",
  "data": {"titleText": "Hello, world!"}
}
```

--------------------------------

### Start the development server

Source: https://www.remotion.dev/docs/ai/coding-agents

Launch the Remotion preview in your browser.

```bash
npm run dev
```

--------------------------------

### Mute render with renderMedia()

Source: https://www.remotion.dev/docs/audio/exporting

Pass muted: true to renderMedia() to exclude audio from a render. This example shows the full setup including bundling, getting compositions, and rendering.

```tsx
import {bundle} from '@remotion/bundler';
import {getCompositions, renderMedia} from '@remotion/renderer'; // The composition you want to render
import path from 'path';
const compositionId = 'HelloWorld';

// You only have to do this once, you can reuse the bundle.
const entry = './src/index';
console.log('Creating a Webpack bundle of the video');
const bundleLocation = await bundle({
  entryPoint: path.resolve(entry),
  onProgress: () => undefined,
  // If you have a Webpack override, make sure to add it here
  webpackOverride: (config) => config,
});

// Parametrize the video by passing arbitrary props to your component.
const inputProps = {
  foo: 'bar',
};

// Extract all the compositions you have defined in your project
// from the webpack bundle.
const comps = await getCompositions({
  serveUrl: bundleLocation,
  // You can pass custom input props that you can retrieve using getInputProps()
  // in the composition list. Use this if you want to dynamically set the duration or
  // dimensions of the video.
  inputProps,
});

// Select the composition you want to render.
const composition = comps.find((c) => c.id === compositionId);

// Ensure the composition exists
if (!composition) {
  throw new Error(`No composition with the ID ${compositionId} found.
  Review "${entry}" for the correct ID.`);
}
const outputLocation = `out/${compositionId}.mp4`;

// ---cut---
await renderMedia({
  composition,
  serveUrl: bundleLocation,
  codec: 'h264',
  muted: true,
  outputLocation,
  inputProps,
});
```

--------------------------------

### useCurrentFrame() with AbsoluteFill from prop

Source: https://www.remotion.dev/docs/use-current-frame

Shows how useCurrentFrame() returns the frame relative to the parent component. When a component is inside an <AbsoluteFill> with a from prop, the frame is offset by that value. In this example, the Title and MyVideo components get frame 25, while Subtitle gets 15 because it starts at frame 10.

```tsx
import {AbsoluteFill, useCurrentFrame} from 'remotion';

const Title = () => {
  const frame = useCurrentFrame(); // 25
  return <div>{frame}</div>;
};

const Subtitle = () => {
  const frame = useCurrentFrame(); // 15
  return <div>{frame}</div>;
};

const MyVideo = () => {
  const frame = useCurrentFrame(); // 25

  return (
    <div>
      <Title />
      <AbsoluteFill from={10}>
        <Subtitle />
      </AbsoluteFill>
    </div>
  );
};
```

--------------------------------

### Install starter template with bun create video --skia

Source: https://www.remotion.dev/docs/skia

Creates a new Remotion project with the Skia starter template using bun.

```bash
bun create video --skia

```

--------------------------------

### Base BlueSquare example

Source: https://www.remotion.dev/docs/loop

Base example showing the BlueSquare component without any looping. This is the starting point for the examples that follow.

```tsx
const MyComp = () => {
  return <BlueSquare />;
};
```

--------------------------------

### Install starter template with npx create-video --skia

Source: https://www.remotion.dev/docs/skia

Creates a new Remotion project with the Skia starter template using npx.

```bash
npx create-video --skia

```

--------------------------------

### Delay video appearance with from prop

Source: https://www.remotion.dev/docs/videos

Use the from prop to delay the start of the video. Example starts at frame 60.

```tsx
import React from 'react';
import {Video} from '@remotion/media';
import {staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <Video from={60} src={staticFile('video.mp4')} />;
};
```

--------------------------------

### Example output from deployment

Source: https://www.remotion.dev/docs/lambda/cli/sites/create

Example output showing the bundling, bucket creation, and upload progress, followed by the deployed site URL and site name.

```text
(1/3) [====================] Bundled video 3975ms
(2/3) [====================] Created bucket 457ms
(3/3) [====================] Uploaded to S3 25118ms

Deployed to S3!
Serve URL: https://remotionlambda-12345.s3.eu-central-1.amazonaws.com/sites/abcdef/index.html
Site Name: abcdef
```

--------------------------------

### Get services with compatibleOnly

Source: https://www.remotion.dev/docs/cloudrun/getservices

Retrieves a list of Remotion services deployed to GCP Cloud Run. The compatibleOnly parameter is set to true, so only services compatible with the installed version of @remotion/cloudrun are returned. The example logs various service properties such as serviceName, timeoutInSeconds, memoryLimit, cpuLimit, remotionVersion, uri, region, and consoleUrl.

```typescript
import {getServices} from '@remotion/cloudrun/client';

const info = await getServices({
  region: 'us-east1',
  compatibleOnly: true,
});

for (const service of info) {
  console.log(service.serviceName); // "remotion--3-3-82--mem512mi--cpu1-0"
  console.log(service.timeoutInSeconds); // 300
  console.log(service.memoryLimit); // 512Mi
  console.log(service.cpuLimit); // 1.0
  console.log(service.remotionVersion); // "4.0.1"
  console.log(service.uri); // "https://remotion--3-3-82--mem512mi--cpu1-0--t-300-1a2b3c4d5e-ue.a.run.app"
  console.log(service.region); // "us-east1"
  console.log(service.consoleUrl); // "https://console.cloud.google.com/run/detail/us-east1/remotion--3-3-82--mem512mi--cpu1-0--t-300/logs"
}
```

--------------------------------

### Install starter template with pnpm create video --skia

Source: https://www.remotion.dev/docs/skia

Creates a new Remotion project with the Skia starter template using pnpm.

```bash
pnpm create video --skia

```

--------------------------------

### Install starter template with yarn create video --skia

Source: https://www.remotion.dev/docs/skia

Creates a new Remotion project with the Skia starter template using yarn.

```bash
yarn create video --skia

```

--------------------------------

### Initialize the serverless project

Source: https://www.remotion.dev/docs/lambda/serverless-framework-integration

Runs the serverless command to set up the project for deployment. The output shows the prompt asking whether to deploy now; select 'n'.

```bash
 serverless
```

```bash
serverless
Running "serverless" from node_modules

Your service is configured with Serverless Dashboard and is ready to be deployed.

? Do you want to deploy now? (Y/n)

```

--------------------------------

### Example response with jobId

Source: https://www.remotion.dev/docs/azure-container-apps

Example JSON response from the POST /renders request. Contains the jobId used to get the render status.

```json
{
  "jobId": "955338f6-2607-48bd-bedb-6d4c98f7b4dc"
}
```

--------------------------------

### Install @rspack/core for Rspack plugin

Source: https://www.remotion.dev/docs/bundlers

Install the @rspack/core package to use Rspack plugins with Remotion. This is a prerequisite for the Rspack plugin example.

```bash
npm i --save-exact @rspack/core
```

--------------------------------

### Install Node natively with nvm

Source: https://www.remotion.dev/docs/troubleshooting/rosetta

Commands to install Node natively using nvm on Apple Silicon. Run arch -arm64 zsh to start an arm64 shell, then nvm install 16 to install Node 16 natively.

```bash
arch -arm64 zsh
nvm install 16
```

--------------------------------

### Install @remotion/video-matting and dependencies

Source: https://www.remotion.dev/docs/video-matting/node

Install the required packages: @remotion/video-matting, @huggingface/transformers, mediabunny, and @mediabunny/server. Use --save-exact to pin versions.

```bash
npm i --save-exact @remotion/video-matting@4.0.529 @huggingface/transformers mediabunny @mediabunny/server
```

--------------------------------

### Getting the middle point of a path

Source: https://www.remotion.dev/docs/paths/get-point-at-length

Uses getLength() to get the total path length, then multiplies by 0.5 to get the midpoint coordinates. This example shows how to sample any point on the path by scaling the length.

```tsx
import { getLength, getPointAtLength } from "@remotion/paths";

const path = "M 0 0 L 100 0";
const length = getLength(path);
const point = getPointAtLength(path, length * 0.5);

console.log(point); // { x: 50, y: 0 }
```

--------------------------------

### Start Testbed with bun run dev

Source: https://www.remotion.dev/docs/contributing

Start the Testbed for testing your changes. Run from the repository root.

```sh
cd packages/example
bun run dev
```

--------------------------------

### Example project structure with public/ folder

Source: https://www.remotion.dev/docs/staticfile

Shows the recommended folder structure for a Remotion project, with the public/ folder in the root next to package.json.

```txt
my-video/
├─ node_modules/
├─ public/
│  ├─ my-image.png
│  ├─ font.woff2
├─ src/
│  ├─ Root.tsx
│  ├─ index.ts
├─ package.json
```

--------------------------------

### Get services with region us-west1

Source: https://www.remotion.dev/docs/cloudrun/getservices

Retrieves a list of Remotion services deployed to GCP Cloud Run in the us-west1 region. The compatibleOnly parameter is set to true, so only services compatible with the installed version of @remotion/cloudrun are returned. The example logs various service properties such as serviceName, timeoutInSeconds, memoryLimit, cpuLimit, remotionVersion, uri, region, and consoleUrl.

```typescript
import {getServices} from '@remotion/cloudrun';

const info = await getServices({
  region: 'us-west1',
  compatibleOnly: true,
});

for (const service of info) {
  console.log(service.serviceName); // "remotion--3-3-82--mem2gi--cpu2--t-1100"
  console.log(service.timeoutInSeconds); // 1100
  console.log(service.memoryLimit); // 2Gi
  console.log(service.cpuLimit); // 2
  console.log(service.remotionVersion); // "3.3.82"
  console.log(service.uri); // "https://remotion--3-3-82--mem2gi--cpu2--t-1100-1a2b3c4d5e-uw.a.run.app"
  console.log(service.region); // "us-west1"
  console.log(service.consoleUrl); // "https://console.cloud.google.com/run/detail/us-west1/remotion--3-3-82--mem2gi--cpu2--t-1100/logs"
}
```

--------------------------------

### WebGPU HtmlInCanvas with copyElementImageToTexture

Source: https://www.remotion.dev/docs/remotion/html-in-canvas

WebGPU example using HtmlInCanvas: onInit gets a WebGPU context, requests a GPU, and compiles shaders; it must return a cleanup function that destroys created resources. In onPaint, draw the elementImage to the canvas using copyElementImageToTexture. This snippet shows the minimal WebGPU type declarations and the start of the WGSL shader.

```tsx
import React, {useCallback, useRef} from 'react';
import {
  AbsoluteFill,
  HtmlInCanvas,
  type HtmlInCanvasOnInit,
  type HtmlInCanvasOnPaint,
  useCurrentFrame,
  useVideoConfig,
} from 'remotion';

// Minimal WebGPU types — `@webgpu/types` is intentionally not a dependency,
// matching the convention in `packages/core/src/effects/gpu-device.ts`.
type Gpu = {
  requestAdapter(): Promise<GpuAdapter | null>;
  getPreferredCanvasFormat(): string;
};
type GpuAdapter = {requestDevice(): Promise<GpuDevice>};
type GpuTextureView = unknown;
type GpuTexture = {createView(): GpuTextureView; destroy(): void};
type GpuBuffer = {destroy(): void};
type GpuBindGroup = unknown;
type GpuPipeline = unknown;
type GpuSampler = unknown;
type GpuShaderModule = unknown;
type GpuDevice = {
  createShaderModule(d: {code: string}): GpuShaderModule;
  createRenderPipeline(d: unknown): GpuPipeline;
  createTexture(d: unknown): GpuTexture;
  createSampler(d?: unknown): GpuSampler;
  createBindGroup(d: unknown): GpuBindGroup;
  createBuffer(d: unknown): GpuBuffer;
  createCommandEncoder(): {
    beginRenderPass(d: unknown): {
      setPipeline(p: GpuPipeline): void;
      setBindGroup(i: number, b: GpuBindGroup): void;
      draw(n: number): void;
      end(): void;
    };
    finish(): unknown;
  };
  queue: {
    submit(c: unknown[]): void;
    writeBuffer(b: GpuBuffer, offset: number, data: BufferSource): void;
    copyElementImageToTexture(
      source: Element | ElementImage,
      width: number,
      height: number,
      destination: {texture: GpuTexture},
    ): void;
  };
};
type GpuCanvasContext = {
  configure(d: {
    device: GpuDevice;
    format: string;
    alphaMode: 'premultiplied' | 'opaque';
  }): void;
  getCurrentTexture(): GpuTexture;
};

const WGSL = /* wgsl */ `
struct VsOut {
  @builtin(position) pos: vec4f,
  @location(0) uv: vec2f,
};
```

--------------------------------

### deploySite() example with progress callbacks

Source: https://www.remotion.dev/docs/cloudrun/deploysite

Deploys a Remotion project to a Cloud Storage bucket and returns the serveUrl. Requires an existing bucket (see getOrCreateBucket()). The site is deployed to a subdirectory, so paths in the project must handle that. Use siteName to overwrite a previous deployment.

```ts
import {deploySite} from '@remotion/cloudrun';
import path from 'path';

const {serveUrl} = await deploySite({
  entryPoint: path.resolve(process.cwd(), 'src/index.ts'),
  bucketName: 'remotioncloudrun-c7fsl3d',
  options: {
    onBundleProgress: (progress) => {
      // Progress is between 0 and 100
      console.log(`Bundle progress: ${progress}%`);
    },
    onUploadProgress: ({totalFiles, filesUploaded, totalSize, sizeUploaded}) => {
      console.log(`Upload progress: Total files ${totalFiles}, Files uploaded ${filesUploaded}, Total size ${totalSize}, Size uploaded ${sizeUploaded}`);
    },
  },
});
console.log(serveUrl);
```

--------------------------------

### Basic command usage

Source: https://www.remotion.dev/docs/lambda/cli/sites/create

Shows the basic syntax for the `npx remotion lambda sites create` command. An entry point can be passed as the first argument; otherwise it is determined automatically.

```bash
npx remotion lambda sites create <entry-point>?
```

--------------------------------

### getDurationInFrames() example

Source: https://www.remotion.dev/docs/transitions/transitionseries

Call getDurationInFrames() on a timing to get its duration in frames. The example assumes a framerate of 30fps and shows a damping of 200, returning 23 frames.

```tsx
import {springTiming} from '@remotion/transitions';

springTiming({config: {damping: 200}}).getDurationInFrames({fps: 30}); // 23
```

--------------------------------

### Install @remotion/webcodecs and @remotion/media-parser

Source: https://www.remotion.dev/docs/webcodecs/convert-a-video

Install the required packages for video conversion in the browser.

```bash
npx remotion add @remotion/webcodecs @remotion/media-parser
```

--------------------------------

### Install @remotion/browser-bundler

Source: https://www.remotion.dev/docs/browser-bundler

Install the package using npx remotion add. Also install @remotion/player for the example below. Keep all Remotion packages on the same version and use the same React and React DOM versions in the host app and virtual project.

```bash
npx remotion add @remotion/browser-bundler
```

--------------------------------

### Start the Remotion Studio

Source: https://www.remotion.dev/docs/cli/studio

Run this command to start the Remotion Studio. You can optionally pass an entry point as an argument; otherwise, it will be determined automatically.

```bash
npx remotion studio <entry-point>?
```

--------------------------------

### renderMediaOnLambda() example

Source: https://www.remotion.dev/docs/lambda/rendermediaonlambda

Starts a Lambda render. Requires a deployed function and a site or Serve URL. The example renders the 'MyVideo' composition with H.264 codec in the 'us-east-1' region.

```tsx
import {renderMediaOnLambda} from '@remotion/lambda/client';

const {bucketName, renderId} = await renderMediaOnLambda({
  region: 'us-east-1',
  functionName: 'remotion-render-bds9aab',
  composition: 'MyVideo',
  serveUrl: 'https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw',
  codec: 'h264',
});
```

--------------------------------

### Install @remotion/video-matting

Source: https://www.remotion.dev/docs/video-matting

Install the video matting package and the Hugging Face transformers library. Use the exact version specified to ensure compatibility.

```bash
npm i --save-exact @remotion/video-matting@4.0.529 @huggingface/transformers
```

--------------------------------

### installWhisperCpp() usage example

Source: https://www.remotion.dev/docs/install-whisper-cpp/install-whisper-cpp

Installs a specific version of Whisper.cpp into a target folder. Returns an object with an `alreadyExisted` property indicating whether the folder already existed and the installation was skipped.

```tsx
import path from 'path';
import {installWhisperCpp} from '@remotion/install-whisper-cpp';

const {alreadyExisted} = await installWhisperCpp({
  to: path.join(process.cwd(), 'whisper.cpp'),
  version: '1.5.5', // A Whisper.cpp semver or git tag
});
```

--------------------------------

### Fly.io setup prompts: answer No

Source: https://www.remotion.dev/docs/studio/deploy-server

Answers to Fly.io setup prompts: answer No to Postgresql, Upstash Redis, and .dockerignore creation.

```txt
? Would you like to set up a Postgresql database now? No
? Would you like to set up an Upstash Redis database now? No
? Create .dockerignore from 1 .gitignore files? No
```

--------------------------------

### Start Remotion Studio

Source: https://www.remotion.dev/docs/brownfield

Start the Remotion Studio with the entry point remotion/index.ts. Replace the entrypoint path if necessary.

```bash
npx remotion studio remotion/index.ts
```

--------------------------------

### radialProgressivePixelate() usage example

Source: https://www.remotion.dev/docs/effects/radial-progressive-pixelate

Example of using radialProgressivePixelate() in a React component with a Video element. The effect is configured with center, width, height, rotation, start, startBlockSize, and endBlockSize properties.

```tsx
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {radialProgressivePixelate} from '@remotion/effects/radial-progressive-pixelate';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          radialProgressivePixelate({
            center: [0.5, 0.5],
            width: 1,
            height: 1,
            rotation: 0,
            start: 0.4,
            startBlockSize: 1,
            endBlockSize: 40,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};
```

--------------------------------

### Basic command syntax for npx remotion cloudrun sites create

Source: https://www.remotion.dev/docs/cloudrun/cli/sites/create

Shows the general syntax for the create command. The entry point is optional; if omitted, it is determined automatically.

```bash
npx remotion cloudrun sites create <entry-point>?
```

--------------------------------

### Example usage: install Whisper.cpp, download model, transcribe, and convert to captions

Source: https://www.remotion.dev/docs/install-whisper-cpp

This example installs Whisper.cpp version 1.5.5 and the medium.en model to the whisper.cpp folder, transcribes an audio file with token-level timestamps, and optionally converts the output to captions. It includes commented instructions for converting audio to a 16KHz wav file using ffmpeg.

```tsx
import path from 'path';
import {downloadWhisperModel, installWhisperCpp, transcribe, toCaptions} from '@remotion/install-whisper-cpp';
import fs from 'fs';

const to = path.join(process.cwd(), 'whisper.cpp');

await installWhisperCpp({
  to,
  version: '1.5.5',
});

await downloadWhisperModel({
  model: 'medium.en',
  folder: to,
});

// Convert the audio to a 16KHz wav file first if needed:
// import {execSync} from 'child_process';
// execSync('ffmpeg -i /path/to/audio.mp4 -ar 16000 /path/to/audio.wav -y');

const whisperCppOutput = await transcribe({
  model: 'medium.en',
  whisperPath: to,
  whisperCppVersion: '1.5.5',
  inputPath: '/path/to/audio.wav',
  tokenLevelTimestamps: true,
});

// Optional: Apply our recommended postprocessing
const {captions} = toCaptions({
  whisperCppOutput,
});

fs.writeFileSync('captions.json', JSON.stringify(captions, null, 2));
```
Tokens:
Raw