varg vs Remotion vs Hyperframes

​

TL;DR

All three frameworks output real MP4s from code, and all three lean on JSX-ish syntax — but they sit at different layers of the stack.

• Remotion is a React-based renderer. You author motion graphics as React components and headless Chrome paints them frame-by-frame.
• Hyperframes is an HTML-based renderer. You author compositions as HTML+CSS+GSAP and headless Chrome captures them deterministically via beginFrame.
• varg is an AI media generation and composition platform. You describe high-level clips (<TalkingHead>, <Speech>, <Image>, <Video>) and varg calls AI providers (fal, ElevenLabs, Replicate, Higgsfield, HeyGen) to produce the underlying media, then composes everything via ffmpeg.

The first two are renderers competing on authoring surface. varg is the layer that produces what those renderers would otherwise consume — so for AI-native video, varg owns a category of its own.

​

At a glance

​

Why this comparison exists

Hyperframes published its own comparison with Remotion, which is honest and well-written. It argues that HTML is a better authoring surface than React for AI agents, and lays out the technical reasons. Both sides have merit, and the doc is worth reading. But that comparison only covers half the picture. Once you ask “what should produce the talking head, the voiceover, the b-roll, the lip-sync, the captions, the music?” — neither Remotion nor Hyperframes have an answer. That’s varg. This page covers all three, with attention to where each one shines.

​

Remotion

​

Overview

Remotion’s premise: videos are React components. You write JSX and CSS, access the current frame via useCurrentFrame() and useVideoConfig() hooks, and Remotion renders the resulting DOM frame-by-frame into MP4. Created by Jonny Burger in 2021, it brings web-development practices — hot reload, version control, component reuse, serverless rendering — to video production. A Remotion project resembles a React app. You define reusable components, import assets, and register compositions with props. Under the hood, Remotion uses Webpack for bundling, Babel for transpilation, headless Chrome for rendering, and FFmpeg for encoding. Around 48k GitHub stars, ~3M npm installs, ~8000 Discord members.

​

Strengths

​

Limitations

​

Best for

Developer-controlled motion graphics, data-driven videos (dashboards, year-in-review apps, audiograms), embedded video editors via <Player>, and any workflow where your team already lives in React.

​

Hyperframes

​

Overview

Hyperframes is an open-source HTML-to-video framework recently released by HeyGen under the Apache 2.0 license. Instead of writing React, you write plain HTML, CSS, and JavaScript. Compositions are HTML documents with data attributes for timing (data-start, data-duration) and layout (data-track-index). The HeyGen team built Hyperframes after using Remotion in production and hitting limits with the React-first model for AI-generated content. Two motivations: LLMs write HTML better than React, and HTML is both the render layer and the editable source — which makes a real-time visual editor much more natural to build.

​

Architecture

• Authoring — HTML + CSS + JavaScript. No build step. index.html plays as-is. You can paste an existing web page or CodePen demo and animate it.
• Renderer — headless Chrome with two capture modes:
  • BeginFrame mode (Linux + chrome-headless-shell) drives Chrome’s compositor atomically via HeadlessExperimental.beginFrame. Byte-for-byte reproducible across machines.
  • Screenshot mode (macOS, Windows, auto-fallback) takes ordinary screenshots when BeginFrame can’t handle a primitive (<iframe>, raw requestAnimationFrame). A virtual-time shim keeps animations frame-driven.
• Library-clock determinism — Hyperframes pauses GSAP, Anime.js, and Motion One timelines and seeks them to frame / fps before each capture. Animations stay in lockstep with the output, fixing the misfire that bites Remotion.
• Distributed rendering — AWS Lambda path with Step Functions and chunk workers. Newer than Remotion Lambda, so the tradeoff is maturity versus HTML-native authoring.
• HDR output — Two-pass compositing combines a DOM layer with native HLG/PQ video. Remotion documents HDR as unsupported.

​

Strengths

​

Limitations

​

Best for

AI-generated motion graphics where an agent writes the composition, website-to-video conversions, design-system demos, and visual-editor UX where users directly manipulate the rendered DOM.

​

Varg

​

Overview

varg is the only one of the three frameworks that actually generates the media. Remotion and Hyperframes are renderers that need source material — varg is the platform that produces talking heads, voiceovers, lip-synced narration, AI b-roll, music, and captions, then composes them into a finished video. The varg SDK (vargai on npm) is open-source under Apache 2.0. It ships:

• A custom JSX runtime (not React) that produces a VargElement tree, consumed by an internal compositor.
• High-level components — <Render>, <Clip>, <Image>, <Video>, <Speech>, <Music>, <TalkingHead>, <Captions>, <Subtitle>, <Title>, <Overlay>, <Slider>, <Swipe>, <Packshot>, <Split>, <Grid> — that map to creative intent, not per-frame primitives.
• A unified gateway (api.varg.ai) — one API key fans out to fal, ElevenLabs, Replicate, Higgsfield, HeyGen, PiAPI, Magnific, and more.
• Content-addressed caching (sha256 of prompt + parameters) backed by Cloudflare R2 with stable s3.varg.ai URLs and a 30-day TTL. Identical prompts cost nothing on re-render.
• A cloud render endpoint at render.varg.ai that accepts TSX as a string and returns an MP4 URL — zero local dependencies required.
• An agent skill (varg-ai) installable in Claude Code, Cursor, Windsurf, OpenCode via npx -y skills add vargHQ/skills. The skill ships with reference docs for models, components, prompting, recipes, and error recovery.
• x402 USDC micropayments for anonymous agents, and BYOK with AES-256-GCM-encrypted provider keys.

​

Architecture

Four layers, each thin and replaceable:

1. Authoring DSL — JSX with the vargai import source. Components describe high-level media (<TalkingHead>, <Speech>, <Clip>) rather than per-frame primitives.
2. Provider orchestration — the gateway resolves one API key to whatever provider is needed, caches the result to R2, and returns a stable URL.
3. Composition — the SDK’s editly compositor walks the VargElement tree and emits an ffmpeg filter graph.
4. Rendering — ffmpeg locally, Rendi cloud ffmpeg in production, or the render.varg.ai service that wraps both.

The custom JSX runtime is deliberately not React. Components like Image(), Video(), and Speech() are async element factories that materialize AI assets, and the runtime understands both static and thenable elements. The result is that agents can write code that looks like React but actually describes a pipeline of AI generations and compositions.

​

Strengths

​

Limitations (by design)

​

Best for

AI-generated content — talking heads, narrated explainers, UGC-style ads, social shorts, character-driven videos, before/after transformations, lip-synced narration. Anywhere the creative work is choosing the right prompt and the right model, not animating individual frames.

​

The Remotion vs Hyperframes debate

Hyperframes’ own comparison frames the debate as React vs HTML. Both sides have honest arguments: Hyperframes’ case

• LLMs are trained more on HTML than React, so agents produce better output with fewer guardrails.
• GSAP, Anime.js, Motion One, Lottie, and Web Animations API all seek deterministically — no wall-clock misfire.
• Any HTML page is a potential composition: landing pages, design-system docs, CodePen demos. Paste and animate.
• The DOM you render is the DOM you edit, so a real visual editor is straightforward.
• HDR is supported.
• Apache 2.0 means no per-render fees, no seat caps, no commercial-license threshold.

Remotion’s case

• Mature: years of production use, ~48k GitHub stars, ~3M installs, 8000+ Discord members, hundreds of templates.
• Remotion Lambda is battle-tested at scale. Hyperframes’ Lambda path is newer.
• React component reuse means you can pull from an existing design system and ship videos from the same primitives as your app.
• TypeScript, IDE completion, refactor-across-files — real developer ergonomics.
• Broader product surface: Studio, Player, Editor Starter, Recorder, Timeline.
• “Source-available, not OSI” doesn’t matter if your use case fits the free tier or your company is fine paying for what works.

Honest read. Hyperframes is the more architecturally interesting bet for AI agents authoring video. Remotion is the more mature bet for engineering teams shipping video apps today. If you’re hand-writing motion graphics in 2026, the choice is mostly aesthetic plus licensing. If you’re letting an agent author them, Hyperframes’ HTML-first surface is a real advantage. But. Both of them stop at the renderer. Neither answers “where does the talking head come from?” or “where does the voiceover come from?” or “where does the b-roll come from?” — and that’s the question that matters for AI video. That’s the layer varg owns.

​

Comparative analysis

​

Authoring model

​

Runtime and rendering

​

Agent experience and editing

​

When to choose what

​

Choose varg when

• The video is AI-generated content — talking heads, narrated explainers, UGC ads, social shorts, character-driven stories, before/after transformations.
• You want one API key instead of seven provider integrations.
• You’re letting an agent author end-to-end pipelines (script → voiceover → b-roll → lip-sync → captions → music → final cut).
• Iteration economics matter — content-addressed caching means re-rendering the same prompt is free.
• You want a no-toolchain path for agents (cloud render via pure curl).

​

Choose Hyperframes when

• You’re hand-authoring motion graphics in HTML, CSS, and GSAP.
• You need library-clock animations that seek deterministically.
• You want a WYSIWYG editor on the same source as the renderer.
• OSS licensing matters (Apache 2.0).
• You need HDR output.

​

Choose Remotion when

• You have a React design system to reuse.
• You need mature AWS Lambda at production scale.
• You’re building a video app with <Player> embedded.
• You need fine-grained per-frame motion graphics for data visualization or kinetic typography.

​

They’re complementary

These are not zero-sum choices. varg outputs MP4s with stable URLs on s3.varg.ai. Those URLs drop straight into a Remotion <Video> or a Hyperframes <video> element. If you need both AI-generated content and per-frame motion graphics, the natural pattern is:

1. varg generates the AI assets — characters, voices, b-roll, lip-synced shots — and caches them to R2.
2. Remotion or Hyperframes composes them with whatever per-frame animation you need on top.

For most agent-authored video workflows, though, varg’s own clip-level composition is enough — and skipping the second renderer keeps the pipeline simpler.

​

Conclusion

Remotion, Hyperframes, and varg solve different problems that happen to share a JSX-shaped surface.

• Remotion is the mature React-based renderer for developer-built video apps and per-frame motion graphics.
• Hyperframes is the agent-native HTML-based renderer for compositions you’d want to edit visually.
• varg is the AI media generation and composition platform — the only one of the three that produces the underlying talking heads, voiceovers, b-roll, music, and captions instead of asking you to bring them.

If your bottleneck is creative per-frame control, choose Remotion or Hyperframes. If your bottleneck is AI generation cost, provider sprawl, and shipping agent-authored video pipelines — that’s varg’s home turf, and there isn’t really anything else in the same category.

​

References

• Hyperframes vs Remotion (Hyperframes’ own comparison)
• Hyperframes — Deterministic Rendering
• Hyperframes — Compositions
• Remotion — The Fundamentals
• Remotion Lambda
• varg SDK on GitHub (Apache 2.0)
• varg AI agents guide