tools/integrations/hyperframes.md
Open-source programmatic video framework from HeyGen. Create videos from HTML/CSS/JS — no React, no proprietary DSL. Designed for AI agent workflows.
| Integration | Available | Notes |
|---|---|---|
| API | - | Library, not a hosted service |
| MCP | - | - |
| CLI | Yes | npx hyperframes render |
| SDK | Yes | Node.js/TypeScript package |
npm install hyperframes
Requires: Node.js 22+, Chrome/Chromium (for rendering)
import { render } from "hyperframes";
await render({
frames: [
{
html: `
<div style="display:flex; align-items:center; justify-content:center;
height:100%; background:#000; color:#fff; font-family:system-ui;">
<h1 style="font-size:64px;">Welcome to Acme</h1>
</div>
`,
duration: 3,
},
{
html: `
<div style="display:flex; flex-direction:column; align-items:center;
justify-content:center; height:100%; background:#000; color:#fff;
font-family:system-ui;">
<h2 style="font-size:48px;">Ship faster with AI</h2>
<p style="font-size:24px; color:#888;">Try it free today</p>
</div>
`,
duration: 3,
},
],
output: "intro.mp4",
width: 1080,
height: 1920, // 9:16 vertical
fps: 30,
});
Each frame is an HTML document rendered at a specific point in the timeline. Think of it as a slide with a duration.
{
html: "<div>...</div>", // Full HTML content
duration: 3, // Seconds to display
css?: "body { ... }", // Optional external CSS
}
CSS transitions and animations work between frames:
<div style="animation: fadeIn 0.5s ease-in;">
<h1>Slide In</h1>
</div>
<style>
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
Generate frames from data for batch production:
const features = ["Analytics", "Automation", "AI Insights"];
const frames = features.map((feature) => ({
html: `
<div style="display:flex; align-items:center; justify-content:center;
height:100%; background:linear-gradient(135deg, #667eea, #764ba2);
color:#fff; font-family:system-ui;">
<h1 style="font-size:56px;">${feature}</h1>
</div>
`,
duration: 2.5,
}));
await render({ frames, output: "features.mp4", width: 1080, height: 1920 });
const frames = [
{ html: hookSlide("Something new is here"), duration: 2 },
{ html: featureSlide(title, description, screenshot), duration: 4 },
{ html: ctaSlide("Try it free →", url), duration: 3 },
];
const frames = [
{ html: quoteSlide(testimonial.text), duration: 4 },
{ html: attributionSlide(testimonial.author, testimonial.company), duration: 2 },
{ html: ctaSlide("Join 1,000+ happy customers"), duration: 3 },
];
const metrics = [
{ label: "Users", value: "10,000+" },
{ label: "Uptime", value: "99.9%" },
{ label: "NPS", value: "72" },
];
const frames = metrics.map(m => ({
html: metricSlide(m.label, m.value),
duration: 2.5,
}));
| Platform | Width | Height | Ratio |
|---|---|---|---|
| TikTok/Reels/Shorts | 1080 | 1920 | 9:16 |
| YouTube | 1920 | 1080 | 16:9 |
| Instagram Feed | 1080 | 1080 | 1:1 |
| Instagram Feed | 1080 | 1350 | 4:5 |
| Factor | Hyperframes | Remotion |
|---|---|---|
| Language | HTML/CSS/JS | React/TypeScript |
| Agent compatibility | Better (plain HTML) | Good (needs React knowledge) |
| Animation | CSS transitions/keyframes | Spring physics, interpolation |
| Cloud rendering | Not built-in | Lambda (AWS) |
| License | Apache 2.0 (free) | Company license for commercial use |
| Ecosystem | New, growing | Mature, large community |
Use Hyperframes when: AI agent is generating the video, simple animations, batch templated content, cost-sensitive.
Use Remotion when: Complex animations needed, already using React, need Lambda for massive scale, want larger ecosystem.