Two ways to make video programmatically (and what each one is betting on)

Programmatic video has had a bit of a moment lately. If you’ve been ignoring it, you can be forgiven, the tooling was clunky for years. That’s changed. Two open-source projects in particular are worth pulling apart, because they take very different routes to the same destination.

One is Remotion. The other is Hyperframes, recently open-sourced by HeyGen.

Both let you generate video with code. Both can stitch in audio, render to MP4, and run as part of an automated pipeline. But they are aimed at different humans (and different non-humans), and the choice between them tells you something about where the industry is going.

Remotion: video as a React app

Remotion is the established option. 37.5k GitHub stars, four years of releases, used by everyone from Fireship’s video team to small marketing shops generating personalised year-in-review videos.

The pitch is simple: if you can write React, you can write video. A composition is a React component. Time becomes a prop. You compose, you preview in a browser, you render to MP4.

A trivial example:

jsx

import { AbsoluteFill, useCurrentFrame } from 'remotion';

export const HelloWorld = () => {

const frame = useCurrentFrame();

return (

<AbsoluteFill style={{ backgroundColor: 'white', justifyContent: 'center', alignItems: 'center' }}>

<h1 style={{ fontSize: 100, opacity: frame / 30 }}>

Hello, frame {frame}

</h1>

</AbsoluteFill>

);

};

That’s it. The text fades in over the first 30 frames. Hit render, get a video. Everything you already know about React (state, hooks, libraries, the entire npm ecosystem) just works.

Where it shines: developer ergonomics. Hot reload. Type safety. The whole React mental model.

Where to be careful: Remotion has a custom licence. Free for individuals and small companies, paid licence required for organisations above certain thresholds. Read the licence file before you build anything commercial on it. Not a deal-breaker, just a known cost to budget for.

Hyperframes: video as HTML

Hyperframes is much newer (open-sourced this year) and takes a deliberately different stance. The headline on the README:

> Write HTML. Render video. Built for agents.

No React required. No build step in your face. You define a composition with plain HTML and `data-*` attributes:

html

<div id="stage" data-composition-id="my-video" data-start="0" data-width="1920" data-height="1080">

<video id="clip-1" data-start="0" data-duration="5" data-track="0" src="intro.mp4" muted></video>

<img id="overlay" data-start="2" data-duration="3" data-track="1" src="logo.png" />

<audio id="bg-music" data-start="0" data-duration="9" data-track="2" data-volume="0.5" src="music.wav"></audio>

</div>

Under the bonnet it’s Puppeteer plus FFmpeg, with adapters for animation runtimes like GSAP and Lottie. It ships with MCP (Model Context Protocol) support, so AI coding agents can compose videos using tools they already speak. It’s Apache-2.0 licensed.

Where it shines: agent workflows. The framework was designed from day one for AI agents to write the markup. If your use case involves Claude Code, Cursor, or any other coding agent generating video, this is the path of least resistance.

Where to be careful: it’s young. A handful of GitHub stars at the time of writing, twenty releases, no large production showcase yet. The ideas are sound, but you’re an early adopter. Test thoroughly before you bet a delivery on it.

The philosophy split

This is where it gets interesting.

Remotion bets on developers. The premise is that React is the dominant UI framework, devs already think in components, and the right move is to give them video primitives in their existing language. It’s a bet on developer ergonomics and the React ecosystem.

Hyperframes bets on agents. The premise is that AI coding agents are increasingly the ones generating UI code, they handle HTML extremely well, and the right move is to make video composition look like the web they already understand. It’s a bet on the agent ecosystem that’s emerging.

Neither is wrong. They just see different futures.

If you think the next decade of software is humans writing React with AI assistance, Remotion looks correct. If you think it’s agents producing artefacts on your behalf, with humans reviewing and steering, Hyperframes looks correct.

In practice, both will be true for different people doing different work. The interesting question isn’t which tool wins, it’s which one fits the workflow you’re actually building.

When to pick which

A quick decision tree.

Pick Remotion if:

- You have a React shop and a developer-led pipeline.

- You want type safety, component reuse, and a mature ecosystem.

- You’re comfortable with the licence terms for your size of business.

- You need maturity. This thing has been battle-tested.

Pick Hyperframes if:

- Your pipeline is agent-led. Claude Code, Cursor, or similar is generating the composition.

- You want to keep the templating language as close to plain web as possible.

- You’re happy being an early adopter and feeding back.

- You need permissive licensing (Apache-2.0).

Use neither if:

- You just need one video, once. Use a video editor. Programmatic video is for things you do at scale or repeatedly.

Why this matters now

Programmatic video used to be a niche concern. It isn’t anymore. A few practical use cases I’ve seen land in the last twelve months:

- Personalised marketing: thousands of variants of a thirty-second pitch, one per prospect, generated overnight.

- Automated reports: weekly numbers turned into a narrated video for the leadership team, with charts that animate from the underlying data.

- Social content at scale: short clips generated from blog posts, with consistent branding, no designer in the loop for every variant.

- Onboarding and training: new joiner videos that pull the right person’s name, role, and team in automatically.

These were all expensive or impossible five years ago. Now they’re cheap. The bottleneck is no longer rendering, it’s deciding what’s worth rendering.

Getting started

For Remotion:

```bash

npx create-video@latest

```

Pick the Hello World template. You’ll have a rendered MP4 in about ten minutes.

For Hyperframes:

```bash

npx hyperframes init my-video

cd my-video

npx hyperframes preview

```

Same idea. Live preview in the browser, then `npx hyperframes render` to MP4. Needs Node 22+ and FFmpeg installed.

A small honest note to close

If you’re a working developer and you want to ship something this week, Remotion is the safer bet. It has the docs, the showcase, the community.

If you’re tinkering, watching where things are going, or building agent-led pipelines, Hyperframes is the more interesting bet. The MCP support alone is worth a weekend of your time.

Either way, the cost of trying is one `npx` command and an hour. That’s a low enough bar that “I’ll get to it” is no longer a good answer.

Happy rendering.