Remotion vs HyperFrames vs FFmpeg for OpenMontage Composition

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 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, 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 creates a workspace containing 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 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 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 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

# 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

# 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)

FFmpeg Concatenation

# 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. 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. 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, 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, 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 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 and a hyperframes_render/ directory to manage assets, as seen in 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. 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.

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