USE CASE · AI AGENTS

The video pipeline LLMs write first try.

Every other tool asks an agent to write React, TypeScript or a binary timeline. HyperFrames asks for HTML. The success rate on first generation is the difference between a demo and a product.

Open the playground OpenAI / Anthropic integration

HTML is the agent’s native tongue

Trillions of training tokens are HTML. Models produce it accurately, in volume, with self-correcting structure. React, generators, and timeline JSON are all more error-prone.

Deterministic seek = no async surprises

Frames are computed, not played. The renderer sets time, reads pixels, advances. No race conditions, no flaky CI, no “why is this frame black?”

Three surfaces, one engine

Drive HyperFrames from your tool-use loop with the CLI, JSON-RPC, or HTTP — whichever your agent runtime prefers. Progress events stream back so the agent can self-correct.

SAMPLE AGENT LOOP

Claude writes it. HyperFrames lints and renders.

A minimal end-to-end loop: prompt the model, lint the output, render an MP4. Lint catches malformed timing or missing assets before the renderer ever opens Chromium — the agent can read the issues back and self-correct.

agent-render.tsts

// agent-render.ts
import Anthropic from "@anthropic-ai/sdk";
import { renderHtml } from "hyperframes";

const client = new Anthropic();

const SYSTEM = `
You write HyperFrames HTML compositions.
Each scene uses <div data-start="0" data-duration="N">.
Return only HTML. No commentary, no markdown fences.
`;

const draft = await client.messages.create({
  model: "claude-opus-4-7",
  system: SYSTEM,
  max_tokens: 4000,
  messages: [
    { role: "user", content: "A 6-second cinematic title card for 'Northwind 2.0'." },
  ],
});

const html = (draft.content[0] as { text: string }).text;

// Lint before render — catches bad timing, missing assets, malformed HTML.
const { ok, issues } = await renderHtml.lint(html);
if (!ok) throw new Error(issues.join("\n"));

const mp4 = await renderHtml({ html, width: 1920, height: 1080, fps: 30 });
await Bun.write("northwind.mp4", mp4);

FAQ

For builders shipping with LLMs.

Why is HTML better than React for agent-generated video?: LLMs have read more HTML than any other human language. They reliably produce valid, well-structured HTML on the first try. React components, by contrast, depend on hooks, type signatures, and imports the agent rarely sees during a single tool call — failure modes are subtle and silent.
How does HyperFrames stay deterministic?: Compositions are seeked, not played. Given a frame index, the runtime sets every animation, timer, and media element to its corresponding state, then captures a frame. There’s no async, no race conditions, no “works on my machine.”
What is the agent API surface?: Three layers. (1) The CLI: lint, inspect, preview, render — perfect for tool-use loops. (2) JSON-RPC over stdio for tighter integration. (3) HTTP endpoints for hosted environments. All three accept a composition path or inline HTML and return progress events plus an MP4.
Can I use Claude or GPT as the author?: Yes. The /integrations/openai page has prompt patterns for both. The trick is giving the model a strict HTML schema (data-start, data-duration, etc.) and asking it to think first — the success rate is dramatically higher than free-form generation.
How do you prevent prompt-injection from rendering bad video?: Compositions run in headless Chromium with network and filesystem access disabled by default. Even if an upstream LLM is poisoned, the runtime sandbox limits damage to the rendered output — which you can validate via inspect before publishing.

Build the agent. We'll render the video.

Wire HyperFrames into your tool-use loop in under fifty lines.

Open the playground Read agent docs

OpenAI / Anthropic vs Remotion CI rendering

Claude writes it. HyperFrames lints and renders.

agent-render.tsts

// agent-render.ts
import Anthropic from "@anthropic-ai/sdk";
import { renderHtml } from "hyperframes";

const client = new Anthropic();

const SYSTEM = `
You write HyperFrames HTML compositions.
Each scene uses <div data-start="0" data-duration="N">.
Return only HTML. No commentary, no markdown fences.
`;

const draft = await client.messages.create({
  model: "claude-opus-4-7",
  system: SYSTEM,
  max_tokens: 4000,
  messages: [
    { role: "user", content: "A 6-second cinematic title card for 'Northwind 2.0'." },
  ],
});

const html = (draft.content[0] as { text: string }).text;

// Lint before render — catches bad timing, missing assets, malformed HTML.
const { ok, issues } = await renderHtml.lint(html);
if (!ok) throw new Error(issues.join("\n"));

const mp4 = await renderHtml({ html, width: 1920, height: 1080, fps: 30 });
await Bun.write("northwind.mp4", mp4);

For builders shipping with LLMs.

Why is HTML better than React for agent-generated video?

LLMs have read more HTML than any other human language. They reliably produce valid, well-structured HTML on the first try. React components, by contrast, depend on hooks, type signatures, and imports the agent rarely sees during a single tool call — failure modes are subtle and silent.

How does HyperFrames stay deterministic?

Compositions are seeked, not played. Given a frame index, the runtime sets every animation, timer, and media element to its corresponding state, then captures a frame. There’s no async, no race conditions, no “works on my machine.”

What is the agent API surface?

Three layers. (1) The CLI: lint, inspect, preview, render — perfect for tool-use loops. (2) JSON-RPC over stdio for tighter integration. (3) HTTP endpoints for hosted environments. All three accept a composition path or inline HTML and return progress events plus an MP4.

Can I use Claude or GPT as the author?

Yes. The /integrations/openai page has prompt patterns for both. The trick is giving the model a strict HTML schema (data-start, data-duration, etc.) and asking it to think first — the success rate is dramatically higher than free-form generation.

How do you prevent prompt-injection from rendering bad video?

Compositions run in headless Chromium with network and filesystem access disabled by default. Even if an upstream LLM is poisoned, the runtime sandbox limits damage to the rendered output — which you can validate via inspect before publishing.