### Development Setup with Bun

Source: https://github.com/remotion-dev/remotion/blob/main/packages/remotion-media/README.md

Installs dependencies, navigates to the package directory, and starts the development server for the catalog UI.

```bash
bun install
cd packages/remotion-media
bun run dev
```

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

### Start Remotion example testbed with Bun

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/bun.mdx

Contributors can use this command to start the example testbed, utilizing Bun as the runtime.

```shell
bun run start-bun
```

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

### Start the Remotion Testbed

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/contributing/index.mdx

Navigate to the `packages/example` directory and start the development server for the Testbed.

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

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

### Optimal Output for Remotion Versions

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/cli/versions.mdx

This example shows the console output when all Remotion packages are installed with consistent versions, indicating a healthy setup.

```text
On version: 3.0.19
- @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.
```

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

### Start @remotion/player testbed

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/contributing/index.mdx

Navigate to the `packages/player-example` directory and start the development server for the Player testbed.

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

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

### Scaffolding a Remotion Project

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/cli/create-video.mdx

Initializes a new Remotion project in the specified directory. If no directory is provided, an interactive TUI guides the setup process.

```bash
npx create-video <directory>
```

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

### Create a New Remotion Project via CLI

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/getting-started.mdx

Initializes a new Remotion project with a blank template, TailwindCSS, and Agent Skills, then installs dependencies and starts the development server.

```sh
npx create-video@latest --yes --blank my-video
cd my-video
npm i
npx remotion skills add
npm run dev
```

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

### Install Remotion Layout Utilities

Source: https://github.com/remotion-dev/remotion/blob/main/packages/skills/skills/remotion/rules/measuring-text.md

Install the `@remotion/layout-utils` package, which provides functions for text measurement and layout.

```bash
npx remotion add @remotion/layout-utils
```

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

### Install project dependencies with Bun

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/contributing/index.mdx

Install all required project dependencies using Bun.

```sh
bun i
```

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

### Install Remotion Media Utils

Source: https://github.com/remotion-dev/remotion/blob/main/packages/skills/skills/remotion/rules/audio-visualization.md

Installs the `@remotion/media-utils` package, which provides utilities for audio visualization.

```bash
npx remotion add @remotion/media-utils
```

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

### Install @remotion/media package

Source: https://github.com/remotion-dev/remotion/blob/main/packages/skills/skills/remotion/rules/videos.md

Install the @remotion/media package using different package managers to enable video functionalities.

```bash
npx remotion add @remotion/media # If project uses npm
```

```bash
bunx remotion add @remotion/media # If project uses bun
```

```bash
yarn remotion add @remotion/media # If project uses yarn
```

```bash
pnpm exec remotion add @remotion/media # If project uses pnpm
```

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

### Install @remotion/layout-utils Package

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/layout-utils/index.mdx

Use these commands to install the `@remotion/layout-utils` package using npm, pnpm, or yarn.

```bash
npm i @remotion/layout-utils
```

```bash
pnpm i @remotion/layout-utils
```

```bash
yarn add @remotion/layout-utils
```

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

### Install Remotion Media Package

Source: https://github.com/remotion-dev/remotion/blob/main/packages/skills/skills/remotion/rules/audio.md

Install the `@remotion/media` package to enable audio functionalities in Remotion projects.

```bash
npx remotion add @remotion/media
```

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

### Install Docker Components

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/miscellaneous/cloud-gpu-docker.mdx

Installs the core Docker Engine, CLI, containerd, buildx, and compose plugins.

```bash
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
```

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

### Using parseMedia() to get tracks upfront.

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/webcodecs/track-transformation.mdx

This example shows how to use `parseMedia` to extract video and audio tracks from a media source before starting the conversion process. This allows for pre-analysis and user interaction to determine conversion settings.

```tsx
import {parseMedia} from '@remotion/media-parser';

const {tracks} = await parseMedia({
  src: 'https://remotion.media/BigBuckBunny.mp4',
  fields: {
    tracks: true,
  },
});
```

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

### Get Remotion Cloud Run Services by Region

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/cloudrun/getservices.mdx

Fetches a list of Remotion Cloud Run services compatible with the installed package version from a specified GCP region. The examples demonstrate retrieving services from 'us-east1' and 'us-west1', logging their details.

```ts
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"
}
```

```ts
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"
}
```

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

### Start Remotion Studio Dev Testbed (Bun)

Source: https://github.com/remotion-dev/remotion/blob/main/AGENTS.md

Navigate to the packages/example directory and run this command to start the Remotion Studio, the main development UI for previewing video compositions.

```bash
cd packages/example && bun run dev
```

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

### Incorrect Static Animation Start in Remotion (TSX)

Source: https://github.com/remotion-dev/remotion/blob/main/packages/template-prompt-to-motion-graphics/src/skills/social-media.md

This example shows an animation that starts after a delay, which can lead to low engagement on social media where immediate visual interest is crucial.

```tsx
const entrance = spring({ frame: frame - 30, fps }); // Starts after 1 second
```

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

### Initialize Serverless Project

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/lambda/serverless-framework-integration.mdx

Execute this command from your `serverless-app` directory to set up your project for deployment.

```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)

```

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

### Install Remotion Skills for Coding Agents

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/getting-started.mdx

Installs the Remotion Skills globally, enabling coding agents to create videos. This command is part of the setup for using AI coding agents with Remotion.

```sh
npx -y skills@latest add remotion-dev/skills -g -y
```

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

### Example public/ folder structure

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/staticfile.mdx

The `public/` folder must be in the same directory as `package.json` to correctly serve static assets.

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

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

### Test CLI: Get available compositions

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/contributing/index.mdx

Navigate to `packages/example` and use `bunx` to execute the Remotion CLI to list available compositions.

```sh
cd packages/example
# Example - Get available compositions
bunx remotion compositions
```

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

### Partial WebGL2 Crossfade Shader for HTML-in-Canvas

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/transitions/make-html-in-canvas-presentation.mdx

This snippet shows the initial setup of a WebGL2 shader for `makeHtmlInCanvasPresentation`, including vertex/fragment shader definitions, program linking, buffer setup, and texture creation. It is a truncated example.

```ts
// @noErrors
import 'remotion';
// ---cut---
import {makeHtmlInCanvasPresentation, type HtmlInCanvasShader} from '@remotion/transitions';

const VERTEX = `#version 300 es
in vec2 a_pos;
out vec2 v_uv;
void main() {
  v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);
  gl_Position = vec4(a_pos, 0.0, 1.0);
}`;

const FRAGMENT = `#version 300 es
precision highp float;
uniform sampler2D u_prev;
uniform sampler2D u_next;
uniform float u_time;
in vec2 v_uv;
out vec4 outColor;
void main() {
  outColor = mix(texture(u_next, v_uv), texture(u_prev, v_uv), u_time);
}`;

const myShader: HtmlInCanvasShader<{}> = (canvas) => {
  const gl = canvas.getContext('webgl2', {premultipliedAlpha: true})!;

  const compile = (src: string, type: number) => {
    const sh = gl.createShader(type)!;
    gl.shaderSource(sh, src);
    gl.compileShader(sh);
    return sh;
  };

  const program = gl.createProgram()!;
  gl.attachShader(program, compile(VERTEX, gl.VERTEX_SHADER));
  gl.attachShader(program, compile(FRAGMENT, gl.FRAGMENT_SHADER));
  gl.linkProgram(program);

  const buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
    gl.STATIC_DRAW,
  );
  const aPos = gl.getAttribLocation(program, 'a_pos');
  gl.enableVertexAttribArray(aPos);
  gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);

  const prevTex = gl.createTexture();
  const nextTex = gl.createTexture();

  return {
    clear: () => {
      gl.clearColor(0, 0, 0, 0);
      gl.clear(gl.COLOR_BUFFER_BIT);
    },
    cleanup: () => {
      gl.deleteProgram(program);
      gl.deleteTexture(prevTex);

```

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

### Install Whisper.cpp and Transcribe Audio

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/install-whisper-cpp/index.mdx

This example demonstrates how to install a specific version of Whisper.cpp and a model, then use them to transcribe an audio file and generate captions. It includes optional steps for converting audio to the required format and postprocessing the output.

```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));
```

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

### Start Player Testbed for @remotion/player (Bun)

Source: https://github.com/remotion-dev/remotion/blob/main/AGENTS.md

Use this command to start the player testbed, specifically for testing changes related to the @remotion/player package.

```bash
cd packages/player-example && bun run dev
```

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

### Calling ensureFfmpeg() to Install FFmpeg

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/renderer/ensure-ffmpeg.mdx

Use this snippet to explicitly ensure the FFmpeg binary is installed. While Remotion automatically downloads FFmpeg if a render is attempted and no binary is found, this function is useful if you need FFmpeg to be ready before the first render starts.

```ts
import {ensureFfmpeg} from '@remotion/renderer';

await ensureFfmpeg();
```

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

### Start Development Server

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/ai/ai-saas-template.mdx

Run this command to start the local development server and access the application at `http://localhost:3000`.

```bash
npm run dev
```

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

### Usage example for getting video duration

Source: https://github.com/remotion-dev/remotion/blob/main/packages/skills/skills/remotion/rules/get-video-duration.md

Demonstrates how to call the `getVideoDuration` function with a remote video URL and log the returned duration.

```tsx
const duration = await getVideoDuration("https://remotion.media/video.mp4");
console.log(duration); // e.g. 10.5 (seconds)
```

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

### Start Remotion Studio

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/editor-starter/vs-studio.mdx

Use this command to launch the Remotion Studio, a preview tool for Remotion compositions.

```bash
npx remotion studio
```

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

### Basic Usage of `cutPath` to Truncate an SVG Path

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/paths/cut-path.mdx

Use `cutPath` to get a segment of an SVG path from its start up to a specified length.

```tsx
import { cutPath } from "@remotion/paths";

const path = "M 0 0 L 100 0 L 100 100";
const cutAtLength = cutPath(path, 50);
console.log(cutAtLength); // "M 0 0 L 50 0"
```

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

### Start Remotion Studio with Optional Entry Point (Bash)

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/cli/studio.mdx

Initiates the Remotion Studio, optionally specifying an entry point for your project. If no entry point is provided, it will be automatically determined.

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

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

### Initialize a new Remotion project

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/blog/2021-02-08-introducing-remotion.mdx

Use this command to quickly set up a new Remotion video project with a basic template.

```bash
yarn create video
```

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

### ❌ File should not have ./ prefix

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/static-file-relative-paths.mdx

This example shows an incorrect usage where a relative path starts with `./`. The `staticFile()` function expects only the filename.

```tsx
import { staticFile } from "remotion";
staticFile("./image.png");
```

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

### Example Output for Site Creation

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/lambda/cli/sites/create.mdx

Illustrates the console output after successfully bundling, creating a bucket, and uploading a Remotion site to S3, including the generated Serve URL and Site Name.

```text
    (1/3) [====================] Bundled video 3975ms
    <br />
    (2/3) [====================] Created bucket 457ms
    <br />
    (3/3) [====================] Uploaded to S3 25118ms
    <br />
    <br />
    Deployed to S3!
    <br />
    Serve URL: https://remotionlambda-12345.s3.eu-central-1.amazonaws.com/sites/abcdef/index.html
    <br />
    Site Name: abcdef
    <br />
```

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

### Run Docusaurus documentation server

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/contributing/index.mdx

Navigate to the `packages/docs` directory and start the Docusaurus server to view the documentation locally.

```sh
cd packages/docs
bun run start
```

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

### Clipping a video with `from` and `durationInFrames` in Remotion

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/media/video.mdx

This example demonstrates how to control the start and end of a video clip relative to its parent timeline using the `from` and `durationInFrames` props.

```tsx
import {AbsoluteFill, staticFile} from 'remotion';
import {Video} from '@remotion/media';

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video from={30} durationInFrames={90} src={staticFile('video.webm')} />
    </AbsoluteFill>
  );
};

```

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

### Initialize a Remotion Project

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/blog/2021-05-06-remotion-2-1.mdx

Use these commands to quickly set up a new Remotion project with either npm or Yarn.

```bash
npm init video
```

```bash
yarn create video
```

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

### Spring Animation Without Delay (Incorrect)

Source: https://github.com/remotion-dev/remotion/blob/main/packages/template-prompt-to-motion-graphics/src/skills/spring-physics.md

This example shows a spring animation that starts immediately at `frame 0`, which may not be desired for sequential or delayed effects.

```tsx
const entrance = spring({ frame, fps, config: { damping: 12 } });
```

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

### Initialize a new Remotion project

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/learn/2022-12-22-apple-wow.mdx

Use these commands to start a new Remotion project with a blank template using your preferred package manager.

```bash
npm init video --blank
```

```bash
pnpm create video --blank
```

```bash
yarn create video --blank
```

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

### Start Editor Starter Development Server

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/editor-starter/vs-studio.mdx

Execute this command to start the development server for the Editor Starter boilerplate. Note: The command `npx react-router dev` is provided as-is from the source.

```bash
npx react-router dev
```

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

### Using the onInit Callback with renderStillOnLambda (TypeScript)

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/lambda/renderstillonlambda.mdx

This example demonstrates how to use the `onInit` callback to receive render details such as `renderId`, `cloudWatchLogs`, and `lambdaInsightsUrl` as soon as the render process starts.

```typescript
// @module: esnext
// @target: es2022

import {renderStillOnLambda, RenderStillOnLambdaInput} from '@remotion/lambda/client';

const otherParameters: RenderStillOnLambdaInput = {
  region: 'us-east-1',
  functionName: 'remotion-render-bds9aab',
  serveUrl: 'https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw',
  composition: 'MyVideo',
  inputProps: {},
  imageFormat: 'png',
  maxRetries: 1,
  privacy: 'public',
  envVariables: {},
  frame: 10,
};
await renderStillOnLambda({
  ...otherParameters,
  onInit: ({cloudWatchLogs, renderId, lambdaInsightsUrl}) => {
    console.log(console.log(`Render invoked with ID = ${renderId}`));
    console.log(`CloudWatch logs (if enabled): ${cloudWatchLogs}`);
    console.log(`Lambda Insights (if enabled): ${lambdaInsightsUrl}`);
  },
});
```

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

### Start a coding agent in the project directory

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/ai/coding-agents.mdx

Navigate to your project folder and then launch your chosen coding agent (e.g., Claude, Codex, or OpenCode) to begin prompting.

```bash
cd my-video
claude # or: codex / opencode
```

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

### Get Current Frame with useCurrentFrame in Remotion

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/use-current-frame.mdx

Use `useCurrentFrame()` to retrieve the current frame. When a component is wrapped in a `<Sequence>`, the hook returns the frame relative to the sequence's start.

```tsx
import {Sequence, 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 />
      <Sequence from={10}>
        <Subtitle />
      </Sequence>
    </div>
  );
};
```

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

### Start Remotion Still Image Server

Source: https://github.com/remotion-dev/remotion/blob/main/packages/template-still/README.md

Initiate the server to serve dynamic images based on URL parameters. After running, visit http://localhost:8000/PreviewCard.png?title=Hello+World in your browser.

```console
npm run server
```

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

### Get Audio Duration in Seconds Example (TypeScript/React)

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/get-audio-duration-in-seconds.mdx

Demonstrates how to use `getAudioDurationInSeconds` with different audio sources: a static file, an imported module, and a remote URL. This function is deprecated.

```tsx
import {useCallback, useEffect} from 'react';
import {staticFile} from 'remotion';
// ---cut---
import {getAudioDurationInSeconds} from '@remotion/media-utils';
import music from './music.mp3';

const MyComp: React.FC = () => {
  const getDuration = useCallback(async () => {
    const publicFile = await getAudioDurationInSeconds(staticFile('voiceover.wav')); // 33.221
    const imported = await getAudioDurationInSeconds(music); // 127.452
    const remote = await getAudioDurationInSeconds('https://example.com/remote-audio.aac'); // 50.24
  }, []);

  useEffect(() => {
    getDuration();
  }, []);

  return null;
};
```

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

### Apply cube() presentation with TransitionSeries in TypeScript

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/transitions/presentations/cube.mdx

This example demonstrates how to apply the `cube()` presentation to transition between two scenes using `TransitionSeries`. It shows a basic setup with `Letter` components and `linearTiming`.

```tsx
import { AbsoluteFill } from "remotion";

const Letter: React.FC<{
  children: React.ReactNode;
  color: string;
}> = ({ children, color }) => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: color,
        opacity: 0.9,
        justifyContent: "center",
        alignItems: "center",
        fontSize: 200,
        color: "white",
      }}
    >
      {children}
    </AbsoluteFill>
  );
};
// ---cut---
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { cube } from "@remotion-dev/cube-presentation";

const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={cube({ direction: "from-left" })}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

```

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

### Start Remotion Studio for development

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/brownfield-installation.mdx

Use this command to launch the Remotion Studio, which provides a development environment to preview and debug your compositions.

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

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

### Initialize a Blank Remotion Project

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/dataset-render.mdx

Use one of these package manager commands to create a new, blank Remotion project, which serves as the foundation for generating videos from a dataset.

```bash
npm init video --blank
```

```bash
pnpm create video --blank
```

```bash
bun create video --blank
```

```bash
yarn create video --blank
```

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

### TransitionSeries with Two Sequences (TypeScript/Remotion)

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/transitions/transitionseries.mdx

This example shows a <TransitionSeries> with two sequences and one transition. The transition's duration is subtracted from the sum of sequence durations to get the total length.

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

const Letter: React.FC<{
  children: React.ReactNode;
  color: string;
}> = ({children, color}) => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: color,
        opacity: 0.9,
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 200,
        color: 'white',
      }}
    >
      {children}
    </AbsoluteFill>
  );
};
// ---cut---
import {linearTiming, TransitionSeries} from '@remotion/transitions';
import {slide} from '@remotion/transitions/slide';

const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition presentation={slide()} timing={linearTiming({durationInFrames: 30})} />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};
```

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

### Initialize Remix Template with npm

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/blog/2022-11-17-remotion-3-3.mdx

Run this command to create a new Remotion project using the Remix template with npm.

```bash
npx create-video --remix
```

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

### Applying linearProgressiveBlur to a Video component in React

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/effects/linear-progressive-blur.mdx

This example demonstrates how to apply a linear progressive blur effect to a `<Video>` component, defining the start and end points of the blur gradient and their respective blur radii.

```tsx
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {linearProgressiveBlur} from '@remotion/effects/linear-progressive-blur';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          linearProgressiveBlur({
            start: [0, 0.5],
            end: [1, 0.5],
            startBlur: 0,
            endBlur: 50,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};
```

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

### Open Remotion Studio

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/player/player-integration.mdx

Launches the Remotion Studio to preview compositions, specifying the path to the root index file.

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

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

### Define a Custom WebGL2 Effect with createEffect

Source: https://github.com/remotion-dev/remotion/blob/main/packages/skills/skills/remotion/rules/effects.md

Use `createEffect` to define a custom WebGL2 effect in Remotion, specifying its parameters, setup, rendering logic, and cleanup. This example implements an RGB shift effect.

```ts
import {createEffect, type InteractivitySchema} from 'remotion';

type RgbShiftParams = {
  readonly amount?: number;
};

type RgbShiftState = {
  readonly gl: WebGL2RenderingContext;
  readonly program: WebGLProgram;
  readonly vao: WebGLVertexArrayObject;
  readonly vbo: WebGLBuffer;
  readonly texture: WebGLTexture;
  readonly uSource: WebGLUniformLocation | null;
  readonly uOffset: WebGLUniformLocation | null;
};

const rgbShiftSchema = {
  amount: {
    type: 'number',
    min: 0,
    max: 80,
    step: 1,
    default: 12,
    description: 'Amount',
  },
} as const satisfies InteractivitySchema;

export const rgbShift = createEffect<RgbShiftParams, RgbShiftState>({
  type: 'com.example.rgbShift',
  label: 'rgbShift()',
  documentationLink: null,
  backend: 'webgl2',
  calculateKey: ({amount = 12}) => `rgb-shift-${amount}`,
  setup: (target) => {
    const gl = target.getContext('webgl2', {
      premultipliedAlpha: true,
      alpha: true,
      preserveDrawingBuffer: true,
    });
    if (!gl) {
      throw new Error('Could not get a WebGL2 context for rgbShift().');
    }

    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

    // Compile/link shaders, create a fullscreen quad VAO/VBO, create a
    // CLAMP_TO_EDGE RGBA texture, and get uSource/uOffset uniform locations.
    return createRgbShiftState(gl);
  },
  apply: ({source, width, height, params, state, flipSourceY}) => {
    const amount = params.amount ?? 12;
    const {gl} = state;

    gl.viewport(0, 0, width, height);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, state.texture);
    gl.texImage2D(
      gl.TEXTURE_2D,
      0,
      gl.RGBA,
      gl.RGBA,
      gl.UNSIGNED_BYTE,
      source as TexImageSource,
    );

    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    gl.useProgram(state.program);
    if (state.uSource) gl.uniform1i(state.uSource, 0);
    if (state.uOffset) gl.uniform2f(state.uOffset, amount / width, 0);
    gl.bindVertexArray(state.vao);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  },
  cleanup: ({gl, program, vao, vbo, texture}) => {
    gl.deleteTexture(texture);
    gl.deleteBuffer(vbo);
    gl.deleteProgram(program);
    gl.deleteVertexArray(vao);
  },
  schema: rgbShiftSchema,
  validateParams: ({amount = 12}) => {
    if (typeof amount !== 'number' || !Number.isFinite(amount) || amount < 0 || amount > 80) {
      throw new TypeError('amount must be a number between 0 and 80');
    }
  },
});
```

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

### Initialize a new Remotion project

Source: https://github.com/remotion-dev/remotion/blob/main/README.md

Use this command to quickly set up a new Remotion project if Node.JS is already installed on your system.

```console
npx create-video@latest
```

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

### Get Lambda function information using TypeScript

Source: https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/lambda/getfunctioninfo.mdx

This example demonstrates how to use `getFunctionInfo` to retrieve details about a specific Remotion Lambda function by its name and region. The output shows various properties of the function.

```ts
import {getFunctionInfo} from '@remotion/lambda';

const info = await getFunctionInfo({
  functionName: 'remotion-render-d7nd2a9f',
  region: 'eu-central-1',
});
console.log(info.functionName); // remotion-render-d7nd2a9f
console.log(info.memorySizeInMb); // 1500
console.log(info.diskSizeInMb); // 2048
console.log(info.version); // '2021-07-14'
console.log(info.timeoutInSeconds); // 120
```