### Install dependencies and start the project

Source: https://midrender.com/revideo/docs/guide/installation-and-setup

Navigate to the project directory, install required packages, and launch the development server.

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

```bash
npm start
```

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

### Implement a Single-process Rendering Server with Express

Source: https://midrender.com/revideo/docs/guide/building-webapps/deploy-rendering-service

This example demonstrates a basic Express server setup to handle video rendering requests in a single process. It requires the @revideo/renderer package and assumes a project file exists at the specified path.

```typescript
import {renderVideo} from '@revideo/renderer';
import {v4 as uuidv4} from 'uuid';
import * as express from 'express';
import * as fs from 'fs';
import * as path from 'path';
 
const app = express();
app.use(express.json());
 
app.get('/', (req, res) => {
  res.status(200).send(`Hello World!`);
});
 
app.post('/render', async (req, res) => {
  try {
    const {variables} = req.body;
    const jobId = uuidv4();
 
    console.log('Rendering video...');
    await renderVideo({
      projectFile: './src/project.ts',
      variables,
      settings: {outFile: `${jobId}.mp4`, logProgress: true},
    });
    console.log('Finished rendering');
 
    const outputFilePath = path.join(process.cwd(), `./output/${jobId}.mp4`);
 
    if (fs.existsSync(outputFilePath)) {
      res.sendFile(outputFilePath); // alternatively (and recommended), upload file to a bucket
    } else {
      res.status(500).send('Rendered video not found');
    }
  } catch (err) {
    console.error('Error rendering video:', err);
    res.status(500).send('Error rendering video');
  }
});
 
const port = parseInt(process.env.PORT) || 8000;
app.listen(port, () => {
  console.log(`listening on port ${port}`);
});
```

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

### start()

Source: https://midrender.com/revideo/docs/api-reference/core/exporter/classes/WasmExporter

Initializes the rendering process.

```APIDOC
## start

### Description
Begins the rendering process. Called after rendering setup, right before the first frame is rendered.
```

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

### from

Source: https://midrender.com/revideo/docs/api-reference/2d/components/interfaces/RayProps

The starting point of the ray.

```APIDOC
### from

- **Type**: `SignalValue<PossibleVector2>`
- **Optional**: Yes

The starting point of the ray.
```

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

### Project Structure Example

Source: https://midrender.com/revideo/docs/animations/transitions

Recommended file organization for a project with multiple scenes.

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

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

### Project initialization commands

Source: https://midrender.com/revideo/docs/guide/installation-and-setup

Standard commands to navigate to the project directory and start the application after bootstrapping.

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

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

### play()

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Audio

Starts or resumes the media playback.

```APIDOC
## play()

### Description
Starts or resumes the current media playback.

### Returns
- **void**
```

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

### start

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Grid

The percentage that should be clipped from the beginning of each grid line.

```APIDOC
## start

### Description
The percentage that should be clipped from the beginning of each grid line. This property is useful for animating the grid appearing on-screen.

### Type
`SimpleSignal<number, Grid>`
```

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

### Start the Revideo development server

Source: https://midrender.com/revideo/docs/guide/building-webapps/rendering-endpoint

Use the CLI to serve a project file on a specified port.

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

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

### FFmpegExporterClient.start()

Source: https://midrender.com/revideo/docs/api-reference/core/exporter/classes/FFmpegExporterClient

Begins the rendering process. This method is called after setup and before the first frame is rendered.

```APIDOC
### start()

#### Description
Begin the rendering process. This method is called after the rendering has been set up, right before the first frame is rendered.

#### Returns
- **Promise<void>**
```

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

### Install Revideo Player package

Source: https://midrender.com/revideo/docs/api-reference/player-react/player

Use this command to add the player dependency to your project.

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

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

### Install JavaScript Grammar

Source: https://midrender.com/revideo/docs/animations/code-animations

Install the required Lezer grammar package for JavaScript support.

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

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

### start

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Curve

A percentage from the start before which the curve should be clipped. Useful for animating the curve appearing on the screen.

```APIDOC
## start

### Description
A percentage from the start before which the curve should be clipped. The value of 0 means the very start of the curve (accounting for the startOffset) while 1 means the very end (accounting for the endOffset).

### Type
SimpleSignal<number, Curve>
```

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

### Polygon Component Usage

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Polygon

Example showing how to instantiate a Polygon and animate its number of sides.

```APIDOC
## Polygon Component

### Description
The Polygon component renders a regular polygon inscribed within a circle or ellipse defined by its size. It supports properties for controlling the number of sides, size, and visual styling.

### Usage
```typescript
import {makeScene2D, Polygon} from '@revideo/2d';
import {createRef} from '@revideo/core';

export default makeScene2D('scene', function* (view) {
  const ref = createRef<Polygon>();
  view.add(
    <Polygon
      ref={ref}
      sides={6}
      size={160}
      fill={'lightseagreen'}
    />
  );

  yield* ref().sides(3, 2).to(6, 2);
});
```
```

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

### startHandleAuto

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Knot

Accessor to retrieve the auto-calculation signal for the start handle.

```APIDOC
## startHandleAuto

### Description
Returns a signal that controls the auto-calculation state of the start handle.
```

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

### Animating a Grid Component

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Grid

Demonstrates how to initialize a Grid component and animate its start and end properties using the all helper.

```typescript
import {Grid, makeScene2D} from '@revideo/2d';
import {all, createRef} from '@revideo/core';
 
export default makeScene2D('scene', function* (view) {
  const grid = createRef<Grid>();
 
  view.add(
    <Grid
      ref={grid}
      width={'100%'}
      height={'100%'}
      stroke={'#666'}
      start={0}
      end={1}
    />,
  );
 
  yield* all(
    grid().end(0.5, 1).to(1, 1).wait(1),
    grid().start(0.5, 1).to(0, 1).wait(1),
  );
});
```

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

### Slide transition implementation

Source: https://midrender.com/revideo/docs/animations/transitions

A concrete example of a slide transition using signals and context translation.

```typescript
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();
}
```

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

### Animating a spawner

Source: https://midrender.com/revideo/docs/animations/spawners

A full scene example demonstrating how to animate a signal that drives a spawner.

```typescript

import {makeScene2D, Layout, Circle} from '@revideo/2d';
import {createSignal, linear, range} from '@revideo/core';
 
export default makeScene2D('scene', 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);
});
```

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

### Handle callback responses

Source: https://midrender.com/revideo/docs/guide/building-webapps/rendering-endpoint

Examples of POST requests sent to the callback URL indicating success or failure of the render job.

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

```bash
curl -X POST <callbackUrl> \
-H "Content-Type: application/json" \
-d '{
  "jobId": "123e4567-e89b-12d3-a456-426614174000",
  "status": "error",
  "error": "<error message>"
}'
```

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

### Set image source

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Latex

Examples for setting the image source using local files or remote URLs.

```typescript
import image from './example.png';
// ...
view.add(<Img src={image} />)
```

```typescript
view.add(<Img src="https://example.com/image.png" />)
```

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

### Managing Bezier Size

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Bezier

Examples for initializing, accessing, and setting the size of a Bezier node using vectors or individual components.

```typescript
// with a possible vector:
<Node size={['50%', 200]} />
// with individual components:
<Node width={'50%'} height={200} />
```

```typescript
// retrieving the vector:
const size = node.size();
// retrieving an individual component:
const width = node.size.x();
```

```typescript
// with a possible vector:
node.size(['50%', 200]);
node.size(() => ['50%', 200]);
// with individual components:
node.size.x('50%');
node.size.x(() => '50%');
```

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

### sequence(delay, ...tasks)

Source: https://midrender.com/revideo/docs/animations/flow

Start all tasks one after another with a constant delay between.

```APIDOC
## sequence(delay, ...tasks)

### Description
Start all tasks one after another with a constant delay between. The function doesn’t wait until the previous task in the sequence has finished.

### Parameters
- **delay** (number) - Required - The delay between each of the tasks.
- **tasks** (ThreadGenerator[]) - Required - A list of tasks to be run in a sequence.

### Returns
- **ThreadGenerator**
```

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

### Define a scene with static text

Source: https://midrender.com/revideo/docs/guide/parameterized-video

Initial scene setup using a hardcoded string for text content.

```typescript
import {Txt, makeScene2D} from '@revideo/2d';
import {useScene, createRef} from '@revideo/core';
 
export default makeScene2D('scene', 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);
});
```

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

### Managing Bezier Skew

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Bezier

Examples for initializing, accessing, and setting the skew property of a Bezier node.

```typescript
// with a possible vector:
<Node skew={[40, 20]} />
// with individual components:
<Node skewX={40} skewY={20} />
```

```typescript
// retrieving the vector:
const skew = node.skew();
// retrieving an individual component:
const skewX = node.skew.x();
```

```typescript
// with a possible vector:
node.skew([40, 20]);
node.skew(() => [40, 20]);
// with individual components:
node.skew.x(40);
node.skew.x(() => 40);
```

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

### Initialize Masking Signals and Refs

Source: https://midrender.com/revideo/docs/animations/filters-and-effects

Setup signals for positioning and rotation, and refs for nodes used in masking animations.

```typescript
const valuePosition = createSignal(new Vector2(150, -30));
const maskPosition = createSignal(new Vector2(-150, -30));
  

const maskLayerRotation = createSignal(0);
const valueLayerRotation = createSignal(0);
  

const fakeMaskLayerGroup = createRef<Node>();
const fakeValueLayerGroup = createRef<Node>();
  

// First show fake a Mask Layer. Funnily enough, this also makes use of masking!
yield view.add(
<Node ref={fakeMaskLayerGroup} opacity={0} cache>
<Img
src="/revideo/img/logo_dark.svg"
size={200}
position={maskPosition}
rotation={maskLayerRotation}
/>
<Grid
compositeOperation={'source-in'}
```

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

### easeInSine(value, from?, to?)

Source: https://midrender.com/revideo/docs/api-reference/core/tweening/functions/easeInSine

Calculates a sine-based ease-in interpolation for a given value between a start and end point.

```APIDOC
## easeInSine(value, from?, to?)

### Description
Calculates the ease-in sine interpolation for a given progress value. This function is typically used in animation tweening to create a smooth acceleration effect.

### Signature
`easeInSine(value: number, from?: number, to?: number): number`

### Parameters
- **value** (number) - The current progress value (typically between 0 and 1).
- **from** (number) - Optional. The starting value of the interpolation. Defaults to 0.
- **to** (number) - Optional. The ending value of the interpolation. Defaults to 1.

### Returns
- **number** - The interpolated value based on the sine ease-in curve.
```

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

### Setup and animate a 3D scene with Three.js in Revideo

Source: https://midrender.com/revideo/docs/guide/designing-animations/3d-animations-with-threejs

Initializes a Three.js scene, camera, and mesh, then integrates them into a Revideo scene using the Three component and generator functions.

```typescript
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('scene', 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);
  });
}
```

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

### Animating a Quadratic Bézier Curve

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/QuadBezier

Demonstrates how to initialize a QuadBezier component and animate its start and end points using scene generators.

```typescript
import {makeScene2D, QuadBezier} from '@revideo/2d';
import {createRef} from '@revideo/core';
 
export default makeScene2D('scene', function* (view) {
  const bezier = createRef<QuadBezier>();
 
  view.add(
    <QuadBezier
      ref={bezier}
      lineWidth={4}
      stroke={'lightseagreen'}
      p0={[-200, 0]}
      p1={[0, -200]}
      p2={[200, 0]}
      end={0}
    />
  );
 
  yield* bezier().end(1, 1);
  yield* bezier().start(1, 1).to(0, 1);
});
```

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

### Default Start Angle

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Circle

The default value for the starting angle of the circle sector.

```text

0
```

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

### Configure Revideo in Vite

Source: https://midrender.com/revideo/docs/animations/configuration

Basic setup for the Revideo plugin within the Vite configuration file.

```typescript
import {defineConfig} from 'vite';
import motionCanvas from '@revideo/vite-plugin';
 
export default defineConfig({
  plugins: [
    motionCanvas({
      // custom options
    }),
  ],
});
```

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

### Generate range by start and end

Source: https://midrender.com/revideo/docs/api-reference/core/utils/functions/range

Creates an array of numbers from a start value to an end value, where the end value is exclusive.

```typescript
const array1 = range(3, 7); // [3, 4, 5, 6]
const array2 = range(7, 3); // [7, 6, 5, 4]
```

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

### Composite Operation Examples

Source: https://midrender.com/revideo/docs/animations/filters-and-effects

Examples demonstrating different composite operations for masking. Note the order of layers and which layer receives the compositeOperation property.

```typescript
import {Img, Node, makeScene2D} from '@revideo/2d';
import {createRef, linear} from '@revideo/core';
 
// Image by Marek Piwnicki (https://unsplash.com/photos/_4o-1pr2oqU)
const ImageSource =
  'https://images.unsplash.com/photo-1685901088371-f498db7f8c46';
 
export default makeScene2D('scene', function* (view) {
  view.fill('#141414');
 
  const maskRef = createRef<Img>();
  const valueRef = createRef<Img>();
 
  yield view.add(
    <Node cache>
      {/** Stencil / Mask Layer. It defines if the Value Layer is visible or not */}
      <Img ref={maskRef} size={250} src="/revideo/img/logo_dark.svg" />
      {/** Value Layer. Anything from here will be visible if the Stencil Layer allows for it. */}
      <Img
        ref={valueRef}
        x={100}
        src={ImageSource}
        width={600}
        compositeOperation={'source-in'}
      />
    </Node>,
  );
 
  yield maskRef().rotation(360, 4, linear);
  yield* valueRef().x(-100, 1.5).wait(0.5).to(100, 1.5).wait(0.5);
});
```

```typescript
import {Img, Node, makeScene2D} from '@revideo/2d';
import {createRef, linear} from '@revideo/core';
 
// Image by Marek Piwnicki (https://unsplash.com/photos/_4o-1pr2oqU)
const ImageSource =
  'https://images.unsplash.com/photo-1685901088371-f498db7f8c46';
 
export default makeScene2D('scene', function* (view) {
  view.fill('#141414');
 
  const maskRef = createRef<Img>();
  const valueRef = createRef<Img>();
 
  yield view.add(
    <Node cache>
      {/** Stencil / Mask Layer. It defines if the Value Layer is visible or not */}
      <Img ref={maskRef} size={250} src="/revideo/img/logo_dark.svg" />
      {/** Value Layer. Anything from here will be visible if the Stencil Layer allows for it. */}
      <Img
        ref={valueRef}
        x={100}
        src={ImageSource}
        width={600}
        compositeOperation={'source-out'}
      />
    </Node>,
  );
 
  yield maskRef().rotation(360, 4, linear);
  yield* valueRef().x(-100, 1.5).wait(0.5).to(100, 1.5).wait(0.5);
});
```

```typescript
import {Img, Node, makeScene2D} from '@revideo/2d';
import {createRef, linear} from '@revideo/core';
 
// Image by Marek Piwnicki (https://unsplash.com/photos/_4o-1pr2oqU)
const ImageSource =
  'https://images.unsplash.com/photo-1685901088371-f498db7f8c46';
 
export default makeScene2D('scene', function* (view) {
  view.fill('#141414');
 
  const maskRef = createRef<Img>();
  const valueRef = createRef<Img>();
 
  yield view.add(
    <Node cache>
      {/** Value Layer. Anything from here will be visible if the Stencil Layer allows for it. */}
      <Img ref={valueRef} x={100} src={ImageSource} width={600} />
      {/** Stencil / Mask Layer. It defines if the Value Layer is visible or not */}
      <Img
        ref={maskRef}
        size={250}
        src="/revideo/img/logo_dark.svg"
        compositeOperation={'destination-in'}
      />
      {/** !!! Notice how the roles got reversed in comparison to source-in
       * compositeOperation is now on the Mask, and the Value Layer lies above the Mask Layer.
       */}
    </Node>,
  );
 
  yield maskRef().rotation(360, 4, linear);
  yield* valueRef().x(-100, 1.5).wait(0.5).to(100, 1.5).wait(0.5);
});
```

```typescript
import {Img, Node, makeScene2D} from '@revideo/2d';
import {createRef, linear} from '@revideo/core';
 
// Image by Marek Piwnicki (https://unsplash.com/photos/_4o-1pr2oqU)
const ImageSource =
  'https://images.unsplash.com/photo-1685901088371-f498db7f8c46';
 
export default makeScene2D('scene', function* (view) {
  view.fill('#141414');
 
  const maskRef = createRef<Img>();
  const valueRef = createRef<Img>();
 
  yield view.add(
    <Node cache>
      {/** Value Layer. Anything from here will be visible if the Stencil Layer allows for it. */}
      <Img ref={valueRef} x={100} src={ImageSource} width={600} />
      {/** Stencil / Mask Layer. It defines if the Value Layer is visible or not */}
      <Img
        ref={maskRef}
        size={250}
        src="/revideo/img/logo_dark.svg"
```

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

### Configure Corner Radii

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Latex

Examples showing how to define uniform or individual corner radii for a rectangular node.

```typescript
// top-left-and-bottom-right | top-right-and-bottom-left
[10, 30]
// top-left | top-right-and-bottom-left | bottom-right
[10, 20, 30]
// top-left | top-right | bottom-right | bottom-left
[10, 20, 30, 40]
```

```typescript
<Rect
  size={320}
  radius={40}
  fill={'white'}
/>
```

```typescript
<Rect
  size={320}
  radius={[10, 20, 30, 40]}
  fill={'white'}
/>
```

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

### Initialize a new Revideo project

Source: https://midrender.com/revideo/docs/guide/installation-and-setup

Run this command in your terminal to scaffold a new project.

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

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

### makeProject(project)

Source: https://midrender.com/revideo/docs/api-reference/core/app/functions/makeProject

Initializes a new project using the provided configuration.

```APIDOC
## makeProject(project)

### Description
Initializes a project instance based on the provided user project configuration.

### Signature
`makeProject(project: UserProject): Project`

### Parameters
- **project** (UserProject) - Required - The project configuration object.

### Returns
- **Project** - The initialized project instance.
```

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

### startScene(scene)

Source: https://midrender.com/revideo/docs/api-reference/core/utils/functions/startScene

Initializes a scene using the provided scene object.

```APIDOC
## startScene(scene)

### Description
Starts or initializes the specified scene.

### Signature
`startScene(scene: Scene): void`

### Parameters
- **scene** (Scene) - Required - The scene object to be started.
```

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

### fromY

Source: https://midrender.com/revideo/docs/api-reference/2d/components/interfaces/RayProps

The Y coordinate of the starting point of the ray.

```APIDOC
### fromY

- **Type**: `SignalValue<number>`
- **Optional**: Yes

The Y coordinate of the starting point of the ray.
```

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

### initialize()

Source: https://midrender.com/revideo/docs/api-reference/2d/code/classes/LezerHighlighter

Initializes the highlighter for use.

```APIDOC
## Method: initialize()

### Description
Initializes the highlighter. This method is called when collecting async resources for the node and may be called multiple times.

### Returns
- **boolean** - Returns true if ready, false if initialization is still pending.
```

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

### startOffset

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Curve

The offset in pixels from the start of the curve.

```APIDOC
## startOffset

### Description
The offset in pixels from the start of the curve. This property lets you specify where along the defined curve the actual visible portion starts.

### Type
SimpleSignal<number, Curve>
```

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

### Execute Revideo creation command

Source: https://midrender.com/revideo/docs/guide/installation-and-setup

Use this command as an alternative if the standard npm init command fails due to npm version bugs.

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

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

### get()

Source: https://midrender.com/revideo/docs/api-reference/core/signals/classes/SignalContext

Retrieves the current value of the signal.

```APIDOC
## get()

### Description
Returns the current value of the signal.

### Returns
- **TValue**
```

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

### prepare()

Source: https://midrender.com/revideo/docs/api-reference/2d/code/interfaces/CodeHighlighter

Prepares the code for highlighting by performing preprocessing. The result is cached and passed to the highlight method.

```APIDOC
### prepare(code)

> **prepare**(`code`): `T`

Prepares the code for highlighting. This method is called each time the code changes. 

#### Parameters
- **code** (string) - The code to prepare.

#### Returns
- `T` - The result of the preparation, which is cached and passed to highlight.
```

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

### fromX

Source: https://midrender.com/revideo/docs/api-reference/2d/components/interfaces/RayProps

The X coordinate of the starting point of the ray.

```APIDOC
### fromX

- **Type**: `SignalValue<number>`
- **Optional**: Yes

The X coordinate of the starting point of the ray.
```

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

### Render video via CLI

Source: https://midrender.com/revideo/docs/guide/installation-and-setup

Execute the rendering process using the configured npm script.

```bash
npm run render
```

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

### layoutEnabled()

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/CubicBezier

Gets the resolved layout mode of this node.

```APIDOC
## layoutEnabled()

### Description
Get the resolved layout mode of this node. When the mode is null, its value will be inherited from the parent.

### Returns
- **boolean** - The resolved layout mode.
```

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

### startArrow

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Curve

Whether to display an arrow at the start of the visible curve.

```APIDOC
## startArrow

### Description
Whether to display an arrow at the start of the visible curve. Use arrowSize to control the size of the arrow.

### Type
SimpleSignal<boolean, Curve>
```

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

### getFullPreviewSettings(project)

Source: https://midrender.com/revideo/docs/api-reference/core/app/functions/getFullPreviewSettings

Retrieves the full preview settings for a specified project.

```APIDOC
## getFullPreviewSettings(project)

### Description
Retrieves the preview configuration settings for the provided project instance.

### Parameters
- **project** (Project) - Required - The project instance to retrieve settings for.

### Returns
- **Object** - An object containing:
  - **background** (Color)
  - **range** ([number, number])
  - **size** (Vector2)
  - **fps** (number)
  - **resolutionScale** (number)
```

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

### end

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Curve

Controls the clipping of the curve based on a percentage from the start.

```APIDOC
## end

### Description
A percentage from the start after which the curve should be clipped. The portion of the curve that comes after the given percentage will be made invisible. This property is useful for animating the curve appearing on the screen.

### Type
`SimpleSignal<number, Curve>`
```

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

### prepare(code)

Source: https://midrender.com/revideo/docs/api-reference/2d/code/classes/LezerHighlighter

Prepares the code for highlighting.

```APIDOC
## Method: prepare(code)

### Description
Prepares the code for highlighting. This method is called each time the code changes and the result is cached.

### Parameters
- **code** (string) - Required - The code string to prepare.

### Returns
- **LezerCache | null** - The cached result used for highlighting.
```

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

### instantiate()

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Node

Creates an instance of the node's class with optional properties.

```APIDOC
## instantiate(props?)

### Description
Create an instance of this node’s class.

### Parameters
- **props** (NodeProps) - Optional - Properties to pass to the constructor. Defaults to {}.

### Returns
- **this** - The new node instance.
```

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

### range(from, to)

Source: https://midrender.com/revideo/docs/api-reference/core/utils/functions/range

Creates an array of numbers starting from 'from' up to, but not including, 'to'.

```APIDOC
## range(from, to)

### Description
Creates an array containing a range of numbers starting from the 'from' value up to the 'to' value. The 'to' value is not included in the result.

### Parameters
- **from** (number) - Required - The start of the range.
- **to** (number) - Required - The end of the range.

### Returns
- `number[]` - An array of numbers.

### Example
```typescript
const array1 = range(3, 7); // [3, 4, 5, 6]
const array2 = range(7, 3); // [7, 6, 5, 4]
```
```

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

### GET /download/{fileId}

Source: https://midrender.com/revideo/docs/guide/building-webapps/rendering-endpoint

Downloads a rendered video file from the server.

```APIDOC
## GET /download/{fileId}

### Description
Downloads the exported video file once the rendering process is complete. Note that files are temporary and should be moved to permanent storage.

### Method
GET

### Endpoint
/download/{fileId}

### Parameters
#### Path Parameters
- **fileId** (string) - Required - The unique identifier of the rendered video file.
```

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

### Trigger a render job via POST

Source: https://midrender.com/revideo/docs/guide/building-webapps/rendering-endpoint

Send a POST request to the /render endpoint with variables and settings to initiate video processing.

```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 }
  }'
```

```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
  }'
```

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

### Node.absolutePosition

Source: https://midrender.com/revideo/docs/animations/positioning

Gets or sets the absolute position of a node in world space.

```APIDOC
## Node.absolutePosition()

### Description
Gets the absolute position of the node or sets it using a provided vector.

### Signature
`absolutePosition(): Vector2`
`absolutePosition(vector: Vector2): void`
```

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

### useTime()

Source: https://midrender.com/revideo/docs/api-reference/core/utils/functions/useTime

Retrieves the current real time in seconds since the animation started.

```APIDOC
## Function: useTime()

### Description
Returns the real time elapsed since the start of the animation. This value accounts for offsets caused by functions such as flow.waitFor.

### Signature
`useTime(): number`

### Returns
- **number** - The current real time in seconds.

### Example
```typescript
// current time: 0s
yield* waitFor(0.02);
 
// current time: 0.016(6)s
// real time: 0.02s
const realTime = useTime();
```
```

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

### getFullRenderingSettings(project)

Source: https://midrender.com/revideo/docs/api-reference/core/app/functions/getFullRenderingSettings

Retrieves the rendering settings for a given project instance.

```APIDOC
## getFullRenderingSettings(project)

### Description
Retrieves the full rendering configuration for the provided project, including background color, frame range, resolution, color space, and exporter settings.

### Signature
`getFullRenderingSettings(project: Project): { background: Color; range: [number, number]; size: Vector2; } & { colorSpace: CanvasColorSpace; exporter: ExporterSettings; fps: number; resolutionScale: number; }`

### Parameters
- **project** (Project) - Required - The project instance to retrieve settings from.

### Returns
- **Object** - An object containing the merged rendering settings including background, range, size, colorSpace, exporter, fps, and resolutionScale.
```

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

### range(length)

Source: https://midrender.com/revideo/docs/api-reference/core/utils/functions/range

Creates an array of numbers starting from 0 up to the specified length.

```APIDOC
## range(length)

### Description
Creates an array containing a range of numbers starting from 0 up to the specified length.

### Parameters
- **length** (number) - Required - The length of the array.

### Returns
- `number[]` - An array of numbers.

### Example
```typescript
const array1 = range(3); // [0, 1, 2]
const array2 = range(-3); // [0, -1, -2]
```
```

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

### Execute tasks in sequence

Source: https://midrender.com/revideo/docs/api-reference/core/flow/functions/sequence

Triggers a series of tasks with a 0.1-second delay between each start.

```typescript
yield* sequence(
  0.1,
  ...rects.map(rect => rect.x(100, 1))
);
```

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

### startPlayback(playback)

Source: https://midrender.com/revideo/docs/api-reference/core/utils/functions/startPlayback

Initiates playback using the provided playback status object.

```APIDOC
## startPlayback(playback)

### Description
Initiates playback within the Revideo core environment.

### Signature
`startPlayback(playback: PlaybackStatus): void`

### Parameters
- **playback** (PlaybackStatus) - Required - The current playback status object to be started.
```

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

### Render a simple line

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Line

Draws a line with rounded corners and a starting arrow.

```typescript
// snippet Simple line
import {makeScene2D, Line} from '@revideo/2d';
 
export default makeScene2D('scene', function* (view) {
  view.add(
    <Line
      points={[
        [150, 50],
        [0, -50],
        [-150, 50],
      ]}
      stroke={'lightseagreen'}
      lineWidth={8}
      radius={40}
      startArrow
    />,
  );
});
```

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

### configure()

Source: https://midrender.com/revideo/docs/api-reference/core/app/classes/Stage

Configures the stage with specific settings.

```APIDOC
## configure()

### Description
Configures the stage using the provided settings.

### Parameters
- **__namedParameters** (Partial<StageSettings>) - Required - The configuration settings for the stage.
```

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

### closed

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Curve

Determines whether the curve should be closed by connecting its start and end points.

```APIDOC
## closed

### Description
Whether the curve should be closed. Closed curves have their start and end points connected.

### Type
`SimpleSignal<boolean, Curve>`
```

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

### sides

Source: https://midrender.com/revideo/docs/api-reference/2d/components/interfaces/PolygonProps

The number of sides of the polygon. For example, a value of 6 creates a hexagon.

```APIDOC
### sides

- **Type**: `SignalValue<number>`
- **Optional**: Yes

The number of sides of the polygon. For example, a value of 6 creates a hexagon.
```

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

### initialize(target, context?)

Source: https://midrender.com/revideo/docs/api-reference/2d/decorators/functions/initialize

Initializes a target object within an optional context.

```APIDOC
## initialize(target, context?)

### Description
Initializes the provided target object, optionally using the specified context.

### Signature
`initialize(target: any, context?: any): void`

### Parameters
- **target** (any) - The target object to initialize.
- **context** (any) - Optional context to be used during initialization.
```

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

### Enable Smooth Corners

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Icon

Example of enabling corner smoothing on a Rect component.

```typescript
<Rect
  width={300}
  height={300}
  smoothCorners={true}
/>
```

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

### Render with callback URL

Source: https://midrender.com/revideo/docs/guide/building-webapps/rendering-endpoint

Initiate a render job that notifies a specified URL upon completion, returning a jobId immediately.

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

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

### Define a fragment shader

Source: https://midrender.com/revideo/docs/animations/shaders

Example of a fragment shader that inverts node colors.

```glsl
#version 300 es
precision highp float;
 
#include "@revideo/core/shaders/common.glsl"
 
void main() {
    outColor = texture(sourceTexture, sourceUV);
    outColor.rgb = 1.0 - outColor.rgb;
}
```

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

### Render a video with custom settings

Source: https://midrender.com/revideo/docs/api-reference/renderer/renderVideo

Demonstrates how to invoke renderVideo with a project file, custom variables, and specific rendering settings including a progress callback.

```typescript
import {renderVideo} from '@revideo/renderer';
 
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,
    logProgress: true,
    projectSettings: {
      range: [1, 3],
      size: {x: 1080, y: 1792},
    },
    ffmpeg: {
      ffmpegLogLevel: 'error',
      ffmpegPath: 'ffmpeg',
    },
    puppeteer: {
      args: ['--no-sandbox'],
    },
    progressCallback: logProgressToConsole,
  }
});
```

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

### Generate range by length

Source: https://midrender.com/revideo/docs/api-reference/core/utils/functions/range

Creates an array of numbers starting from 0 up to the specified length.

```typescript
const array1 = range(3); // [0, 1, 2]
const array2 = range(-3); // [0, -1, -2]
```

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

### Implementing a scene with makeScene2D

Source: https://midrender.com/revideo/docs/guide/understanding-scene-flow

Shows how to structure a Revideo scene using makeScene2D, refs, and sequential animation steps.

```typescript
import {Circle, makeScene2D} from '@revideo/2d';
import {createRef, waitFor} from '@revideo/core';
 
export default makeScene2D('scene', function* (view) {
  const circleRef = createRef<Circle>();
 
  // At first, a red circle should appear in the center of my video
  yield view.add(<Circle fill={'red'} size={100} ref={circleRef} />);
 
  // The circle should move to the right by 200 pixels within two seconds
  yield* circleRef().position.x(200, 2);
 
  // Then, the circle disappears from the video
  circleRef().remove();
 
  // Afterwards, nothing happens for one second
  yield* waitFor(1);
});
```

```typescript
import …
  

export default makeScene2D('scene', function* (view) {
const circleRef = createRef<Circle>();
  

// At first, a red circle should appear in the center of my video
yield view.add(<Circle fill={'red'} size={100} ref={circleRef} />);
  

// The circle should move to the right by 200 pixels within two seconds
yield* circleRef().position.x(200, 2);
  

// Then, the circle disappears from the video
circleRef().remove();
  

// Afterwards, nothing happens for one second
yield* waitFor(1);
});
```

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

### lines(from, to?)

Source: https://midrender.com/revideo/docs/api-reference/2d/code/functions/lines

Creates a code range that spans from a starting line to an optional ending line.

```APIDOC
## lines(from, to?)

### Description
Creates a code range that spans the given lines. If the 'to' parameter is omitted, the range covers only the single line specified by 'from'.

### Parameters
- **from** (number) - Required - The line from which the range starts.
- **to** (number) - Optional - The line at which the range ends.

### Returns
- **CodeRange** - An object representing the specified range of lines.
```

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

### makeSpring(mass, stiffness, damping, initialVelocity?)

Source: https://midrender.com/revideo/docs/api-reference/core/tweening/functions/makeSpring

Creates a new Spring configuration object using the specified physical parameters.

```APIDOC
## makeSpring(mass, stiffness, damping, initialVelocity?)

### Description
Creates a Spring configuration object used for tweening animations based on physical properties.

### Parameters
- **mass** (number) - The mass of the spring.
- **stiffness** (number) - The stiffness coefficient of the spring.
- **damping** (number) - The damping coefficient of the spring.
- **initialVelocity** (number) - Optional. The initial velocity of the spring.

### Returns
- **Spring** - A configured spring object.
```

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

### new Audio(props)

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Audio

Creates a new instance of the Audio component.

```APIDOC
## Constructor

### Description
Creates a new instance of the Audio component.

### Signature
`new Audio(props: MediaProps): Audio`

### Parameters
- **props** (MediaProps) - Required - The properties used to initialize the audio component.
```

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

### Update renderVideo() call syntax

Source: https://midrender.com/revideo/docs/upgrading/from_0.3.x_to_0.4

Transition from positional arguments pointing to a vite config to an object-based configuration pointing to the project file.

```typescript
const file = await renderVideo(
  'vite.config.ts',
  {fill: 'orange'},
  {logProgress: true},
);
```

```typescript
const file = await renderVideo({
  projectFile: './src/project.ts',
  variables: {fill: 'orange'},
  settings: {logProgress: true},
});
```

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

### Select characters with CodeRange

Source: https://midrender.com/revideo/docs/animations/code-animations

Example of selecting the first three characters of the second line.

```typescript
// prettier-ignore
[[1, 0], [1, 3]];
```

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

### Define project structure for web fonts

Source: https://midrender.com/revideo/docs/animations/custom-font

Shows the recommended file structure for adding a global CSS file to the project source.

```text
root
└─src
  ├─scenes/
  ├─revideo.d.ts
  ├─project.meta
  ├─project.ts
+ └─global.css
```

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

### Render a Ray component

Source: https://midrender.com/revideo/docs/api-reference/2d/components/classes/Ray

Demonstrates how to instantiate a Ray component within a scene, configure its appearance, and animate its drawing progress.

```typescript
import {makeScene2D} from '@revideo/2d';
import {Ray} from '@revideo/2d';
import {createRef} from '@revideo/core';
 
export default makeScene2D('scene', function* (view) {
  const ray = createRef<Ray>();
 
  view.add(
    <Ray
      ref={ray}
      lineWidth={8}
      endArrow
      stroke={'lightseagreen'}
      fromX={-200}
      toX={200}
    />,
  );
 
  yield* ray().start(1, 1);
  yield* ray().start(0).end(0).start(1, 1);
});
```

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

### range(from, to, step)

Source: https://midrender.com/revideo/docs/api-reference/core/utils/functions/range

Creates an array of numbers starting from 'from' up to 'to' with a custom step increment.

```APIDOC
## range(from, to, step)

### Description
Creates an array containing a range of numbers starting from the 'from' value up to the 'to' value, incrementing or decrementing by the specified step.

### Parameters
- **from** (number) - Required - The start of the range.
- **to** (number) - Required - The end of the range.
- **step** (number) - Required - The value by which to increment or decrement.

### Returns
- `number[]` - An array of numbers.

### Example
```typescript
const array1 = range(1, 2, 0.25); // [1, 1.25, 1.5, 1.75]
const array2 = range(2, 1, -0.25); // [2, 1.75, 1.5, 1.25]
```
```

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

### easeInOutSine(value, from?, to?)

Source: https://midrender.com/revideo/docs/api-reference/core/tweening/functions/easeInOutSine

Calculates a sine-based ease-in-out transition for a given progress value.

```APIDOC
## Function: easeInOutSine()

### Description
Calculates the eased value using a sine function, transitioning from a start value to an end value based on the provided progress.

### Signature
`easeInOutSine(value: number, from?: number, to?: number): number`

### Parameters
- **value** (number) - The current progress of the animation (typically 0 to 1).
- **from** (number) - Optional. The starting value of the transition. Defaults to 0.
- **to** (number) - Optional. The ending value of the transition. Defaults to 1.

### Returns
- **number** - The calculated eased value.
```