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

Launch day

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: 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. ===== 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: 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. ===== 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: 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 ===== [[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]]