HyperFrames [Wiki]

Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku.
====== HyperFrames ======

//Vytvořeno: **2.7.2026** | Aktualizováno: **~~LASTMOD~~**//

[[https://github.com/heygen-com/hyperframes|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.

===== Co HyperFrames řeší =====

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í.

===== Jak funguje =====

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:

<code html>
<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>
</code>

Renderovací proces:

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

===== Lokální použití =====

Podle [[https://hyperframes.heygen.com/quickstart|Quickstart dokumentace]] jsou pro lokální render potřeba hlavně Node.js 22+ a FFmpeg.

Základní workflow:

<code bash>
npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render --output output.mp4
</code>

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.

===== Použití s AI agenty =====

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:

<code bash>
npx skills add heygen-com/hyperframes
</code>

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.

===== Katalog bloků =====

HyperFrames má [[https://hyperframes.heygen.com/catalog/blocks/data-chart|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:

<code bash>
npx hyperframes add flash-through-white
npx hyperframes add instagram-follow
npx hyperframes add data-chart
</code>

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 =====

[[https://hyperframes.heygen.com/guides/hyperframes-vs-remotion|HyperFrames vs Remotion]] je hlavně rozdíl v authoring modelu:

^ Nástroj ^ Způsob tvorby ^ Typická výhoda ^
| HyperFrames | HTML + CSS + JavaScript | Snadné generování AI agentem, práce bez Reactu, přímé použití webových animací |
| Remotion | React / TSX | Výhodné pro týmy s existujícím React design systémem |

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ší.

===== Kdy HyperFrames použít =====

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í.

===== Poznámky =====

  * 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.

===== Zdroje =====

  * [[https://github.com/heygen-com/hyperframes|GitHub — heygen-com/hyperframes]]
  * [[https://hyperframes.heygen.com/introduction|HyperFrames — Introduction]]
  * [[https://hyperframes.heygen.com/quickstart|HyperFrames — Quickstart]]
  * [[https://hyperframes.heygen.com/catalog/blocks/data-chart|HyperFrames — Catalog]]
  * [[https://hyperframes.heygen.com/guides/hyperframes-vs-remotion|HyperFrames vs Remotion]]