# How to Integrate Remotion Animations into the video-use Slot System

> Integrate Remotion animations into the video-use slot system. Create an isolated slot directory, scaffold a Remotion project, render to video, and reference the output in your EDL for seamless integration.

- Repository: [Browser Use/video-use](https://github.com/browser-use/video-use)
- Tags: how-to-guide
- Published: 2026-07-08

---

**You integrate Remotion animations into the video-use slot system by creating an isolated slot directory under `edit/animations/slot_<id>/`, scaffolding a Remotion project locally within that slot, rendering your React composition to a video file, and referencing that output in the edit's JSON EDL.**

The **video-use** repository from browser-use treats each animation as a self-contained "slot" that lives under `edit/animations/slot_<id>/`. When you need to integrate Remotion animations into the video-use slot system, you follow a workflow that keeps all Node.js dependencies and build tooling confined to the individual slot directory. This isolation prevents pollution of the repository root while producing rendered media that the main editing pipeline can ingest.

## Understanding the Slot Architecture

The video-use slot system is designed around the principle of **isolation**. Each slot functions as a standalone unit containing everything required to build and render an animation—its source code, local build configuration, and final rendered media.

According to the source code documentation in [`SKILL.md`](https://github.com/browser-use/video-use/blob/main/SKILL.md) (line 49), slots reside under `edit/animations/slot_<id>/`. This structure ensures that **Remotion** (a React-based video rendering library) and its Node.js dependencies remain encapsulated. As noted in [`SKILL.md`](https://github.com/browser-use/video-use/blob/main/SKILL.md) (lines 65-68), all animation tooling runs inside the slot directory, leaving the repository root free of global dependencies. Node.js 22+ is required only when using HyperFrames or Remotion slots, as specified in [`install.md`](https://github.com/browser-use/video-use/blob/main/install.md) (lines 159-160).

## Step-by-Step Integration Process

### 1. Create a New Slot

Begin by creating a dedicated directory for your animation. The slot ID can be any identifier you choose, such as `slot_42` or `slot_intro`.

```bash
mkdir -p edit/animations/slot_42
cd edit/animations/slot_42

```

This directory will hold your Remotion source files, `node_modules`, and the final rendered output.

### 2. Scaffold Remotion Locally

Initialize a Remotion project within the slot using the official scaffold command. This operates locally and does not affect the video-use repository root.

```bash
npx create-video@latest

```

Alternatively, you can install Remotion manually and set up a custom React composition. The key requirement is that all Remotion dependencies remain within the slot directory, as outlined in [`SKILL.md`](https://github.com/browser-use/video-use/blob/main/SKILL.md) (lines 212-213).

### 3. Render the Composition

After building your React component, generate the video file using the slot-local Remotion binary. The output must reside in the same slot directory to be accessible by the rendering pipeline.

```bash
npx remotion render MyComposition render.mp4

```

For alpha-transparent outputs, use `.webm` format instead. The resulting `render.mp4` is the file that the video-use engine will ingest.

### 4. Reference the Output in the Edit EDL

The video-use rendering pipeline, driven by scripts like [`helpers/render.py`](https://github.com/browser-use/video-use/blob/main/helpers/render.py), expects a JSON edit decision list (EDL) that points to concrete media files. Add an entry referencing your slot's rendered output, as shown in [`SKILL.md`](https://github.com/browser-use/video-use/blob/main/SKILL.md) (lines 252-258):

```json
{
  "edits": [
    {
      "file": "edit/animations/slot_42/render.mp4",
      "start_in_output": 10.0,
      "duration": 4.5
    }
  ]
}

```

The `file` path is relative to the repository root, and `start_in_output` defines when the animation appears in the final timeline.

## Verification Best Practices

Before finalizing your edit, verify that the rendered slot output matches your technical requirements. Use `ffprobe` to confirm dimensions, duration, and codec compatibility with the surrounding video elements.

```bash
ffprobe -v error -show_entries format=duration,size -of default=noprint_wrappers=1:nokey=1 edit/animations/slot_42/render.mp4

```

This step ensures that overlay animations align precisely with the main edit timeline and prevents runtime errors during the final render.

## Summary

- **Slot isolation**: Each Remotion animation lives in `edit/animations/slot_<id>/` to keep dependencies contained.
- **Local scaffolding**: Use `npx create-video@latest` inside the slot directory to initialize Remotion without affecting the repo root.
- **Rendering command**: Execute `npx remotion render MyComposition render.mp4` to produce the slot's output file.
- **EDL integration**: Reference the concrete path (e.g., `edit/animations/slot_42/render.mp4`) in the edit JSON consumed by [`helpers/render.py`](https://github.com/browser-use/video-use/blob/main/helpers/render.py).
- **Requirements**: Node.js 22+ is required only for slots utilizing Remotion or HyperFrames, not for the core video-use repository.

## Frequently Asked Questions

### Where should I install Remotion dependencies when using video-use?

Install Remotion dependencies **inside the specific slot directory** (e.g., `edit/animations/slot_42/`). The video-use architecture requires that all Node.js and npm tooling remain isolated within individual slots to prevent dependency conflicts at the repository root level, as documented in [`SKILL.md`](https://github.com/browser-use/video-use/blob/main/SKILL.md) (lines 65-68).

### What Node.js version is required for Remotion slots?

Node.js 22 or higher is recommended when working with Remotion slots or HyperFrames, according to [`install.md`](https://github.com/browser-use/video-use/blob/main/install.md) (lines 159-160). The core video-use repository does not require Node.js unless you are specifically building animations that depend on these tools.

### How does the main edit know where to find my Remotion animation?

The edit specification uses a JSON EDL format where you explicitly declare the file path to the rendered slot output. You must reference the concrete media file (e.g., `"file": "edit/animations/slot_1/render.mp4"`) with timing parameters like `start_in_output` and `duration`, as demonstrated in [`SKILL.md`](https://github.com/browser-use/video-use/blob/main/SKILL.md) (lines 252-258).

### Can I use alpha transparency with Remotion in video-use slots?

Yes. When rendering Remotion compositions that require alpha channels, output to `.webm` format instead of `.mp4`. The slot system accepts both formats, and the edit EDL references the specific file regardless of codec, allowing transparent overlays to composite correctly with underlying video layers.