HyperFrames vs Remotion: Why HTML Beats React for AI Video Generation

Introduction: Two Frameworks for Programmatic Video

More developers are using coding agents to create videos. For the same goal — "I want to make AI video" — two camps give opposite advice: use Remotion (React ecosystem, mature, suited for serious batch production) or switch to HyperFrames (write HTML, AI picks it up faster, fewer errors). This article examines where the frameworks differ, what backs each approach, and why the author favors HyperFrames for AI-driven video generation.

Meet the Contenders

Remotion: Video with React

Remotion is a leading programmatic video framework. Its model: describe each frame with React components, render frame-by-frame in a headless browser, then encode to MP4. The core API is pure: useCurrentFrame() gets the current frame number, interpolate() maps frames to opacity, position, scale, and a Composition declares width, height, frame rate, and duration. The visual output is a pure function of the frame number — code is truth.

This model naturally fits data-driven batch video: one template fed different data yields hundreds or thousands of videos. Combined with server-side rendering and Remotion Lambda, it supports massive parallel cloud rendering. The project has tens of thousands of GitHub stars, extensive docs, templates, and community Q&A — a production-proven, mature solution.

HyperFrames: Write HTML, Render Video

HyperFrames is an open-source video rendering framework from HeyGen. Its slogan: Write HTML. Render video. Built for agents. The core idea: HTML runs in the browser exactly as the rendered video will look. You write an index.html — CSS handles styling, GSAP handles animation — the CLI uses a headless browser to capture frames and FFmpeg to encode a deterministic MP4. No build step, no React, no new syntax to learn.

The workflow is three commands: npx hyperframes init to initialize, npx hyperframes preview for live browser preview, npx hyperframes render to export MP4. It includes built-in speech synthesis, subtitle generation, and media handling, plus 20+ official skills for Claude Code, Cursor, Gemini CLI, and Codex — enabling AI to independently complete the full loop of planning, coding, previewing, and rendering.

The Real Divergence: Who Writes the Content

An often-overlooked fact: both frameworks share nearly identical rendering pipelines — headless Chrome plus FFmpeg, both achieving deterministic rendering. The only real divergence is the primary author . Remotion bets on React components: developers precisely orchestrate frames. HyperFrames bets on plain HTML: the page itself is the video. This divergence was subtle when humans wrote code, but is dramatically amplified in the era of AI code generation.

Training Data Determines the Ceiling

The reason is straightforward: in LLM training corpora, HTML, CSS, and JavaScript form the deepest well. Billions of web pages teach models daily "how to write web code"; React, TypeScript, and framework syntax are a drop in that ocean. When an AI agent writes Remotion code, it must first spend massive tokens learning framework rules — component structure, JSX organization, animation in React, Composition registration — before it can create. Writing HTML? That is the model's native territory, with almost zero extra learning cost. The result: more creative output, fewer errors, more direct modifications.

Same Prompt, Two Different Results

This isn't just the author's claim. A test using the same prompt with Claude Opus 4.7 produced a clear contrast: the Remotion version delivered standard transitions and generic layouts — visually conservative, like a template. The HyperFrames version produced GSAP animations, custom layouts, and more distinctive storyboarding and composition. Same requirement, two outcomes. This is not about which framework is easier to use; it's about which language gives the AI more room to express creativity .

Side-by-Side: A 3-Second Title Card

The official docs provide a telling comparison. Both implement a 3-second title card (fade in, hold, fade out). Remotion encodes the timing math in code, driven by frame numbers:

// Remotion approach (React + TypeScript)
import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";

export const TitleCard = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 15, 75, 90], [0, 1, 1, 0], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
  return (
    <AbsoluteFill
      style={{ backgroundColor: "#0a0a0a", justifyContent: "center", alignItems: "center" }}
    >
      <div style={{ fontSize: 160, fontWeight: 800, color: "#fff", opacity }}>HELLO</div>
    </AbsoluteFill>
  );
};

HyperFrames delegates "when it appears" to HTML data-* attributes and "how it moves" to a GSAP timeline, using seconds instead of frames, all in a single file:

<!-- HyperFrames approach (single HTML file) -->
<div id="stage" data-composition-id="title-card" data-start="0" data-width="1280" data-height="720" data-duration="3" data-fps="30">
  <div id="card" class="clip" data-start="0" data-duration="3" data-track-index="0">
    <div id="title">HELLO</div>
  </div>
</div>
<script>
  const tl = gsap.timeline({ paused: true });
  tl.to("#title", { opacity: 1, duration: 0.5 }, 0);
  tl.to("#title", { opacity: 1, duration: 2.0 }, 0.5);
  tl.to("#title", { opacity: 0, duration: 0.5 }, 2.5);
  window.__timelines = window.__timelines || {};
  window.__timelines["title-card"] = tl;
</script>

Three Often-Missed Key Differences

Animation Ecosystem: Where GSAP Truly Listens

Video requires animation libraries, and GSAP is one of the most popular. It clashes with Remotion: Remotion runs React reconciliation every frame, while GSAP has its own internal clock — two clocks fighting. A carefully designed 4-second animation in Remotion might finish in 1 second. HyperFrames takes a different approach: no clock synchronization, instead it seeks — the renderer pauses the animation, jumps to the exact moment, then captures that frame. GSAP, Lottie, Web Animations, Anime.js all follow the frame precisely; 4 seconds stays 4 seconds, down to the millisecond , and the same frame renders identically every time — true deterministic rendering.

Workflow: What No Build Step Means

HyperFrames requires no build step: index.html opened in a browser is exactly what the video will look like. Change a line of CSS, refresh, see the result — no waiting, no compilation, no transpilation. Remotion cannot avoid a bundler: HTML must become JSX, CSS must be handled the React way. Every step is a "translation," and every translation can introduce errors. For AI workflows this is especially fatal: more translation steps mean higher probability of AI drifting and requiring human bug fixes.

Licensing: Open Source vs. Source-Available

HyperFrames uses Apache 2.0 — an OSI-approved open-source license: unrestricted commercial use, no render-count fees, no team-size limits. Remotion is source-available under a custom commercial license: free for individuals and teams up to 3 people; beyond that, a company license is required, and cloud rendering services have cost boundaries. If you're building a commercial product or embedding video generation into a service for others, the license is a must-consider factor — it decides whether your business plan suddenly incurs extra costs at some inflection point.

Comparison Summary

Creation Language: HyperFrames — HTML + CSS + JavaScript; Remotion — React + TypeScript

Build Step: HyperFrames — none, index.html opens for instant preview; Remotion — requires bundler

Animation Timing: HyperFrames — pause and seek to exact moment, frame-accurate; Remotion — code returns frame by frame number, frame-driven

Existing Web Assets: HyperFrames — HTML/CSS, GSAP, Lottie animations largely reusable directly; Remotion — must rewrite as React components

AI Agent Onboarding: HyperFrames — writes pure HTML, can generate and modify directly; Remotion — must understand JSX/React engineering and build

License: HyperFrames — Apache 2.0 (OSI open source, no restrictions); Remotion — custom commercial license, 3+ person teams pay

Fair Assessment

Credit where due: HyperFrames didn't appear from nowhere. HeyGen used Remotion in production for months, and HyperFrames' source still retains acknowledgments to Remotion — Chrome launch parameters, image2pipe streaming to FFmpeg, frame buffering — these core low-level patterns were pioneered by the Remotion team. Both frameworks share the same rendering philosophy; the difference is only who writes the content.

Also must admit: Remotion remains more mature in many respects — thicker docs, larger community, more templates, and Remotion Lambda is a battle-tested cloud rendering system. If your team is deeply React-centric, has an existing component library, and needs large-scale data-driven video generation, Remotion is still a solid choice — no need to switch for switching's sake.

Incidentally, HyperFrames offers a real migration path: the official remotion-to-hyperframes skill mechanically translates ~80% of typical Remotion compositions into HTML. Parts that can't be translated (e.g., state machines based on useState) are explicitly flagged rather than silently mistranslated.

How Would You Choose?

The author's verdict: if you're doing AI-driven video generation, want AI to produce more creative content, or need a fully commercially-friendly open-source solution, HyperFrames deserves serious consideration. If your team's core is React and your primary workload is large-scale data-driven generation, Remotion remains the safe bet.

One final question: the future of video production — humans writing code, or AI writing HTML? If the latter, framework choice isn't just tool preference — it determines how much of the AI's creativity can actually be unleashed. What would you pick?