OpenMontage now renders with HyperFrames

HeyGen open-sourced HyperFrames — an agentic HTML/CSS/GSAP composition runtime for coding agents. It's the exact medium an LLM is already best at (write HTML, write CSS, write a GSAP timeline), turned into a video render engine.

OpenMontage now ships it as a first-class composition runtime, alongside Remotion and FFmpeg. No runtime is the "default" — the agent presents both Remotion and HyperFrames to you at proposal and lets you pick, based on what your brief actually needs.

Why this matters

Remotion is incredible for React-shaped scenes: text_card, stat_card, charts, word-by-word captions, the TalkingHead avatar. Reusing those compositions is basically free.

Remotion is NOT the natural medium for kinetic typography, launch reels, product promos, website-to-video, or anything where a designer would reach for HTML + GSAP first. Forcing that through Remotion interpolate() calls is slow and fragile. HyperFrames solves exactly that half.

renderer_family  → creative grammar (explainer-data, cinematic-trailer, product-reveal, ...)
render_runtime   → technical engine (remotion | hyperframes | ffmpeg)

Both are chosen at proposal, locked in the proposal packet, and carried through edit_decisions unchanged. Silent runtime swaps are a contract violation. If HyperFrames isn't available on your machine, the agent tells you before downgrading — never quietly.

What you get, out of the box

The renderer_family stays a creative choice. The runtime choice unlocks a different surface area — pick the one that matches the brief.

Proof of life — a 5-minute documentary, shipped today

Test case: "A computer just did in five minutes what would take every machine on Earth, running since the Big Bang, ten septillion years." A documentary short on Google's Willow chip and Hartmut Neven's multiverse commentary.

Stack:

• HyperFrames — kinetic typography (chapter titles, pull-quotes, lower-thirds), SVG decorations, registry grain overlay
• FFmpeg — 22 Pexels / Pixabay / NASA b-roll clips composited edge-to-edge, typography overlaid via chromakey
• Google Chirp3-HD Sadachbia — narration
• Pixabay — royalty-free music bed
• Whisper word-level SRT — burned captions

Try it — sample prompts

Kinetic typography explainer:

Make a 60-second explainer on how transformer attention works.
Use HyperFrames for rendering — I want kinetic typography,
GSAP word reveals, and the swiss-grid template. Chirp3-HD
narration. Add a subtle grain overlay via the registry.

Product launch reel:

Build a 30-second launch reel for our API from the screenshots
in ./assets/. HyperFrames runtime, product-promo template,
shimmer-sweep registry block on the product shots, and an
end-card with our logo drawn via DrawSVG.

Website-to-video walkthrough:

Capture https://example.com/pricing and turn it into a 20-second
HyperFrames video tour. Highlight each pricing tier with a GSAP
MotionPath callout. Upbeat royalty-free music from pixabay_music.

Documentary-montage with heavy footage + typography (the Willow pattern):

Make a 5-minute documentary on <topic>. Use HyperFrames for all
typography and chapter cards, FFmpeg to composite real b-roll
footage (Pexels/Pixabay/NASA) edge-to-edge underneath, chromakey
the typography on top, and burn word-level SRT captions. Chirp3-HD
narration with pixabay music.

What you need

• Node.js ≥ 22 (HyperFrames is npx @hyperframes/cli)
• FFmpeg (you already have it for everything else)
• That's it. No API keys for HyperFrames itself. Narration, music, and any AI b-roll still go through your existing provider keys.

Check what you have:

python -c "
from tools.tool_registry import registry
registry.discover()
info = registry._tools['video_compose'].get_info()
print('Render engines:', info.get('render_engines'))
"

If hyperframes: true in that output, you're ready. If not, the agent will tell you exactly what to install at preflight — no silent downgrades.

What's Remotion-only for now

Day-1 scope keeps these on Remotion. No need to port them yet:

• remotion_caption_burn (word-by-word burned captions)
• TalkingHead avatar / lip-sync
• The existing documentary-montage end-tag overlay stack
• Anything that assumes assets are staged under remotion-composer/public/

For these, render_runtime = "remotion" and nothing changes.

One hard-earned tip before you start

If your b-roll renders as a small centered box with black around it, probe your source clips first:

ffprobe -v error -select_streams v -show_entries stream=width,height <clip>

Many Pexels / Pixabay clips ship at 640×360 even at the "large" size tier. Scale-to-COVER them, don't scale-to-fit-and-pad:

scale=1920:1080:force_original_aspect_ratio=increase,crop=1920:1080,unsharp=3:3:0.6

That's the fix. HyperFrames renders what you give it.

Full gotchas doc: skills/core/hyperframes.md.

Go make something. Drop links to what you ship in the thread below.