### Create a New Revideo Project

Source: https://github.com/midrender/docs/blob/main/src/content/guide/installation-and-setup.mdx

Run this command in your terminal to initialize a new revideo project. It will guide you through the setup process.

```bash
npm init @revideo@latest
```

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

### Navigate and Install Dependencies

Source: https://github.com/midrender/docs/blob/main/src/content/guide/installation-and-setup.mdx

After creating the project, navigate to the project directory and install all necessary dependencies using npm.

```bash
cd <project-path>
npm install
```

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

### Install Revideo Player React

Source: https://github.com/midrender/docs/blob/main/src/content/api-reference/player-react/player.mdx

Install the @revideo/player-react package using npm.

```bash
npm install @revideo/player-react
```

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

### Install Dependencies and Run Conversion

Source: https://github.com/midrender/docs/blob/main/scripts/README.md

Install project dependencies and then run the conversion script. This is typically done once for dependencies and then for the conversion process.

```bash
npm install  # Install dependencies (only needed once)
npm run convert
```

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

### Install Dependencies and Run Tests

Source: https://github.com/midrender/docs/blob/main/scripts/__tests__/README.md

Execute these commands from the `scripts` directory to install dependencies and run the conversion script tests.

```bash
npm install  # Install dependencies (only needed once)
npm test     # Run the tests
```

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

### Start the Revideo Editor

Source: https://github.com/midrender/docs/blob/main/src/content/guide/installation-and-setup.mdx

Run this command to start the revideo editor and preview your video in the browser. The editor will be accessible at http://localhost:9000/.

```bash
npm start
```

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

### Docusaurus Header Example

Source: https://github.com/midrender/docs/blob/main/scripts/README.md

Example of a Docusaurus header configuration, including sidebar position and slug.

```mdx
---
sidebar_position: 2
slug: /ffmpeg/concatenateMedia
---
```

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

### Install JavaScript Grammar

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/code-animations.mdx

Install the `@lezer/javascript` package to enable syntax highlighting for JavaScript code.

```bash
npm i @lezer/javascript
```

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

### Serve Revideo Project with CLI

Source: https://github.com/midrender/docs/blob/main/src/content/api-reference/player-react/player.mdx

Start a local server to build and serve your Revideo project assets using the npx revideo serve command.

```bash
npx revideo serve
```

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

### React Component Example

Source: https://github.com/midrender/docs/blob/main/scripts/__tests__/fixtures/code-blocks.mdx

A React component example in JSX format. Attributes like 'mode' are ignored.

```jsx
function Component() {
  return <div>Hello World</div>;
}
```

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

### Basic Video Rendering with Static Text

Source: https://github.com/midrender/docs/blob/main/src/content/guide/parameterized-video.mdx

A simple example demonstrating how to render a video with static text content using @revideo/2d.

```tsx
import {Txt, makeScene2D} from '@revideo/2d';
import {useScene, createRef} from '@revideo/core';

export default makeScene2D(function* (view) {
  const textRef = createRef<Txt>();

  const name = 'new user';

  view.add(
    <Txt fontSize={1} textWrap={true} ref={textRef} fill={'blue'}>
      Hello {name}!
    </Txt>,
  );

  yield* textRef().scale(30, 2);
});
```

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

### Serve Revideo Project Locally

Source: https://github.com/midrender/docs/blob/main/src/content/guide/building-webapps/rendering-endpoint.mdx

Use the Revideo CLI to deploy your project and start a local web server. The port parameter is optional; defaults to 4000.

```bash
npx revideo serve --projectFile ./src/project.ts --port 3000
```

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

### Simple Scene Hierarchy Example

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/hierarchy.mdx

Demonstrates a basic scene hierarchy using JSX syntax with Circle, Layout, Rect, and Txt nodes.

```tsx
view.add(
  <>
    <Circle />
    <Layout>
      <Rect />
      <Txt>Hi</Txt>
    </Layout>
  </>,
);

```

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

### Example Project Structure

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/transitions.mdx

This is a typical project structure for a Motion Canvas project, showing the location of scene files and the main project configuration.

```tree
my-animation/
└─ src/
   ├─ scenes/
   │  ├─ firstScene.tsx
   │  └─ secondScene.tsx
   └─ project.ts
```

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

### Setup and Animation of a 3D Scene with Three.js

Source: https://github.com/midrender/docs/blob/main/src/content/guide/designing-animations/3d-animations-with-threejs.mdx

This snippet demonstrates setting up a basic 3D scene using Three.js, including a rotating cube, and integrating it into a Revideo animation. It requires importing necessary modules from '@revideo/2d', '@revideo/core', and 'three'.

```tsx
import {Three} from '../components/Three';
import {makeScene2D, Txt} from '@revideo/2d';
import {
  tween,
  waitFor,
  delay,
  createRef,
  all,
  chain,
  linear,
} from '@revideo/core';
import * as THREE from 'three';

function setup3DScene() {
  const threeScene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh(geometry, material);
  threeScene.add(mesh);

  const camera = new THREE.PerspectiveCamera(90);

  mesh.position.set(0, 0, 0);
  mesh.scale.set(1, 1, 1);
  camera.rotation.set(0, 0, 0);
  camera.position.set(0, 0, 0.5);

  return {threeScene, camera, mesh};
}

export default makeScene2D(function* (view) {
  const {threeScene, camera, mesh} = setup3DScene();

  const threeRef = createRef<Three>();
  const txtRef = createRef<Txt>();

  yield view.add(
    <>
      <Three
        width={1920}
        height={1080}
        camera={camera}
        scene={threeScene}
        opacity={0}
        fontWeight={900}
        ref={threeRef}
      />
    </>,
  );

  yield view.add(
    <Txt fill={'black'} fontFamily={'Lexend'} ref={txtRef} fontSize={80} />,
  );

  yield* chain(
    txtRef().text('Revideo x 3D with Three.js', 1),
    all(txtRef().position.y(-300, 1), delay(0.5, threeRef().opacity(1, 0.5))),
  );

  yield tween(4, value => {
    mesh.rotation.set(0, linear(value, 0, 2 * 3.14), 0);
  });

  yield* waitFor(2);

  yield addRotatingCube(threeRef().scene(), 0.1, 0.3, -0.2, 0.1);
  yield addRotatingCube(threeRef().scene(), 0.1, -0.3, -0.2, 0.1);

  yield* waitFor(2);
});

function* addRotatingCube(
  threeScene: THREE.Scene,
  size: number,
  x: number,
  y: number,
  z: number,
) {
  const geometry = new THREE.BoxGeometry(size, size, size);
  const material = new THREE.MeshNormalMaterial();
  const mesh = new THREE.Mesh(geometry, material);

  mesh.position.set(x, y, z);
  mesh.scale.set(1, 1, 1);

  threeScene.add(mesh);

  yield* tween(4, value => {
    mesh.rotation.set(0, linear(value, 0, 2 * 3.14), 0);
  });
}

```

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

### Accessing Local Video in Scene

Source: https://github.com/midrender/docs/blob/main/src/content/guide/project-structure.mdx

Place local video files in the `/public` directory to access them within your scene. This example demonstrates adding a video from `/public/my-video.mp4` to the scene and playing it.

```tsx
import {Video, makeScene2D} from '@revideo/2d';
import {waitFor} from '@revideo/core';

export default makeScene2D(function* (view) {
  yield view.add(
    <Video src={'/my-video.mp4'} size={['100%', '100%']} play={true} />,
  );

  yield* waitFor(10);
});
```

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

### Basic Subtitle Implementation

Source: https://github.com/midrender/docs/blob/main/src/content/guide/performance/node-parent-reloading.mdx

This example demonstrates a straightforward approach to adding subtitles to a video using Revideo. It adds new text elements directly to the main view for each word, which can be inefficient for frequent updates.

```tsx
import {Txt, Video, makeScene2D} from '@revideo/2d';
import {useScene, waitFor, createRef} from '@revideo/core';

export default makeScene2D(function* (view) {
  const words = [
    'Here',
    'are',
    'some',
    'subtitles',
    'added',
    'to',
    'the',
    'video',
  ];

  yield view.add(
    <>
      <Video
        src={'https://revideo-example-assets.s3.amazonaws.com/beach-3.mp4'}
        play={true}
        size={['100%', '100%']}
      />
    </>,
  );

  for (const w of words) {
    const textRef = createRef<Txt>();
    yield view.add(
      <Txt
        fontFamily={'Sans-Serif'}
        fill={'white'}
        fontSize={40}
        ref={textRef}
        text={w}
      />,
    );
    yield* waitFor(0.3);
    textRef().remove();
  }

  yield* waitFor(1);
});
```

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

### Nextra _meta.js Sidebar Configuration

Source: https://github.com/midrender/docs/blob/main/scripts/README.md

Example of a Nextra _meta.js file used for configuring sidebar order and descriptions. Keys represent file paths, and values are custom sidebar item descriptions.

```js
export default {
	mdx: "",
	ssg: "",
	i18n: "",
	image: "",
	themes: "",
	latex: "",
};
```

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

### Example of Stripping React Components and Imports

Source: https://github.com/midrender/docs/blob/main/scripts/README.md

Illustrates how React imports and components are handled during the conversion process. Imports are removed, and JSX tags are stripped out.

```mdx
import AnimationPlayer from "@site/src/components/AnimationPlayer";
import ApiSnippet from "@site/src/components/Api/ApiSnippet";

# Example Page

This is an example paragraph.

<AnimationPlayer name="layout" banner />

This is example paragraph number 2.

```tsx
<Rect layout>
	<Circle width={320} height={320} />
</Rect>
```
```

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

### Implementing a Custom Slide Transition

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/transitions.mdx

An example of a custom slide transition implementation using `useTransition`. It animates the position of the previous and current scenes to create a sliding effect.

```ts
export function* slideTransition(
  direction: Direction = Direction.Top,
  duration = 0.6,
): ThreadGenerator {
  const size = useScene().getSize();
  const position = size.getOriginOffset(direction).scale(2);
  const previousPosition = Vector2.createSignal();
  const currentPosition = Vector2.createSignal(position);

  // set up the transition
  const endTransition = useTransition(
    // modify the context of the current scene
    ctx => ctx.translate(currentPosition.x(), currentPosition.y()),
    // modify the context of the previous scene
    ctx => ctx.translate(previousPosition.x(), previousPosition.y()),
  );

  // perform animations
  yield* all(
    previousPosition(position.scale(-1), duration),
    currentPosition(Vector2.zero, duration),
  );

  // finish the transition
  endTransition();
}
```

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

### Vite Configuration in Revideo 0.2.x

Source: https://github.com/midrender/docs/blob/main/src/content/upgrading/from_0.2.x_to_0.3.mdx

This is an example of a `vite.config.ts` file for Revideo versions 0.2.x, which includes the separate ffmpeg plugin.

```typescript
import {defineConfig} from 'vite';
import motionCanvas from '@revideo/vite-plugin';
import ffmpeg from '@revideo/ffmpeg';

export default defineConfig({
  plugins: [motionCanvas(), ffmpeg()],
});
```

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

### Get Logger Instance

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/logging.mdx

Import and use the `useLogger` function to obtain a logger instance within your scene.

```tsx
import {makeScene2D} from '@revideo/2d';
import {useLogger} from '@revideo/core';

export default makeScene2D(function* (view) {
  const logger = useLogger();
  // ...
});
```

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

### Querying Nodes by Type with findAll

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/hierarchy.mdx

Example of using `view.findAll` with the `is` utility to find all `Txt` nodes within the scene hierarchy.

```tsx
import {makeScene2D, Layout, Txt, Circle, Rect, is} from '@revideo/2d';
import {all} from '@revideo/core';

export default makeScene2D(function* (view) {
  view.add(
    <Layout layout gap={20} alignItems={'center'}>
      <Txt fill={'white'}>Example</Txt>
      <Rect fill={'#f3303f'} padding={20} gap={20}>
        <Txt fill={'white'}>42</Txt>
        <Circle size={60} fill={'#FFC66D'} />
        <Txt fill={'white'}>!!!</Txt>
      </Rect>
    </Layout>,
  );

  const texts = view.findAll(is(Txt));

  yield* all(...texts.map(text => text.fill('#FFC66D', 1).back(1)));
});

```

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

### Add Video and Audio Elements

Source: https://github.com/midrender/docs/blob/main/src/content/guide/installation-and-setup.mdx

Use this snippet to add video and audio components to your view. Ensure the 'src' points to a valid URL or local file path. 'play={true}' starts playback immediately.

```tsx
yield view.add(
  <>
    <Video
      src={'https://revideo-example-assets.s3.amazonaws.com/stars.mp4'}
      play={true}
      size={['100%', '100%']}
    />
    <Audio
      src={'https://revideo-example-assets.s3.amazonaws.com/chill-beat.mp3'}
      play={true}
      time={17.0}
    />
  </>,
);
```

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

### Troubleshooting npm Install ENOENT Error

Source: https://github.com/midrender/docs/blob/main/src/content/guide/installation-and-setup.mdx

If `npm install` fails with an ENOENT error, verify that you are in the correct project directory. This error often indicates that npm cannot find the `package.json` file.

```bash
cd [path]
npm install
npm start
```

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

### Basic Generator Function Example

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/flow.mdx

Demonstrates the fundamental behavior of a JavaScript generator function, yielding multiple values sequentially.

```typescript
function* example() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = example();

console.log(generator.next().value); // 1;
console.log(generator.next().value); // 2;
console.log(generator.next().value); // 3;
```

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

### Install nscd for SIGSEGV on Linux

Source: https://github.com/midrender/docs/blob/main/src/content/common-issues/ffmpeg.mdx

If you encounter a segmentation fault with FFmpeg on Linux when using remote URLs, install nscd to resolve the issue. This is a common workaround for FFmpeg versions shipped with Revideo.

```bash
sudo apt-get install nscd
```

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

### Inserting, Replacing, and Removing Code

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/code-animations.mdx

Demonstrates granular control over code modifications using `insert`, `replace`, and `remove` methods, with examples of animating multiple changes simultaneously.

```tsx
export default makeScene2D(function* (view) {
  const code = createRef<Code>();

  view.add(
    <Code
      ref={code}
      code={`
function greet() {
  console.log('Hello!');
}
`}
    />,
  );

  // insert code at line 2, column 0
  yield* code().code.insert([2, 0], '  return 7;
', 0.6);

  // replace the word "Hello!" with "Goodbye!"
  yield* code().code.replace(word(1, 15, 6), 'Goodbye!', 0.6);

  // remove line 2
  yield* code().code.remove(lines(2), 0.6);

  // animate multiple changes at the same time
  yield* all(
    code().code.replace(word(0, 9, 7), 'greet', 0.6),
    code().code.replace(word(1, 15, 8), 'Hello!', 0.6),
  );

  yield* waitFor(0.6);
});
```

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

### Scene Hierarchy Visualization

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/hierarchy.mdx

Mermaid diagram illustrating the structure of the scene hierarchy shown in the JSX example.

```mermaid
graph TD;
  view[Scene View]
  circle([Circle])
  layout([Layout])
  rect([Rect])
  text([text 'Hi'])
    view-->circle;
    view-->layout;
    layout-->rect;
    layout-->text;

```

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

### Profile Code Sections

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/logging.mdx

Use `logger.profile` to start and end profiling for specific code sections, identified by an ID.

```ts
logger.profile('id'); // <-- starts the profiling
// some expensive calculation
logger.profile('id'); // <-- ends the profiling
```

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

### Create Custom Code Component with Defaults

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/code-animations.mdx

Uses the `withDefaults` helper to create a new `RustCode` component that automatically uses the specified `LezerHighlighter`. This simplifies the setup for frequently used languages.

```ts
import {Code, LezerHighlighter, withDefaults} from '@revideo/2d';
import {parser} from '@lezer/rust';

const RustHighlighter = new LezerHighlighter(parser);

export const RustCode = withDefaults(Code, {
  highlighter: RustHighlighter,
});

```

```tsx
// ...

view.add(
  <RustCode language="rust" />,
);

```

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

### Revideo Scene Yield Examples

Source: https://github.com/midrender/docs/blob/main/src/content/guide/understanding-scene-flow.mdx

Demonstrates yielding a promise, which is awaited without rendering a frame, and yielding multiple empty values to represent frames over time.

```tsx
yield view.add(); // yielded promise, we await it and dont render a frame.

// we yield 30 empty values, corresponding to 30 frames (or 1 second of video in case of 30fps). This is the same as calling yield* waitFor(1);
for (let i = 0; i < 30; i++) {
  yield;
}
```

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

### Accessing Spawned Children with Object Pooling

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/spawners.mdx

Demonstrates how to access spawned children when using an object pool, emphasizing the use of helper methods to get updated references.

```tsx
// ... continuing from above ...
let spawnedCircles = layout().childrenAs<Circle>();
yield * all(...spawnedCircles.map(circle => circle.scale(1.5, 1).to(1, 1)));
```

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

### Scene Structure with Nested Nodes

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/references.mdx

Demonstrates a scene structure with nested nodes, showing how to add multiple elements to the scene. This example highlights a potential complexity in managing many references.

```tsx
const rectA = <Rect />;
const rectB = <Rect />;
const circle = <Circle>{rectA}</Circle>;
view.add(
  <Layout>
    {circle}
    {rectB}
  </Layout>,
);
```

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

### Optimized Subtitle Implementation with Layout Container

Source: https://github.com/midrender/docs/blob/main/src/content/guide/performance/node-parent-reloading.mdx

This optimized example improves performance by adding subtitles to a dedicated `Layout` container instead of the main view. This prevents the entire view from reloading on each subtitle update, making it significantly faster for dynamic content.

```tsx
import {Txt, Video, Layout, makeScene2D} from '@revideo/2d';
import {useScene, waitFor, createRef} from '@revideo/core';

export default makeScene2D(function* (view) {
  const textContainer = createRef<Layout>();
  const words = [
    'Here',
    'are',
    'some',
    'subtitles',
    'added',
    'to',
    'the',
    'video',
  ];

  yield view.add(
    <>
      <Video
        src={'https://revideo-example-assets.s3.amazonaws.com/beach-3.mp4'}
        play={true}
        size={['100%', '100%']}
      />
      <Layout size={['100%', '100%']} ref={textContainer} />
    </>,
  );

  for (const w of words) {
    const textRef = createRef<Txt>();
    yield textContainer().add(
      <Txt
        fontFamily={'Sans-Serif'}
        fill={'white'}
        fontSize={40}
        ref={textRef}
        text={w}
      />,
    );
    yield* waitFor(0.3);
    textRef().remove();
  }

  yield* waitFor(1);
});
```

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

### Create Common Code Ranges with Helper Functions

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/code-animations.mdx

Provides examples of using the `word` and `lines` helper functions to create common types of `CodeRange` objects. These functions simplify the process of defining spans of text or entire lines.

```ts
// a range starting at line 1, column 3,
// spanning 3 characters:
word(1, 3, 3);

```

```ts
// a range starting at line 1, column 3,
// spanning until the end of the line:
word(1, 3);

```

```ts
// a range containing lines from 1 to 3 (inclusive):
lines(1, 3);

```

```ts
// a range containing line 2
lines(2);

```

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

### Configure Custom FFmpeg Path in renderVideo

Source: https://github.com/midrender/docs/blob/main/src/content/common-issues/ffmpeg.mdx

To use a custom FFmpeg binary, you can specify its path within the renderVideo function options. This allows Revideo to use your preferred FFmpeg installation instead of the bundled version.

```tsx
import {renderVideo} from '@revideo/renderer';

// ...

await renderVideo('./src/project.ts', undefined, undefined, {
  ffmpeg: {
    // Points to the global ffmpeg installation,
    ffmpegPath: 'ffmpeg',
  },
});
```

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

### Customized Vite Configuration

Source: https://github.com/midrender/docs/blob/main/src/content/guide/project-structure.mdx

An example of a customized Vite configuration, allowing modification of the Motion Canvas plugin settings (like output folder and project file) and Vite server settings (like port).

```ts
import {defineConfig} from 'vite';
import motionCanvas from '@revideo/vite-plugin';

export default defineConfig({
  plugins: [
    motionCanvas({
      output: './other-output-folder',
      project: './src/project2.ts',
    }),
  ],
  server: {
    port: 5000,
  },
});
```

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

### Example Function in TypeScript

Source: https://github.com/midrender/docs/blob/main/scripts/__tests__/fixtures/code-blocks.mdx

A simple TypeScript function example. Attributes like 'mode' and 'title' are ignored.

```tsx
function example() {
  return "This is an example";
}
```

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

### Trigger Render Job with Settings and Variables

Source: https://github.com/midrender/docs/blob/main/src/content/guide/building-webapps/rendering-endpoint.mdx

Initiate a render process by sending a POST request to the `/render` endpoint with variables and settings. The response includes a download URL upon completion.

```bash
curl -X POST http://your-revideo-service.com/render \
  -H "Content-Type: application/json" \
  -d '{
    "variables": {
      "image": "some-image.png",
      "color": "red"
    },
    "settings": { "workers": 2 }
  }'
```

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

### Alternative npm Initialization Command

Source: https://github.com/midrender/docs/blob/main/src/content/guide/installation-and-setup.mdx

Use this command if `npm init @revideo@latest` fails due to an npm bug. Ensure your npm version is updated or use this alternative.

```bash
npm exec @revideo/create@latest
```

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

### Using a Pre-made Slide Transition

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/transitions.mdx

Demonstrates how to use a pre-made slide transition at the beginning of a new scene. Ensure nodes are added to the view before yielding the transition.

```tsx
export default makeScene2D(function* (view) {
  // set up the scene:
  view.add(/* your nodes here */);

  // perform a slide transition to the left:
  yield* slideTransition(Direction.Left);

  // proceed with the animation
  yield* waitFor(3);
});
```

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

### Generate Random Numbers with useRandom()

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/random.mdx

Import and use the useRandom() hook to get a random number generator for the current scene. Use methods like nextInt() to get random integers within a specified range.

```typescript
import {useRandom} from '@revideo/core';

const random = useRandom();
const integer = random.nextInt(0, 10);
```

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

### Render Video from Command Line

Source: https://github.com/midrender/docs/blob/main/src/content/guide/installation-and-setup.mdx

Use this command to render your video project from the command line. This executes the rendering script defined in your project.

```bash
npm run render
```

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

### Basic Video Rendering with Progress Logging

Source: https://github.com/midrender/docs/blob/main/src/content/api-reference/renderer/renderVideo.mdx

Demonstrates how to use the renderVideo function to render a video with specified variables and settings, including logging progress to the console. Ensure the project file and output path are correctly configured.

```tsx
function logProgressToConsole(id: number, progress: number) {
  console.log(`[${id}] Progress: ${(progress * 100).toFixed(1)}%`);
}

renderVideo({
  projectFile: './src/project.ts',
  variables: {color: 'white'},
  settings: {
    outFile: 'video.mp4',
    workers: 1,
    range: [1, 3],
    dimensions: [1080, 1792],
    logProgress: true,
    ffmpeg: {
      ffmpegLogLevel: 'error',
      ffmpegPath: 'ffmpeg',
    },
    puppeteer: {
      args: ['--no-sandbox'],
    },
    progressCallback: logProgressToConsole
  }
});
```

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

### Tweening Animation Example

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/flow.mdx

Illustrates using a tween generator to animate a property (fill color) over a specified duration.

```typescript
yield * myCircle().fill('#e6a700', 1);
```

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

### Project Configuration with makeProject

Source: https://github.com/midrender/docs/blob/main/src/content/guide/project-structure.mdx

Configures the overall project by defining an array of scenes and accepting video variables. These variables are passed to the video when viewed in the visual editor.

```tsx
import {makeProject} from '@revideo/core';

import example from './scenes/example?scene';
import example2 from './scenes/example2?scene';

export default makeProject({
  scenes: [example, example2],
  variables: {
    video: 'https://revideo-example-assets.s3.amazonaws.com/beach.mp4',
  },
});
```

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

### Import Global CSS and Make Project

Source: https://github.com/midrender/docs/blob/main/src/content/guide/designing-animations/emojis.mdx

Import the global CSS file into your project's entry point (e.g., src/project.ts) to apply the font styles globally. This sets up the project with the specified scenes.

```tsx
import {makeProject} from '@revideo/core';
import example from './scenes/example?scene';
import './global.css';

export default makeProject({
  scenes: [text],
});
```

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

### Animating Multiple Properties Sequentially

Source: https://github.com/midrender/docs/blob/main/src/content/guide/installation-and-setup.mdx

Animates different properties of a node in sequence. The second animation starts after the first one finishes.

```typescript
yield * myCircle().fill('#e6a700', 1).to('#e13238', 1);
yield * myCircle().position.x(300, 1).to(-300, 1);
```

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

### Basic Spawner Usage

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/spawners.mdx

Demonstrates how to use a spawner function to create a reactive list of child nodes based on a signal's value.

```tsx
const count = createSignal(10);

view.add(
  <Layout layout>
    {() => range(count()).map(() => <Circle size={32} fill={'white'} />)}
  </Layout>,
);
```

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

### Update serve player URL from 0.3.x to 0.4.x

Source: https://github.com/midrender/docs/blob/main/src/content/upgrading/from_0.3.x_to_0.4.mdx

In Revideo 0.3.x, the player served by `npx revideo serve` was accessible at `/player/project.js`. In 0.4.x, this has been simplified to `/player` as both project files and assets are now served.

```tsx
<Player src="http://localhost:4000/player/project.js" controls={true} />
```

```tsx
<Player src="http://localhost:4000/player" controls={true} />
```

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

### Video Rendering with Dynamic Text using Project Variables

Source: https://github.com/midrender/docs/blob/main/src/content/guide/parameterized-video.mdx

Demonstrates how to use project variables to dynamically set text content in a video. The `useScene().variables.get()` method retrieves a variable, providing a default value if it's not set.

```tsx
import {Txt, makeScene2D} from '@revideo/2d';
import {useScene, createRef} from '@revideo/core';

export default makeScene2D(function* (view) {
  const textRef = createRef<Txt>();

  const name = useScene().variables.get('username', 'new user');

  view.add(
    <Txt fontSize={1} textWrap={true} ref={textRef} fill={'blue'}>
      Hello {name()}!
    </Txt>,
  );

  yield* textRef().scale(30, 2);
});
```

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

### Basic Scene with Video and Audio

Source: https://github.com/midrender/docs/blob/main/src/content/guide/installation-and-setup.mdx

This TypeScript code snippet demonstrates how to create a scene with a video and an audio track using revideo. It includes importing necessary components and using refs for image manipulation.

```tsx
import {Audio, Img, Video, makeScene2D} from '@revideo/2d';
import {all, chain, createRef, waitFor} from '@revideo/core';

export default makeScene2D(function* (view) {
  const logoRef = createRef<Img>();

  yield view.add(
    <>
      <Video
        src={'https://revideo-example-assets.s3.amazonaws.com/stars.mp4'}
        play={true}
        size={['100%', '100%']}
      />
      <Audio
        src={'https://revideo-example-assets.s3.amazonaws.com/chill-beat.mp3'}
        play={true}
        time={17.0}
      />
    </>,
  );

  yield* waitFor(1);

  view.add(
    <Img
      width={'1%'}
      ref={logoRef}
      src={
        'https://revideo-example-assets.s3.amazonaws.com/revideo-logo-white.png'
      }
    />,
  );

  yield* chain(
    all(logoRef().scale(40, 2), logoRef().rotation(360, 2)),
    logoRef().scale(60, 1),
  );
});
```

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

### Animating Spawner with Signals

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/spawners.mdx

Shows how to animate a signal that controls the number of spawned children, demonstrating the reactivity of spawners.

```tsx
import {makeScene2D, Layout, Circle} from '@revideo/2d';
import {createSignal, linear, range} from '@revideo/core';

export default makeScene2D(function* (view) {
  const count = createSignal(10);

  view.add(
    <Layout layout>
      {() => range(count()).map(() => <Circle size={32} fill={'white'} />)}
    </Layout>,
  );

  yield* count(3, 2, linear).wait(1).back(2);
});
```

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

### Embed Player with Manually Built Project

Source: https://github.com/midrender/docs/blob/main/src/content/guide/building-webapps/using-the-player.mdx

Embed the player in your web app by pointing the `src` prop to the publicly accessible URL of your manually built project files.

```tsx
import {Player} from '@revideo/player-react';

<Player src="https://example.com/outDir/" />;
```

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

### Basic Usage of renderPartialVideo

Source: https://github.com/midrender/docs/blob/main/src/content/api-reference/renderer/renderPartialVideo.mdx

Demonstrates how to use renderPartialVideo to render a portion of a video across multiple workers. Pass the worker ID, total number of workers, and project configuration to distribute the rendering task.

```typescript
import {renderPartialVideo} from '@revideo/renderer';

const {audioFile, videoFile} = renderPartialVideo({
  projectFile: './src/project.ts',
  variables: {color: 'white'},
  numWorkers: 10,
  workerId: 3,
  settings: {
    dimensions: [1080, 1792],
    logProgress: true,
    fmpeg: {
      ffmpegLogLevel: 'error',
      ffmpegPath: 'ffmpeg',
    },
    puppeteer: {
      args: ['--no-sandbox'],
    },
  },
});
```

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

### Nested Layout Root Example

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/layouts.mdx

Demonstrates that a node with the `layout` property inside an existing layout root is treated as a child, not a new root. The inner Rect is a layout child.

```tsx
// ↓ layout root
<Rect layout>
  {/* ↓ layout child, NOT a layout root */}
  <Rect layout>
    {/* ↓ layout child */}
    <Circle width={320} height={320} />
  </Rect>
</Rect>
```

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

### Build Revideo Project Manually

Source: https://github.com/midrender/docs/blob/main/src/content/api-reference/player-react/player.mdx

Manually build your Revideo project using the npm run build command, which outputs to an 'out' directory.

```bash
npm run build
```

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

### Configuring Multiple Project Files

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/configuration.mdx

Use an array for the 'project' option to enable project selection in the Editor. This allows switching between different project files without restarting Vite.

```typescript
motionCanvas({
  project: [
    // highlight-start
    './src/firstProject.ts',
    './src/secondProject.ts',
  ],
});
```

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

### Positioning with Cardinal Directions

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/layouts.mdx

Uses cardinal direction properties like `right` and `bottomLeft` to position nodes relative to other nodes' edges. This example positions two squares relative to a gray rectangle.

```tsx
import {
  makeScene2D,
  Rect,
} from '@revideo/2d';
import {
  createRef,
} from '@revideo/core';

export default makeScene2D(function* (view) {
  const rect = createRef<Rect>();

  view.add(
    <>
      <Rect
        ref={rect}
        width={200}
        height={100}
        rotation={-10}
        fill={'#333333'}
      />
      <Rect
        size={50}
        fill={'#e6a700'}
        rotation={rect().rotation}
        // Try changing "right" to "top"
        right={rect().left}
      />
      <Rect
        size={100}
        fill={'#e13238'}
        rotation={10}
        bottomLeft={rect().bottomRight}
      />
    </>,
  );

  yield* rect().rotation(10, 1).to(-10, 1);
});
```

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

### renderVideo()

Source: https://github.com/midrender/docs/blob/main/src/content/api-reference/renderer/renderVideo.mdx

Renders a video from a project file using specified variables and settings. It utilizes a headless browser and provides options for output, performance, and progress tracking.

```APIDOC
## renderVideo()

### Description

This function renders a video in a Node.js process using a headless browser. It allows for parameterized videos by accepting variables and provides extensive settings for customization.

### Method

`renderVideo(props: RenderVideoProps): Promise<string>`

### Parameters

#### Path Parameters

None

#### Query Parameters

None

#### Request Body

`props` (RenderVideoProps) - The properties object for rendering the video.

- **projectFile** (string) - Required - Path to the project file (e.g., './src/project.ts').
- **variables?** (Record<string, any>) - Optional - Parameters or variables passed to the video for customization.
- **settings?** (RenderSettings) - Optional - An object containing various rendering settings.
  - **outFile?** (string) - Optional - The output file name, must end with '.mp4'.
  - **outDir?** (string) - Optional - The output directory for the rendered video. Defaults to './output'.
  - **range?** ([number, number]) - Optional - The start and end seconds of the video to render.
  - **workers?** (number) - Optional - The number of processes to use for parallel rendering. Defaults to 1.
  - **dimensions?** ([number, number]) - Optional - The dimensions of the video as [x, y]. Defaults to the value in `project.meta`.
  - **logProgress?** (boolean) - Optional - If true, logs render progress to the console. Defaults to false.
  - **ffmpeg?** (FfmpegSettings) - Optional - FFmpeg options to overwrite environment variables.
    - **ffmpegLogLevel?** (`error` | `warning` | `info` | `verbose` | `debug` | `trace`) - Optional - The log level for FFmpeg. Defaults to 'error'.
    - **ffmpegPath?** (string) - Optional - The path to the FFmpeg binary.
  - **puppeteer?** (BrowserLaunchArgumentOptions) - Optional - Launch options for Puppeteer.
  - **viteBasePort?** (number) - Optional - The base port for Vite servers used by workers. Defaults to 9000.
  - **viteConfig?** (InlineConfig) - Optional - Configuration for the Vite server used for rendering.
  - **progressCallback?** ((worker: number, progress: number) => void) - Optional - A callback function to report rendering progress. It receives the worker ID and progress (0 to 1).

### Request Example

```json
{
  "projectFile": "./src/project.ts",
  "variables": {
    "color": "white"
  },
  "settings": {
    "outFile": "video.mp4",
    "workers": 1,
    "range": [1, 3],
    "dimensions": [1080, 1792],
    "logProgress": true,
    "ffmpeg": {
      "ffmpegLogLevel": "error",
      "ffmpegPath": "ffmpeg"
    },
    "puppeteer": {
      "args": ["--no-sandbox"]
    },
    "progressCallback": "(worker, progress) => console.log(`Progress: ${progress}`)"
  }
}
```

### Response

#### Success Response (200)

- **string** - The path to the rendered video file.

#### Response Example

```json
"/path/to/rendered/video.mp4"
```
```

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

### Creating an Array of Node References with `makeRef()`

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/references.mdx

Demonstrates using `makeRef()` to populate an array with references to multiple created nodes. This is effective for managing collections of similar nodes.

```tsx
const circles: Circle[] = [];
view.add(
  <Layout>
    {range(10).map(index => (
      <Circle ref={makeRef(circles, index)} />
    ))}
  </Layout>,
);
```

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

### Signal Recalculation Demonstration

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/signals.mdx

Demonstrates signal laziness, caching, and dependency tracking by logging recalculations.

```typescript
const radius = createSignal(1);
const area = createSignal(() => {
  console.log('area recalculated!');
  return Math.PI * radius() * radius();
});

area(); // area recalculated!
area();
radius(2);
area(); // area recalculated!
radius(3);
radius(4);
area(); // area recalculated!
```

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

### Configure Highlighter with Dialects

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/code-animations.mdx

Configure the `LezerHighlighter` to support JSX and TypeScript by providing a space-separated list of dialects to the `parser.configure` method.

```ts
Code.defaultHighlighter = new LezerHighlighter(
  parser.configure({
    // Provide a space-separated list of dialects to enable:
    dialect: 'jsx ts',
  }),
);
```

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

### Scene Definition with makeScene2D

Source: https://github.com/midrender/docs/blob/main/src/content/guide/project-structure.mdx

Defines a video scene using `makeScene2D`. It specifies a default export that calls `makeScene2D` on a generator function to describe the video content. This example shows how to add a video element and control its playback.

```tsx
import {Video, makeScene2D} from '@revideo/2d';
import {waitFor} from '@revideo/core';

export default makeScene2D(function* (view) {
  const videoFile = useScene().variables.get(
    'video',
    'https://revideo-example-assets.s3.amazonaws.com/stars.mp4',
  )();

  yield view.add(<Video src={videoFile} size={['100%', '100%']} play={true} />);

  yield* waitFor(10);
});
```

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

### Sequential Execution with `yield*`

Source: https://github.com/midrender/docs/blob/main/src/content/guide/designing-animations/logical-separation.mdx

Shows how to execute multiple generator functions sequentially by calling each one with `yield*`.

```tsx
yield * displaySubtitles();
yield * displayImages();
```

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

### Embed Player with CLI Served Project

Source: https://github.com/midrender/docs/blob/main/src/content/guide/building-webapps/using-the-player.mdx

Use this React code to embed the player, pointing the `src` prop to the locally served project.

```tsx
import {Player} from '@revideo/player-react';

<Player src="http://localhost:4000/player/" />;
```

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

### Using makeRefs to Eliminate Redundant Type Declarations

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/references.mdx

Illustrates how `makeRefs` can infer the type for a references object directly from a component's prop types, reducing code duplication. This simplifies the setup when passing references to custom components.

```tsx
import {makeRef, makeRefs} from '@revideo/core';

// ...

function Label({
  refs,
  children,
}: {
  // highlight-next-line
  refs: {rect: Rect; text: Txt};
  children: string;
}) {
  return (
    <Rect ref={makeRef(refs, 'rect'>
      <Txt ref={makeRef(refs, 'text')}>{children}</Txt>
    </Rect>
  );
}

// highlight-next-line
const label = makeRefs<typeof Label>();
view.add(<Label refs={label}>HELLO</Label>);
```

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

### Continuing Animation During Transition

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/transitions.mdx

Shows how to use `finishScene` to trigger a scene transition early, allowing subsequent animations to play while the transition occurs. Without `finishScene`, the scene freezes during the transition.

```tsx
export default makeScene2D(function* (view) {
  yield* animationOne();
  // trigger the transition early:
  finishScene();
  // continue animating:
  yield* animationTwo();
});
```

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

### Trigger Render Job with Callback URL

Source: https://github.com/midrender/docs/blob/main/src/content/guide/building-webapps/rendering-endpoint.mdx

Initiate a render job and specify a `callbackUrl` to receive status updates asynchronously. The immediate response provides a `jobId` for tracking.

```bash
curl -X POST http://your-revideo-service.com/render \
  -H "Content-Type: application/json" \
  -d '{
    "variables": {
      "image": "some-image.png",
      "color": "red"
    },
    "callbackUrl": "http://your-callback-url.com/render-status"
  }'
```

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

### Trigger Render Job with Progress Streaming

Source: https://github.com/midrender/docs/blob/main/src/content/guide/building-webapps/rendering-endpoint.mdx

Enable real-time rendering progress updates by setting `streamProgress` to true in the `/render` request.

```bash
curl -X POST http://your-revideo-service.com/render \
  -H "Content-Type: application/json" \
  -d '{
    "variables": {
      "image": "some-image.png",
      "color": "red"
    },
    "settings": { "workers": 2 },
    "streamProgress": true
  }'
```

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

### Applying Filters to Nodes

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/filters-and-effects.mdx

Demonstrates how to apply filters to a node by either declaring the filters array directly or configuring individual filters using the `filters` property.

```tsx
export default makeScene2D(function* (view) {
  view.fill('#141414');

  const iconRef = createRef()
```

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

### Render Video Programmatically

Source: https://github.com/midrender/docs/blob/main/src/content/guide/rendering-videos.mdx

Use the `renderVideo()` function to render videos directly from your code. Ensure the project file path is correct and optionally enable progress logging.

```typescript
async function render() {
  console.log('Rendering video...');

  // This is the main function that renders the video
  const file = await renderVideo({
    projectFile: './src/project.ts',
    settings: {logProgress: true},
  });

  console.log(`Rendered video to ${file}`);
}

render();
```

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

### Render Video via POST Request

Source: https://github.com/midrender/docs/blob/main/src/content/platform/render-endpoint.mdx

Use this cURL command to send a POST request to render a video using a specific deployment ID. Include your API key for authorization and a JSON body with variables and settings.

```bash
curl -X POST \
  https://api.re.video/v1/render/{your-deployment-id} \
  -H 'Content-Type: application/json' \
  -H 'Authorization: <your-api-key>' \
  -d '{
    "variables": {
      "text": "Hello world",
      "color": "#FF0000"
    },
    "settings": {
      "workers": 5
    }
  }'
```

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

### Passing Parameters to renderVideo()

Source: https://github.com/midrender/docs/blob/main/src/content/guide/parameterized-video.mdx

Shows how to pass variables to the `renderVideo` function, allowing dynamic content injection during the video rendering process.

```typescript
import {renderVideo} from '@revideo/renderer';

renderVideo({
  projectFile: './src/project.ts',
  variables: {username: 'Mike'},
});
```

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

### Callback Response for Successful Render

Source: https://github.com/midrender/docs/blob/main/src/content/guide/building-webapps/rendering-endpoint.mdx

A successful render callback includes the `jobId`, `status`, and a `downloadLink`. The link is temporary and should not be used for permanent serving.

```bash
curl -X POST <callbackUrl> \
-H "Content-Type: application/json" \
-d '{
  "jobId": "123e4567-e89b-12d3-a456-426614174000",
  "status": "success",
  "downloadLink": "http://your-revideo-service.com/download/42078492-fbb9-4570-a329-785e87456618.mp4"
}'
```

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

### Basic Rect Layout with Circle

Source: https://github.com/midrender/docs/blob/main/scripts/__tests__/fixtures/react-components-expected.mdx

Demonstrates a basic layout using Rect and a Circle component.

```tsx
<Rect layout>
  <Circle width={320} height={320} />
</Rect>
```

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

### Accessing and Animating References from createRefMap

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/references.mdx

Shows how to access individual references stored in a `createRefMap` object and apply animations to them. References are accessed using the keys they were assigned with.

```tsx
yield * labels.a().text('A changes', 0.3);
yield * labels.b().text('B changes', 0.3);
yield * labels.c().text('C changes', 0.3);
```

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

### Concurrent Execution of Multiple Generators with `yield`

Source: https://github.com/midrender/docs/blob/main/src/content/guide/designing-animations/logical-separation.mdx

Demonstrates how to run multiple generator functions concurrently by calling them sequentially with `yield`.

```tsx
yield displaySubtitles();
yield displayImages();
```

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

### JSX vs. Non-JSX Node Instantiation

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/hierarchy.mdx

Compares the JSX syntax for adding nodes to a scene with its equivalent non-JSX, direct instantiation using classes.

```tsx
// JSX
view.add(
  <>
    <Circle />
    <Layout>
      <Rect />
      <Txt>Hi</Txt>
    </Layout>
  </>,
);

```

```tsx
// No JSX
view.add([
  new Circle({}),
  new Layout({
    children: [
      // highlight-start
      new Rect({}),
      new Txt({text: 'Hi'}),
    ],
  }),
]);

```

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

### Run Conversion Tests

Source: https://github.com/midrender/docs/blob/main/scripts/README.md

Execute the automated tests for the conversion script to ensure its functionality. Refer to the tests README for more details on coverage.

```bash
npm test
```

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

### Project Configuration

Source: https://github.com/midrender/docs/blob/main/src/content/guide/installation-and-setup.mdx

Defines the main project structure and imports scenes. This is the entry point for your Motion Canvas application.

```typescript
import {
  makeProject,
} from '@revideo/core';

import example from './scenes/example?scene';

export default makeProject({
  scenes: [example],
});
```

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

### Custom Predicate for findAll

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/hierarchy.mdx

Demonstrates how to use a custom function as a predicate with `findAll` to select nodes based on a specific property, like scale.

```ts
const wideNodes = view.findAll(node => node.scale.x() > 1);

```

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

### Animating with `Array.map` and `all`

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/flow.mdx

Shows how to use `Array.map` to generate animation tweens and then combine them using the `all` flow generator.

```typescript
yield *
  all(
    ...rects.map(rect =>
      // No yield or anything; we return this generator and deal with it outside
      rect.position.y(100, 1).to(-100, 2).to(0, 1),
    ),
  );
```

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

### Minimal Scene with Image Display

Source: https://github.com/midrender/docs/blob/main/src/content/guide/designing-animations/logical-separation.mdx

A basic Revideo scene that displays an image for a specified duration using `makeScene2D` and `waitFor`.

```tsx
import {Img, makeScene2D, View2D} from '@revideo/2d';
import {waitFor} from '@revideo/core';

export default makeScene2D(function* (view) {
  yield view.add(
    <Img
      width={'30%'}
      ref={logoRef}
      src={
        'https://revideo-example-assets.s3.amazonaws.com/revideo-logo-white.png'
      }
    />,
  );

  yield* waitFor(5);
});
```

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

### Basic Custom Component Class Structure

Source: https://github.com/midrender/docs/blob/main/src/content/motion-canvas/custom-components.mdx

Create a custom component by extending a base class like Node. Ensure the class name matches the component's intended use.

```tsx
export interface SwitchProps extends NodeProps {
  // properties
}

export class Switch extends Node {
  // implementation
}
```