# Key Differences Between Remotion and HyperFrames as OpenMontage Composition Runtimes

> Explore the key differences between Remotion and HyperFrames OpenMontage composition runtimes. Learn when to use TypeScript/React dynamic rendering or Python static HTML/CSS generation.

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

---

**OpenMontage supports two distinct composition runtimes—Remotion for TypeScript/React-based dynamic rendering and HyperFrames for Python-based static HTML/CSS generation—selected via the `render_runtime` field in your playbook.**

OpenMontage is an open-source framework that orchestrates video composition through declarative playbooks. When configuring a project, you must choose between two execution engines that materialize your visual language differently. The differences between Remotion and HyperFrames as OpenMontage composition runtimes fundamentally determine your toolchain, output format, and development workflow.

## Technology Stack and Language

**Remotion** operates as a **TypeScript/React-based runtime** within the Node.js ecosystem. According to the source code in [`remotion-composer/src/cinematic/types.ts`](https://github.com/calesthio/OpenMontage/blob/main/remotion-composer/src/cinematic/types.ts), this runtime constructs React-style compositions and passes a JSON-serializable `themeConfig` prop to components.

**HyperFrames** utilizes a **Python-based toolchain** that generates static HTML and CSS workspaces. The bridge implementation in [`lib/hyperframes_style_bridge.py`](https://github.com/calesthio/OpenMontage/blob/main/lib/hyperframes_style_bridge.py) (lines 5-12) converts playbook definitions into CSS custom properties and human-readable design documentation.

## Output Artifacts and Rendering Pipeline

The **Remotion** runtime produces a video artifact built by the Remotion CLI using `node remotion render`. This process drives a headless Chromium instance to capture frames from your React components at runtime.

The **HyperFrames** runtime generates a **workspace directory** containing [`index.html`](https://github.com/calesthio/OpenMontage/blob/main/index.html), a CSS file with generated variables in the `:root` block, and a [`DESIGN.md`](https://github.com/calesthio/OpenMontage/blob/main/DESIGN.md) specification. The [`tools/video/hyperframes_compose.py`](https://github.com/calesthio/OpenMontage/blob/main/tools/video/hyperframes_compose.py) script orchestrates this workspace creation before invoking the HyperFrames rendering pipeline.

## Style and Theme Delivery Mechanisms

In **Remotion**, themes travel as a `themeConfig` object created by `tools/video/video_compose._build_theme_from_playbook`. Your React components consume this prop to apply colors, fonts, and motion values directly via component props.

**HyperFrames** emits themes as **CSS custom properties** such as `--color-bg` and `--font-heading`. The `style_bridge` function in [`lib/hyperframes_style_bridge.py`](https://github.com/calesthio/OpenMontage/blob/main/lib/hyperframes_style_bridge.py) (lines 71-84) builds a fallback variable dictionary and overlays edit decisions (lines 28-39), then writes these into the workspace's CSS while `_render_design_md` (lines 44-94) generates the accompanying markdown documentation.

## Asset Handling Strategies

**Remotion** expects assets like images, audio, and video to be imported as ES modules or loaded via URLs inside the React component structure.

**HyperFrames** copies assets into the workspace directory and references them via relative paths. The Python tools also support applying edit decisions to override colors on a per-production basis during this process.

## Configuration and Selection

You select your runtime via the `render_runtime` field in your playbook YAML:

- Set `render_runtime = "remotion"` to trigger the TypeScript pipeline
- Set `render_runtime = "hyperframes"` to trigger the Python pipeline

## Implementation Examples

### Remotion TypeScript Setup

```tsx
// src/compositions/MyVideo.tsx
import {Composition} from 'remotion';
import {MyScene} from './MyScene';
import {themeConfig} from '../generated/themeConfig'; // ← built from the playbook

export const MyVideo: React.FC = () => (
  <Composition
    id="MyVideo"
    component={MyScene}
    durationInFrames={300}
    fps={30}
    width={1920}
    height={1080}
    themeConfig={themeConfig}
  />
);

```

### HyperFrames Python Setup

```bash

# Build the HyperFrames workspace from a playbook

python -m tools.video.hyperframes_compose \
    --playbook path/to/playbook.yaml \
    --output workspace/

```

The generated `workspace/` directory contains the HTML structure with CSS variables and documentation. Render the final video with:

```bash
hyperframes render workspace/ --output my_video.mp4

```

## Summary

- **Language Stack**: Remotion uses TypeScript/React (Node.js) while HyperFrames uses Python (static HTML/CSS generation)
- **Output Format**: Remotion produces direct video files via CLI rendering; HyperFrames generates a workspace directory with [`index.html`](https://github.com/calesthio/OpenMontage/blob/main/index.html), CSS variables, and [`DESIGN.md`](https://github.com/calesthio/OpenMontage/blob/main/DESIGN.md)
- **Theme Delivery**: Remotion passes JSON `themeConfig` props to React components; HyperFrames writes CSS custom properties to `:root` blocks
- **Asset Management**: Remotion relies on ES module imports; HyperFrames copies assets with relative path references
- **Selection Method**: Configure via `render_runtime` field in your OpenMontage playbook ("remotion" vs "hyperframes")

## Frequently Asked Questions

### Can I switch between Remotion and HyperFrames without changing my playbook structure?

Yes. Both runtimes consume the same playbook schema defining visual language, color palettes, and typography. Only the `render_runtime` field and the resulting materialization pipeline differ, allowing you to toggle between React-based dynamic rendering and Python-based static generation without rewriting your visual specifications.

### Which runtime is better for React developers?

**Remotion** is the optimal choice for developers comfortable with React who require full component flexibility. It allows dynamic rendering through familiar JSX patterns and props-based theming, leveraging the `themeConfig` object generated from your playbook in [`remotion-composer/src/cinematic/types.ts`](https://github.com/calesthio/OpenMontage/blob/main/remotion-composer/src/cinematic/types.ts).

### How does HyperFrames handle design documentation?

HyperFrames automatically generates a [`DESIGN.md`](https://github.com/calesthio/OpenMontage/blob/main/DESIGN.md) file via the `_render_design_md` function in [`lib/hyperframes_style_bridge.py`](https://github.com/calesthio/OpenMontage/blob/main/lib/hyperframes_style_bridge.py) (lines 44-94). This human-readable document describes your visual system alongside the CSS custom properties, making it ideal for design handoffs and static pipeline integration.

### Are there performance differences between the two runtimes?

**Remotion** renders through a headless Chromium instance which provides pixel-perfect browser consistency but requires more computational overhead. **HyperFrames** generates static HTML/CSS workspaces that can be rendered through its own pipeline, often offering faster iteration when working with Python-centric workflows or when pre-generating design assets.