marketingskills/tools/integrations/hyperframes.md

Hyperframes

Open-source programmatic video framework from HeyGen. Create videos from HTML/CSS/JS — no React, no proprietary DSL. Designed for AI agent workflows.

Capabilities

Integration	Available	Notes
API	-	Library, not a hosted service
MCP	-	-
CLI	Yes	npx hyperframes render
SDK	Yes	Node.js/TypeScript package

Why Hyperframes

• LLM-native: AI models generate better HTML than React components — plain web standards, no framework DSL
• Deterministic: Same input always produces identical output (ideal for automation)
• Open source: Apache 2.0 license, zero per-render fees
• Agent-friendly: Any coding agent that can write HTML can create videos

Install

npm install hyperframes

Requires: Node.js 22+, Chrome/Chromium (for rendering)

Quick Start

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,
});

Core Concepts

Frames

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
}

Transitions

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>

Data-Driven Videos

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 });

Common Marketing Templates

Product Announcement

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 },
];

Testimonial Video

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 },
];

Stats/Metrics Video

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,
}));

Aspect Ratios

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

Hyperframes vs. Remotion

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.

Relevant Skills

• video
• social
• ad-creative