HyperFrames

Vytvořeno: 2.7.2026 | Aktualizováno: 02.07.2026 11:52

HyperFrames je open-source framework od HeyGenu pro tvorbu videí z HTML/CSS/JS a jejich renderování do MP4. Hodí se hlavně pro automatizovanou tvorbu videí, motion graphics a workflow s AI coding agenty, protože kompozice jsou obyčejné HTML soubory a render běží přes Chrome a FFmpeg.

HyperFrames umožňuje popsat video podobně jako webovou stránku. Místo práce v klasickém timeline editoru se vytvoří HTML kompozice s časovacími atributy, animacemi, médii a zvukem. Framework pak stránku vyrenderuje frame po framu do výsledného videa.

Typické použití:

• produktová promo videa a launch videa,
• vysvětlovací videa z textu, PDF nebo webu,
• animované grafy, mapy a datové vizualizace,
• social videa s titulky, overlayi a hudbou,
• PR / changelog walkthrough videa,
• opakovatelné video pipeline řízené skriptem nebo AI agentem.

Důležitá vlastnost je deterministický render: stejný vstup má produkovat stejné snímky a stejný výstup. To je užitečné pro CI, regresní testy a dávkovou produkci videí.

Video se definuje jako HTML dokument. Prvky ve scéně dostávají atributy jako data-start, data-duration a data-track-index. Animace mohou být napsané přes GSAP, CSS animace, Lottie, Three.js, Anime.js, WAAPI nebo vlastní runtime adaptér.

Zjednodušený příklad kompozice:

<div id="root" data-composition-id="demo"
     data-start="0" data-width="1920" data-height="1080">
 
  <h1 id="title" class="clip"
      data-start="1"
      data-duration="4"
      data-track-index="1">
    Launch day
  </h1>
 
  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
 
    window.__timelines = window.__timelines || {};
    window.__timelines.demo = tl;
  </script>
</div>

Renderovací proces:

1. HyperFrames otevře kompozici v headless Chromu.
2. Prochází video snímek po snímku.
3. Seekuje animace na přesný čas daného framu.
4. Zachytává obraz z prohlížeče.
5. Přes FFmpeg složí výsledné MP4 a případně smíchá audio.

Podle Quickstart dokumentace jsou pro lokální render potřeba hlavně Node.js 22+ a FFmpeg.

Základní workflow:

npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render --output output.mp4

Příkaz preview spustí náhled v prohlížeči s live reloadem. Příkaz render vytvoří výsledné MP4.

HyperFrames tedy není cloudová generativní video služba. Pro běžné použití není potřeba předplatné služby typu Higgsfield — kompozice se renderuje lokálně. Pokud ale video potřebuje AI generované assety, například obrázky, realistické klipy, voiceover nebo hudbu, je potřeba je získat jiným nástrojem a do HyperFrames je vložit jako běžná média.

HyperFrames je navržený jako agent-friendly nástroj. Agentům vyhovuje, že výstupem je obyčejné HTML/CSS/JS a že CLI je možné řídit neinteraktivně přes příkazy a přepínače.

Projekt obsahuje sadu skills pro AI coding agenty:

npx skills add heygen-com/hyperframes

Tyto skills učí agenta produkční smyčku: naplánovat video, napsat validní HTML kompozici, nastavit časování, přidat animace a média, spustit lint, náhled a render. V dokumentaci je jako vstupní skill popsaný /hyperframes, který slouží jako router pro konkrétní typ videa.

Příklady specializovaných workflow skills:

• /product-launch-video — produktové promo nebo launch video,
• /website-to-video — převod webu na video,
• /faceless-explainer — vysvětlující video z textu,
• /pr-to-video — video z GitHub pull requestu,
• /motion-graphics — krátká motion grafika,
• /music-to-video — video synchronizované s hudbou.

HyperFrames má katalog hotových bloků a komponent, které se dají instalovat přes CLI. Jde například o přechody, overlaye, grafy, titulky, mapy a efekty.

Příklad:

npx hyperframes add flash-through-white
npx hyperframes add instagram-follow
npx hyperframes add data-chart

To je užitečné hlavně při opakované tvorbě videí, kde se mají používat stejné vizuální prvky nebo šablony.

HyperFrames vs Remotion je hlavně rozdíl v authoring modelu:

Oba nástroje renderují video přes Chrome a FFmpeg. HyperFrames ale sází na to, že HTML je pro AI agenty i vizuální editory přirozenější zdrojový formát než React komponenty.

Praktický rozdíl je i u animací s vlastním časem, například GSAP. HyperFrames animace zastaví a seekuje na přesný čas framu, takže se dají renderovat frame-accurate. U nástrojů postavených primárně kolem React render cyklu je integrace knihoven s vlastním interním časem složitější.

HyperFrames dává smysl, pokud je cílem:

• generovat videa programově,
• vytvářet videa pomocí AI agenta,
• převádět webový nebo dokumentační obsah do videa,
• připravit šablony pro opakovanou video produkci,
• renderovat motion graphics, titulky, grafy a overlaye,
• provozovat video pipeline lokálně, v Dockeru, CI nebo cloud renderingu.

Naopak to není náhrada klasického video editoru pro ruční střih, color grading nebo komplexní filmovou postprodukci. HyperFrames je spíš renderovací engine a authoring framework pro automatizovanou tvorbu videí.

• Licence projektu je Apache 2.0.
• Lokální render používá Node.js, Chrome/Puppeteer a FFmpeg.
• Pro reprodukovatelné renderování je možné použít Docker.
• Dokumentace zmiňuje i cloudové renderování přes AWS Lambda a další distribuované scénáře.
• Projekt je vhodný hlavně tam, kde se video dá popsat strukturou, šablonou nebo daty.

• GitHub — heygen-com/hyperframes
• HyperFrames — Introduction
• HyperFrames — Quickstart
• HyperFrames — Catalog
• HyperFrames vs Remotion