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

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 (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 (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 (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.

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.

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 (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.

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, 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 (lines 252-258):

{
  "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.

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.
• 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 (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 (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 (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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}