AI video z kódu: jak postavit motion design s agentem

AI video z kódu vytvoříte tak, že agenta necháte napsat program, ne video. Postup: sepište produkční brief s reálnými podklady, agent v terminálu napíše animaci řízenou časem, headless prohlížeč z ní vyfotí snímky a ffmpeg je složí. Model pak vlastní snímky zkontroluje a opraví.

Proč AI video z kódu nevzniká z jednoho promptu?

Popisek „jeden prompt“ skrývá dlouhý brief, připravené nástroje a hodiny autonomní práce agenta. Anthropic vydal Claude Opus 5.5 22. září 2026 a během několika hodin se sítě zaplnily launch filmy a showreely vyrenderovanými z kódu.

Autor podrobného rozboru těchto videí podle svého zjištění došel k tomu, že několik z nich opravdu začalo zadáním o 30 slovech. Ta nejlepší ale ne. Podle něj za nimi stál brief o 9 500 až 19 000 znacích, složka se skills, dva API klíče a běh trvající až 12 hodin bez jediného zásahu v chatu.

Stejně je to u nejsdílenějších příkladů, které podle autora rozboru vypadaly takto: UI morph postavený na XML specifikaci nasbíral 907 tisíc zhlédnutí, akvarelový kraťas potřeboval 163 volání modelu a téměř 7 hodin práce. Tony Dinh podle něj vytvořil promo pro TypingMind za méně než 30 minut, zatímco o rok dříve ho podobné video stálo zhruba 1 200 USD. Agent ovšem dostal URL produktu, pokyn použít skutečné screenshoty, logo a hudbu.

Model, na kterém tato videa běží, je stavěný na dlouhé agentické úlohy:

AI video z kódu je tedy řemeslo s postupem, který jde zopakovat. Výsledek nezávisí na šťastném promptu, ale na briefu, podkladech a kontrolní smyčce.

Jak agent skládá video z kódu, prohlížeče a ffmpeg?

Agent napíše webovou stránku s funkcí seek(t), prohlížeč ji snímek po snímku vyfotí a ffmpeg snímky zakóduje do videa. Opus 5.5 sám MP4 vydat neumí.

Co je funkce seek(t)

Nic neběží na časovači. Snímek 240 jde proto vykreslit samostatně, bez přehrání snímků 0 až 239. Když titulek naskočí příliš brzy, změníte jedno číslo a vyrenderujete jen dotčený úsek. U klipu o délce 15 sekund při 60 fps zavolá headless Chromium přes Playwright funkci 900krát (15 × 60). Tomu odpovídá i pojem programatické video: obraz je výstupem čisté funkce času.

flowchart LR
  A["Brief a podklady"] --> B["Agent píše kód"]
  B --> C["index.html se seek(t)"]
  C --> D["Playwright a Chromium"]
  D --> E["Snímky PNG"]
  E --> F["ffmpeg"]
  F --> G["Video MP4"]
  E --> H["Kontrola snímků"]
  H --> B

V praxi vypadá Playwright ffmpeg video jako krátký renderovací skript:

import { chromium } from "playwright";

const FPS = 60;
const DURATION = 15; // 15 s × 60 fps = 900 snímků
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
await page.goto(`file://${process.cwd()}/index.html`);
// Bez načtených fontů by první snímky měly jiné písmo
await page.evaluate(() => document.fonts.ready.then(() => true));

for (let n = 0; n < FPS * DURATION; n++) {
  const t = n / FPS; // čas odvozený z čísla snímku, ne z hodin
  await page.evaluate((time) => (window as any).seek(time), t);
  await page.screenshot({ path: `frames/${String(n).padStart(4, "0")}.png` });
}
await browser.close();
// Složení: ffmpeg -framerate 60 -i frames/%04d.png -c:v libx264 -pix_fmt yuv420p out.mp4

Co potřebuje stanice: Node, ffmpeg, Playwright, CLAUDE.md

Chatová aplikace animaci napíše, ale nevyrenderuje ji, neposlechne si ji a neprohlédne si vlastní snímky. Proto Claude Code video vzniká v terminálu, kde agent má shell a tuto zpětnou vazbu sám uzavře. Jde o typický single agent loop: jeden agent střídá psaní, spouštění a kontrolu. Kdy takový návrh stačí a kdy se vyplatí subagenti, rozebíráme v článku o tom, kdy použít single agent loop.

Jak má vypadat brief pro AI video jako produkční dokument?

Brief musí rozhodnout vše, co jinak model doplní nejbezpečnější šablonou. Z vágního „udělej skvělé produktové video“ vznikne vystředěný titulek na gradientu, protože model každé nevyplněné rozhodnutí obsadí výchozí volbou.

Funguje struktura o pěti blocích. Rozhodující je tvrdá hranice: agent nesmí vymýšlet obrazovky produktu ani metriky.

FILM       jedna věta, kterou si divák odnese; publikum, délka, formáty
ASSETS     skutečné logo, screenshoty UI, fonty a barvy značky, zvuk
VISUAL     co převzít z reference, kterým klišé se vyhnout
HARD LINE  nikdy nevymýšlet obrazovky produktu ani čísla
DELIVER    storyboard, kontaktní list, finální video, plakátový snímek, zdroj

Pravidla, která se opakují u každého filmu, patří do znovupoužitelných dovedností. Podobný princip ukazují skills pro Claude Code zaměřené na marketing.

Referenční snímek a stavový seznam

Reference předá tempo, typografii a přechody najednou. Může to být jeden snímek, krátký klip, který agent rozřeže přes ffmpeg, nebo složka vlastní starší práce. Přebírá se vizuální gramatika, ne obsah, tedy ne loga, texty ani motivy cizího videa.

Storyboard pak nepopisuje efekty, ale co divák v každé sekundě ví. Každý beat má vstupní stav, výstupní stav a důvod existence.

Pružiny a zvuk na jednom čase

Pevná easingová křivka jen přesune prvek z bodu A do bodu B. Pohyb s hmotností zrychlí, lehce přestřelí a usadí se. Pružiny v uzavřeném tvaru zůstávají čistou funkcí času: když hodnota mění cíl vícekrát, sečte se jedna pružina na každou změnu a seek(t) zůstane deterministický.

Zvuk běží na stejném časovém kódu jako obraz. Buď ho agent syntetizuje v kódu, nebo nejdřív změří dodanou skladbu knihovnou librosa a změny stavů položí na doby taktu.

Jak model sám kritizuje své snímky a ukládá postup do skillu

Opus 5.5 čte obrázky, takže může hodnotit to, co právě vyrenderoval. Videa, která se nejvíc šířila, měla tuto kontrolní smyčku společnou. Místo opakovaného sledování celého exportu nechte ffmpeg připravit důkazy a agentovi dejte úkol s jasnými kritérii:

1. Agent vyrenderuje jeden snímek na beat a složí z nich kontaktní list.
2. Hodnotí jen vyrenderované snímky, ne svůj záměr: hook, čitelnost na mobilu, pohyb, sladění se zvukem, věrnost značce.
3. Vypíše tři nejhorší chyby s časovou značkou a návrhem lokální opravy.
4. Opraví jen dotčené sekundy a znovu je vyrenderuje.
5. Smyčku opakuje, dokud všechna kritéria nedosáhnou dohodnuté hranice.

Pravidlo patří do CLAUDE.md jako povinnost před jakoukoli ukázkou výsledku. Agent pak kontrolu neobejde ani v dlouhém nočním běhu.

Hotovou pipeline, tedy renderer, syntézu zvuku, export a pravidla, lze zabalit do skillu. Další film je pak jeden příkaz s URL produktu, délkou a referencí. Rob Hallam podle zdroje získal druhé video rychleji, protože renderer a export už existovaly. Doporučujeme držet jednu session nebo jeden skill na značku, aby se pravidla jedné identity nemíchala s druhou.

Pro týmy, které chtějí podobné smyčky používat soustavně, je to otázka zavedení AI ve vývojovém procesu a sdílených pravidel. Nasazení mimo marketing, například pro generování dokumentace nebo reportů, řešíme v rámci služby AI agenti a automatizace.

Kolik stojí vícehodinová smyčka s Claude Opus 5.5?

Hodina práce agenta stojí podle objemu tokenů od desítek centů po desítky dolarů; rozhoduje, kolik kontextu se v každé iteraci znovu posílá. Opus 5.5 má podle ceníku Anthropic cenu 4 USD za milion vstupních a 20 USD za milion výstupních tokenů, čtení z cache stojí 0,20 USD a batch zpracování má slevu 50 %.

Pro přímé API platí jednoduchý vzorec, kde I a O jsou miliony vstupních a výstupních tokenů: C = 4I + 20O. S cache se vstup rozdělí na nový a opakovaný: C = 4I_nové + 0,20I_cache + 20O.

Výpočet vychází z cen v dokumentaci Anthropic, která uvádí i příklad hodinové relace za 0,58 USD včetně 0,08 USD za runtime spravovaného agenta.

Hlavní zdroj nákladů není render. Každá iterace znovu posílá zdrojové soubory, screenshoty, logy a chybové výpisy, takže kumulace kontextu roste rychleji než počet změn. Ceny režimů xhigh a max Anthropic nestanovuje jako pevnou přirážku – vyšší úsilí znamená víc tokenů a iterací, proto je potřeba změřit vlastní běh. K tokenům připočtěte runtime, úložiště snímků a čas ffmpeg.

Deterministický render a kdy sáhnout po Remotion

Deterministický render znamená, že stejný zdroj dá stejné snímky na jakémkoli stroji vaší pipeline. Playwright sám to nezaručí, protože výsledek ovlivňuje verze prohlížeče, operační systém, fonty i GPU.

Kontrolní seznam renderu

I s tímto seznamem nemusí být výstup bitově shodný mezi různými OS a GPU. Antialiasing textu nebo kompozice vrstev se mohou lišit. Spolehlivě jde zaručit časovou shodu a při stejném prostředí i shodu vizuální.

Remotion, Motion Canvas, Revideo

Frameworky dávají čas jako explicitní vstup animace. Remotion je podle dokumentace React framework, v němž komponenta dostane číslo snímku a podle něj vykreslí obraz; při práci s videem získává přesný snímek zdrojového záznamu.

Srovnání principů Remotion vychází z jeho dokumentace; u ostatních nástrojů jde o obecný popis jejich zaměření.

Náš úsudek: čistý Playwright je nejrychlejší cesta od briefu k prvnímu videu. Pro produkci, kde se video bude upravovat a generovat ve variantách, doporučujeme pojmenovat framework hned v CLAUDE.md, typicky Remotion pro týmy, které už píší v Reactu.

Kde metoda končí

Pro organický pohyb zůstává lepší natočený materiál nebo generativní video model; AI-generated motion graphics z kódu je stylizovaná disciplína. Katalog What Ships slouží jen jako ukázka trhu s launch videi. Nedokládá, jakým postupem tato videa vznikla.

Časté otázky

Umí Claude Opus 5.5 vytvořit video přímo jako MP4?

Ne. Opus 5.5 píše kód, nejčastěji webovou stránku s funkcí seek(t), která vykreslí obraz pro zadaný čas. Video z toho vznikne až mimo model: headless prohlížeč, typicky Chromium ovládaný přes Playwright, pořídí jednotlivé snímky a ffmpeg je zakóduje do MP4. Model tedy dodává program a renderovací pipeline dělá zbytek. Výhodou je, že úpravu jednoho záběru provedete změnou čísla v kódu.

Stačí na programatické video běžný chat, nebo je nutný Claude Code?

Chat animační kód napíše, ale výsledek neuvidí. Kvalitu virových videí dělá zpětná vazba: agent v terminálu kód spustí, vyrenderuje snímky, prohlédne si je, poslechne zvuk a opraví chyby. To umí nástroj se shellem, například Claude Code. V chatu byste renderovali a popisovali chyby ručně, což je pomalé a výsledek bývá průměrný. Pro první pokus proto doporučujeme rovnou terminálového agenta.

Hodí se tento postup pro fotorealistické scény a postavy?

Spíš ne. Webový renderer přesně opakuje pravidla, která mu kód zadá, ale sám nevytvoří věrohodnou anatomii, vlasy, kouř nebo plynulý lidský pohyb. Na fotorealismus a organický pohyb jsou vhodnější natočené záběry nebo generativní video modely. Kód vyniká u typografie, rozhraní, grafů a launch videí. Kombinace je možná: generativní model vytvoří podklad a kód nad ním vykreslí grafickou vrstvu.

Jak zabránit tomu, aby AI vymýšlela obrazovky produktu a čísla?

Dejte do briefu výslovné pravidlo, že agent nesmí vymýšlet obrazovky ani metriky, a dodejte skutečné screenshoty, logo a fonty. Stejné pravidlo zapište do CLAUDE.md, aby platilo v každém běhu. Agent má mít pokyn zastavit se a zeptat se, když podklad chybí. Před renderem si projděte seznam podkladů, které agent sám stáhl z webu, a schvalte ho jako první bránu.