# Remotion vs HyperFrames vs FFmpeg for OpenMontage Composition

> Compare Remotion, HyperFrames, and FFmpeg for OpenMontage composition. Choose the best rendering backend for dynamic graphics, motion design, or fast static video stitching.

- Repository: [Calesthio/OpenMontage](https://github.com/calesthio/OpenMontage)
- Tags: comparison
- Published: 2026-08-30

---

**OpenMontage supports three rendering backends—Remotion (React-based), HyperFrames (HTML/CSS/GSAP), and FFmpeg (command-line encoding)—each selected via the `render_runtime` parameter in [`video_compose.py`](https://github.com/calesthio/OpenMontage/blob/main/video_compose.py) based on whether your project requires dynamic graphics, rich motion design, or fast static stitching.**

OpenMontage is an open-source video composition framework that abstracts multiple rendering strategies behind a unified Python API. When generating final video output from a storyboard, the system chooses between **Remotion**, **HyperFrames**, and **FFmpeg** depending on your environment and visual complexity requirements. Understanding the architectural differences between these backends ensures you select the optimal pipeline for your specific **OpenMontage composition** workflow.

## Core Technology Architecture

### Remotion: React Component Rendering

Remotion renders a **React component tree** frame-by-frame using the Node.js-based Remotion CLI (`npx remotion render`). In the OpenMontage source code, this backend is orchestrated through [`tools/video/video_compose.py`](https://github.com/calesthio/OpenMontage/blob/main/tools/video/video_compose.py), where the `_remotion_render()` method stages assets under `remotion-composer/projects/<slug>/` and passes them as props to React components stored in `remotion-composer/src/`.

### HyperFrames: HTML/CSS/GSAP Animation

HyperFrames delegates to the `hyperframes` npm package (`npx hyperframes`), building an **HTML/CSS/GSAP workspace** before rasterizing to video. The implementation in [`tools/video/hyperframes_compose.py`](https://github.com/calesthio/OpenMontage/blob/main/tools/video/hyperframes_compose.py) creates a workspace containing [`hyperframes.json`](https://github.com/calesthio/OpenMontage/blob/main/hyperframes.json) and a `hyperframes_render/` directory, managing the full render lifecycle from validation to final encoding.

### FFmpeg: Native Binary Processing

FFmpeg operates as a pure command-line encoder without intermediate JavaScript or browser layers. The `_ffmpeg_concat()` method in [`video_compose.py`](https://github.com/calesthio/OpenMontage/blob/main/video_compose.py) constructs filter-graph strings to concatenate pre-rendered assets directly, requiring only the `ffmpeg` executable on the system PATH.

## Selection Criteria and Runtime Logic

The central orchestrator in [`tools/video/video_compose.py`](https://github.com/calesthio/OpenMontage/blob/main/tools/video/video_compose.py) determines the active backend through availability checks and explicit configuration.

**Remotion and HyperFrames** are selected when the proposal stage sets `render_runtime='remotion'` or `'hyperframes'`. The pipeline validates the environment using `_remotion_available()` or `_hyperframes_available()` before invoking the respective renderers. These backends excel when you need **dynamic, data-driven graphics** such as animated charts, text effects, or complex scene-graph logic.

**FFmpeg** serves as the fallback when `render_runtime='ffmpeg'` is specified or when Node.js dependencies are unavailable. It is optimal for **static stitching, simple cuts, or high-speed concatenation** of pre-encoded streams where per-frame generation is unnecessary.

## Asset Handling and Performance Characteristics

Each backend manages staging and processing differently:

- **Remotion**: Assets live in `remotion-composer/projects/<slug>/` and are referenced via component props. Rendering is **frame-accurate** but CPU-intensive due to per-frame JavaScript execution.
- **HyperFrames**: Uses a generated workspace with [`hyperframes.json`](https://github.com/calesthio/OpenMontage/blob/main/hyperframes.json) configuration. Adds a **browser-render step** via `hyperframes render` before encoding, providing richer motion graphics capabilities.
- **FFmpeg**: Works directly on file paths (e.g., `input1.mp4`, `input2.mp4`) with no intermediate layers. Offers the **fastest concatenation** for already-encoded streams.

## Implementation Examples

*Remotion Rendering*

```python

# Inside tools/video/video_compose.py

if render_runtime == "remotion" and self._remotion_available():
    result = self._remotion_render({
        "profile": "default",
        "output_path": Path("renders/remotion_output.mp4"),
        "public_dir": Path("public"),
    })

```

*HyperFrames Rendering*

```python

# Inside tools/video/video_compose.py

if render_runtime == "hyperframes":
    result = self._render_via_hyperframes({
        "output_path": Path("renders/hyperframes_output.mp4"),
    })

```

*(delegates to `HyperFramesCompose` in [`tools/video/hyperframes_compose.py`](https://github.com/calesthio/OpenMontage/blob/main/tools/video/hyperframes_compose.py))*

*FFmpeg Concatenation*

```python

# Inside tools/video/video_compose.py

if render_runtime == "ffmpeg":
    result = self._ffmpeg_concat({
        "inputs": ["clip1.mp4", "clip2.mp4"],
        "output_path": Path("renders/ffmpeg_output.mp4"),
    })

```

*(builds commands like `ffmpeg -i ... -c copy …`)*

## Dependencies and Extensibility

**Remotion** requires Node.js ≥14 and npm packages installed within `remotion-composer/`, as noted in the `remotion_note` comments within [`video_compose.py`](https://github.com/calesthio/OpenMontage/blob/main/video_compose.py). Extensibility comes from modifying React components in `remotion-composer/src/`.

**HyperFrames** depends on the `hyperframes` npm package resolving via `npx hyperframes doctor`, implemented in [`tools/video/hyperframes_compose.py`](https://github.com/calesthio/OpenMontage/blob/main/tools/video/hyperframes_compose.py). New effects require creating additional GSAP blocks.

**FFmpeg** requires only the `ffmpeg` binary on PATH, making it the most lightweight option. Extending functionality involves writing additional filter-graph strings in the Python wrapper.

## Summary

- **Remotion** provides frame-accurate, programmatic animation through React components, ideal for data-driven graphics but requiring Node.js.
- **HyperFrames** offers advanced motion graphics via HTML/CSS/GSAP with a browser-render step, suitable for complex visual effects.
- **FFmpeg** delivers the fastest static stitching and concatenation without dependencies on Node.js or browser environments.
- The selection logic resides in [`tools/video/video_compose.py`](https://github.com/calesthio/OpenMontage/blob/main/tools/video/video_compose.py), which checks availability via helper methods before routing to the appropriate backend.
- Assets are staged differently for each backend: React props for Remotion, JSON workspaces for HyperFrames, and direct file paths for FFmpeg.

## Frequently Asked Questions

### Which OpenMontage composition backend is fastest for simple video concatenation?

**FFmpeg is the fastest choice for simple concatenation** because it operates directly on encoded streams without per-frame generation or browser overhead. As implemented in [`video_compose.py`](https://github.com/calesthio/OpenMontage/blob/main/video_compose.py), the `_ffmpeg_concat()` method builds filter-graph commands that avoid the CPU-intensive JavaScript execution required by Remotion or the browser rasterization step used by HyperFrames.

### Can I use Remotion without installing Node.js in OpenMontage?

**No, Remotion requires Node.js ≥14 and npm dependencies.** The `_remotion_available()` function in [`tools/video/video_compose.py`](https://github.com/calesthio/OpenMontage/blob/main/tools/video/video_compose.py) checks for the presence of the Node.js environment and the `remotion-composer` package installation. If Node.js is unavailable, the pipeline falls back to FFmpeg.

### How does HyperFrames differ from Remotion in asset management?

**HyperFrames uses a JSON-configured workspace while Remotion uses React props.** HyperFrames generates [`hyperframes.json`](https://github.com/calesthio/OpenMontage/blob/main/hyperframes.json) and a `hyperframes_render/` directory to manage assets, as seen in [`tools/video/hyperframes_compose.py`](https://github.com/calesthio/OpenMontage/blob/main/tools/video/hyperframes_compose.py), whereas Remotion stages files under `remotion-composer/projects/<slug>/` and passes them as component props. This makes HyperFrames better suited for GSAP-based motion graphics while Remotion excels at React-centric data visualization.

### Where does the rendering backend selection happen in the OpenMontage source code?

**The selection logic is centralized in [`tools/video/video_compose.py`](https://github.com/calesthio/OpenMontage/blob/main/tools/video/video_compose.py).** This orchestrator evaluates the `render_runtime` parameter and availability via `_remotion_available()` or `_hyperframes_available()`, then dispatches to `_remotion_render()`, `_render_via_hyperframes()`, or `_ffmpeg_concat()` accordingly.