O produkte Animro
Animro je AI štúdio na motion design. Opíšete video a pridáte logo, screenshoty, písma alebo hudbu. Animro naplánuje scény, postaví animáciu a pridá hovorený komentár, hudbu, zvukové efekty a titulky. Plán schvaľujete skôr, než sa čokoľvek postaví, a o zmeny žiadate bežnými slovami.
Motion design videá, napríklad videá k spusteniu produktu, explainery, reklamy na sociálne siete či príbehy zákazníkov, zvyčajne potrebujú dizajnéra, animátora a niekoľko kôl úprav. Animro sa postará o plán, animáciu aj zvuk. Každé rozhodnutie však nechá na človeku, ktorý napísal brief.
Animro je náš vlastný produkt, nie projekt pre klienta. Beží na animro.com, kde sa môžete zapísať na čakaciu listinu.
Snímky obrazovky nižšie pochádzajú z fungujúcej aplikácie. Značka na nich, Routa a jej zákazník Northway Couriers, je vymyslená, rovnako ako ukážky na animro.com.
Čo sme postavili
- Webové štúdio, v ktorom je každé video jedna konverzácia: brief, storyboard, styleframy, návrhy a finálny render
- AI motion dizajnéra, ktorý každé video napíše ako kód, sám si vyrenderuje zábery a skontroluje ich, kým vám odpovie
- Vlastný video engine: runtime v prehliadači, renderer postavený na Playwrighte a FFmpeg a prehrávač náhľadov, bez cudzieho video frameworku
- Hovorený komentár, hudbu a zvukové efekty cez ElevenLabs a titulky načasované podľa komentára
- Brand kity pre firmy a agentúry, ktoré vytvoríte z webu alebo z PDF manuálu značky
- Kredity a platby cez Stripe, čakaciu listinu s potvrdením cez e-mail a knižnicu obsahu pre vyhľadávače
Brief: opíšte video ako dizajnérovi
- Dva spôsoby, ako začať: voľný text alebo sprievodca, ktorý kladie otázky s možnosťami a pri každej vám dovolí nechať rozhodnutie na Animro
- Priložiť môžete prezentáciu v PDF. Animro prečíta jej strany a predvyplní odpovede, ktoré v nej nájde, aj s číslom strany.
- Formát (16:9, 9:16, 1:1, 4:5 alebo 21:9), dĺžku, hlas, titulky, hudbu, zvukové efekty a jazyk nastavíte na jednej obrazovke
- Tri úrovne kreatívneho spracovania: Lite, Medium a Full. Vyššie úrovne skúšajú viac konceptov, robia viac kôl kontroly a pridávajú nezávislých kritikov.
- Voliteľný prieskum webu: agent si pred plánovaním prečíta web firmy
Storyboard: plán schválite skôr, než sa čokoľvek postaví
Prvá odpoveď je karta so storyboardom. Ukazuje zvolený kreatívny smer, čím video zaujme na začiatku, ako skončí, pravidlá vkusu, farebnú paletu a náladu hudby. Pri každej scéne je jej účel, text na obrazovke, veta komentára, vizuál, zvukové efekty a prechod do ďalšej scény.
Storyboard môžete upraviť, požiadať o zmeny alebo ho schváliť. Karta ukáže cenu animácie ešte pred kliknutím a animácia sa účtuje, až keď je hotový prvý návrh.
Styleframy: vzhľad skontrolujete, kým sa niečo pohne
- Jeden skutočný záber na každú scénu, vyrenderovaný z kódu scény v jej kľúčovom momente, nie maketa
- Ktorýkoľvek záber označíte špendlíkmi, rámčekmi, perom a šípkami, každú značku s vlastným komentárom
- Agent dostane presnú informáciu, ktorého záberu, scény, času a miesta sa poznámka týka
- Najviac šesť kôl na video, v cene animácie
Návrhy: pozriete, okomentujete, upravíte
- Každá animácia aj úprava vytvorí návrh, ktorý sa hneď prehrá v prehliadači, bez čakania na render na serveri
- Zábery scén pod prehrávačom preskočia na danú scénu. Video zastavíte na ľubovoľnej snímke a môžete ju okomentovať.
- Každá úprava je nová verzia. Prepínate medzi v1, v2 a v3 alebo obnovíte staršiu.
- O zmeny požiadate bežnou vetou: „Nechaj −31 % o chvíľu dlhšie a trasu dokresli do loga.“
- Notifikácie v prehliadači oznámia, keď je hotový storyboard, návrh alebo finálne video. Kým agent pracuje, kartu môžete zavrieť.
Finálny render: štúdiová kvalita s automatickými kontrolami
Keď návrh sedí, tlačidlo Render final ho vyrenderuje znova v štúdiovej kvalite a pred stiahnutím spustí všetky kontroly.
- Rozmazanie pohybom z viacerých vzoriek na snímku a H.264 master označený tak, aby sa farby zobrazili správne, k tomu verzia na web, náhľadový obrázok a súbor s titulkami
- Automatické kontroly kontrastu textu, času na prečítanie, titulkov, blikania, pozerania bez zvuku a hlasitosti
- Nezávislá kontrola podpíše presne tie súbory, ktoré dostanete. Bez podpisu sa nič nezabalí.
- Neúspešný finálny render nič nestojí
- Renderuje sa na grafických kartách NVIDIA L4 v Modale, záložne na procesoroch v sandboxoch Vercelu. 15-sekundové video so 60 snímkami za sekundu (900 snímok) sa so všetkými kontrolami vyrenderuje na GPU asi za 6 minút. Na procesore tá istá úloha narazila na 15-minútový limit.
Brand kity pre firmy a agentúry
- Jeden kit obsahuje logá, farby, písma, pravidlá pre texty, hlas, hudbu, zvukové logo, výslovnosť a predvolené nastavenia videa
- Osobné a tímové pracovné priestory. Agentúra si vedie jeden kit pre každého klienta a pozve doň kolegov.
- Kit vytvoríte z webu alebo z PDF manuálu značky. Animro z neho vytiahne farby, písma a logá a označí, čo treba ešte skontrolovať.
- Kit nie je len odporúčanie: ak farby alebo písma nesedia s kitom, video neprejde kontrolou, pokiaľ si výnimku nevyžiadal sám používateľ
- Slovník výslovnosti zabezpečí, že komentár vysloví názvy značky a produktov správne
- Každé video si drží verziu kitu, s ktorou začalo. Úprava kitu nikdy nezmení rozpracované video.
Ako to funguje
- Agent. Každý chat dostane vlastný izolovaný sandbox v cloude na Claude Managed Agents, s Node, Chromiom a FFmpeg. Agent video napíše, vyrenderuje zábery a sám si ich pozrie.
- Návody. Agenta vedie deväť produkčných návodov (skills): kreatívny smer, motion dizajn, Canvas a shadery, Three.js, zvuk, podklady značky, produkcia scén, runtime a kontrola kvality.
- Video je kód. Scény sa kreslia cez Canvas2D, WebGL a Three.js a každá snímka sa vypočíta z času. Návrh v prehliadači a finálny render sa preto zhodujú snímka po snímke.
- Vlastná kontrola. Kým odpovie, agent skontroluje typy, časovanie a to, či sa každá snímka vyrenderuje vždy rovnako. Vyrenderuje si prehľad vlastných záberov a opraví, čo nájde.
- Kredity. Pri každom kroku sa kredity rezervujú a strhnú sa, až keď krok niečo dodá. Zastavený krok stojí malú časť ceny, neúspešný nič.
Technológie
Next.js 16 s Reactom 19 a Tailwindom na Verceli, Supabase (prihlasovanie a Postgres so zabezpečením na úrovni riadkov), Drizzle, Cloudflare R2, Claude Managed Agents, ElevenLabs, Playwright, FFmpeg, Three.js, Modal, Vercel Sandbox, Stripe so Stripe Tax, Resend a Cloudflare Turnstile.
Ako to vznikalo
Produktový plán sme napísali 26. septembra 2026. Prvú verziu sme nasadili hneď na druhý deň a 29. septembra sa spustil web animro.com. Popri tom sme navrhli značku (päť konceptov loga, jeden sme vybrali), landing page s dvanástimi ukážkovými videami a minútovým videom k spusteniu a čakaciu listinu.
Dnes kód tvorí webová aplikácia a 11 balíkov, približne 130 000 riadkov TypeScriptu vrátane testov. End-to-end test prejde celý postup: prihlásenie, brief, storyboard, styleframy, návrh, finálny render a stiahnutie MP4.
