Key Differences Between Remotion and HyperFrames as OpenMontage Composition Runtimes

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, 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 (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, a CSS file with generated variables in the :root block, and a DESIGN.md specification. The 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 (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

// 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

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

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, CSS variables, and 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.

How does HyperFrames handle design documentation?

HyperFrames automatically generates a DESIGN.md file via the _render_design_md function in 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.

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