Ołówek zamiast tuszu i nasze własne twarze: jak przerobiliśmy filmy reklamowe AI Budżet

Dwa dni temu opisaliśmy, jak renderujemy reklamy AI Budżet w kodzie: rolki ze zrzutów ekranu składane w Pythonie i 30-sekundowe filmy na Canvas 2D z syntetyzowaną muzyką, które piszą agenci Claude Code. To jest ciąg dalszy i dotyczy dwóch zmian. Filmy dostały drugi styl domowy — ołówek na papierze zamiast kreskówki rysowanej tuszem — a film o długach dostał nową obsadę: zamiast dwóch wymyślonych facetów w barze w kadrze są teraz karykatury prawdziwych ludzi, zaczynając ode mnie. Poniżej: co nas do tego skłoniło, co wzięliśmy z cudzej metodyki, ile kosztuje w kodzie wygląd ołówka, jak HyperFrames poradził sobie na laptopie z Windows i dlaczego jedno dziecko w kadrze wyprowadziło całą scenę z baru.

Po co druga część

Najpierw — skąd w ogóle ten pomysł. Filmy rysowane w całości kodem zaczęły się od wpisu Kevina Ngo „The life of a fruit fly” na X z 15 września 2026 roku: krótkiego filmu o życiu muszki owocówki, w którym każdą klatkę narysował program. Zainspirowany nim Dean Kuhn zbudował otwarty skill dla agentów procedural-film (licencja MIT) — i na nim stoi nasz potok filmów z pierwszej części.

Zaraz po pierwszej części trafiła do nas metodyka «Мультики кодом на Opus 5.5» („Kreskówki kodem na Opus 5.5”) — rosyjskojęzyczny poradnik, który kanał YouTube „Produktywna Rada” (Продуктивный Совет) przygotował do swojego filmu „Mój osobisty animator na Opus 5.5: kreskówki bez ani jednej klatki rysowanej ręcznie”. Dobra okazja, żeby sprawdzić własny proces według cudzej listy kontrolnej, a nie według własnej pamięci.

Pierwsza połowa audytu uspokajała. Większość poradnika to po prostu to, jak już pracujemy: rysunek jest kodem (JavaScript na canvasie), rysunki trzymane są „na dwójkach” — 12 rysunków na sekundę przy 24 fps — linie „gotują się” dzięki generatorowi liczb losowych z ziarnem, są szrafowania i linie konstrukcyjne, dźwięk jest syntetyzowany, a jego zdarzenia widać w kadrze, kolejność pracy to scenorys → sceny → sprawdzanie klatek → dźwięk → render, wyrenderowane klatki oglądają agenci-krytycy, a styl żyje w skillu.

Trzy rzeczy robimy ponad to, czego wymaga poradnik. Bramkę sześciu kontroli, w tym determinizmu, przez którą musi przejść każdy film (opisaliśmy ją w pierwszej części). Wspólny moduł postaci, dzięki któremu bohater rysowany przez dwunastu równoległych agentów scen pozostaje tym samym bohaterem w każdym ujęciu. I sprawdzanie faktów: każde twierdzenie, które film pokazuje na ekranie, porównujemy z kodem i wiki produktu.

Druga połowa była mniej przyjemna. Brakowało czterech rzeczy: narastającej listy pułapek w samym skillu, jawnych reguł opowieści, prawdziwego wyglądu ołówka z paletami zdefiniowanymi jako role oraz renderera HyperFrames. Pierwsze trzy przejęliśmy, czwarty wypróbowaliśmy.

Plik pułapek i cztery reguły opowieści

Przy pięciu filmach za niektóre lekcje zapłaciliśmy dwa razy, bo żyły w transkryptach sesji, a nie w skillu. Poprawka (commit ABA-632 w repozytorium produktu) jest celowo nudna: plik PITFALLS.md z 32 wierszami „objaw → przyczyna i poprawka”, zebranymi ze wszystkich pięciu filmów. Agent czyta go na początku każdego filmu i dopisuje do niego po oddaniu. Kilka wierszy dla smaku.

Zdarzenia, które nie mieszczą się w swoim oknie. Scenorys prosi o N zdarzeń „na ósemki” i nikt nie sprawdza, czy N ósemek faktycznie mieści się w czasie, który ma ujęcie. Teraz liczy się to, zanim scena zostanie napisana.

Kluczowy chip wysokości 13–16 px na telefonie. Chip statusu, dla którego istnieje całe ujęcie, jest doskonale czytelny w kadrze o szerokości 1080 pikseli i nieczytelny na prawdziwym telefonie. Poprawka to lupa nad chipem.

Ogonek dymka przez twarz. Ogonek wskazuje mówiącego, a prosta od dymka do ust przypadkiem przecina twarz innej postaci.

Ścieżki Windows zjedzone przez znaki ucieczki. Ścieżka D:\Work\tools\films wklejona do napisu w JavaScripcie zamieniła się w D:\Work, tabulator, „ools”, wysuw strony i „ilms” — bo \t i \f to sekwencje specjalne.

Push z tekstem „50 PLN”. Powiadomienie w filmie mówi „50 PLN”, a nie „50 zł”. W polskim filmie wygląda to dziwnie, ale dokładnie to wysyła prawdziwa aplikacja, a film pokazuje produkt takim, jaki jest.

Reguły opowieści to cztery linijki. Jeden zwrot akcji, w 35–45 % długości. Ostatnie ~3 sekundy to statyczny plakat. Klatka 0 nigdy nie jest pusta. Do 15 sekund — jedna scena, od 20 sekund — sceny łączone w łańcuch. Nic nowego dla nikogo, kto montuje wideo, ale zapisane w skillu przestaje być kwestią gustu w każdej sesji z osobna.

Zestaw ołówkowy

Drugi styl domowy to osobny zestaw, pencil-film. „Ołówek” okazał się nie teksturą, lecz listą drobnych, konkretnych nawyków. Ołówek odrywa się od papieru. Zamknięty kontur przeskakuje własny początek — tak jak ręka domyka koło. Obok głównej linii biegnie drugie, cieńsze przejście szkicowe. Sama linia to zwężająca się wstęga z ziarnem. Cienie to szrafowanie na jasnym papierze, a nie wypełnienie. Są ślady gumki i na wpół wytarte linie-duchy, a linie konstrukcyjne gasną, gdy rysunek jest już na miejscu.

Kolor określa rola, nie wartość. Scena nigdy nie prosi o „pomarańczowy” — rysuje „linią”, „miękkim”, „akcentem” i „ciepłym”, a motyw przypisuje tym rolom kolory. Motywów jest sześć — notebook, kraft, chalk, blueprint, neon i mystic — a przełączenie między nimi to jedno wywołanie.

Najbardziej lubimy pismo odręczne. Tekst nie jest składany odręcznym fontem, tylko pisany: kreska po kresce, z widocznym ruchem ołówka. To wymaga fontów jednokreskowych, w których każda litera jest ścieżką dla pióra, a nie konturem do wypełnienia, więc sięgnęliśmy po fonty Hershey z domeny publicznej, pochodzące z amerykańskiego Narodowego Biura Standardów (NBS) — Script 1-stroke i Sans 1-stroke. Polskich liter w nich nie ma, więc ą ę ć ń ó ś ź ż ł składamy z glifu bazowego i kreski znaku, pisanej w tym samym przejściu. Jedną literę narysowaliśmy ręcznie: oryginalne pisane „z” ma pętlę w dół i w „zł” czytało się jak „ʒł”. Nowe „z” pętli nie ma.

Do dużych tytułów na plakacie zostawiliśmy Caveat (font na licencji OFL) — tam font konturowy po prostu wygląda lepiej. Na plakat nakładamy prawdziwą ikonę aplikacji w PNG, a nie jej rysowaną imitację. A nowy projekt to jedno polecenie: new-film.cjs <slug> --theme notebook --seconds 12.

HyperFrames — uczciwie

HyperFrames to konsolowy renderer od HeyGen (pakiet npm hyperframes, przypięty w wersji 0.8.111). Przewija klatka po klatce zatrzymaną oś czasu GSAP i robi zrzuty strony, a nasz canvas po prostu rysuje według podanego czasu — dokładnie zgodnie z naszym kontraktem sceny.

Poradnik obiecywał 11–15 sekund renderu na 12 sekund wideo na MacBooku z M3. Na naszym laptopie z Windows wyszło około 80 sekund: przechwytywanie zrzutów idzie z prędkością około 8 klatek na sekundę, do tego kodowanie. Z -q standard -w 6 zeszliśmy do ~45 sekund; mniej workerów oznaczało wolniej, a nie szybciej. Nie jest więc szybszy od naszego własnego renderera na Playwright + ffmpeg. Jest za to dobrym narzędziem: lint, check, snapshoty, arkusze kontaktowe i miksowanie dźwięku są w zestawie.

Jedną pułapkę warto znać. snapshot --at zaokrągla czas do 30 fps. Dlatego nasze zdarzenie w 13,25 s wymaga --at 13.29, żeby zobaczyć rysunek, który naprawdę jest wtedy na ekranie.

Nasze własne twarze

Pierwsze prawdziwe zadanie styl ołówkowy dostał przy filmie o długach — „Oddam piętnastego”. Fabuła się nie zmieniła: kumpel pożycza 50 zł „do piętnastego”, a aplikacja przypomina wierzycielowi trzy dni przed terminem i dzień po nim. Tylko jemu — nigdy dłużnikowi. Zmieniło się to, kto jest w kadrze. Wierzyciel to teraz karykatura mnie, Michała, a dłużniczka „do piętnastego” to Kasia, karykatura mojej żony. Jest też krótki występ naszego syna.

Metoda to arkusz podobieństwa: zdjęcie referencyjne obok rysunku plus twarz w kilku minach. Zdjęcie istnieje tylko na arkuszu i nigdy nie trafia do filmu. Reszta to informacja zwrotna od człowieka w krótkich rundach — warto je wymienić, bo właśnie tam poszedł czas.

Broda przeszła drogę od plamistego wypełnienia „żwirem” do ołówkowego szrafowania zgodnego z kierunkiem wzrostu włosów. Potem stała się krótsza i schludniejsza, z osobnymi, niewielkimi wąsami. Szerokość twarzy zmieniała się tam i z powrotem więcej niż raz. Oczy stały się brązowe, a potem nieco węższe.

Najdłużej powstawały włosy Kasi. Pierwsza wersja to gęsta „peruka” z loków. Druga — długie faliste wstęgi, które wyglądały jak macki. Trzecia, ta z filmu, to duża zaokrąglona masa sprężynek. Jej bluzkę zrobiliśmy chłodniejszą i ciemniejszą, żeby nie zlewała się z moją kremową koszulą tam, gdzie stoimy obok siebie.

Nowa obsada bez przepisywania scen

Film ma dwanaście plików scen i żadnego nie trzeba było zmieniać dla nowej obsady. Moduł postaci zachował nazwy funkcji i API API to interfejs, przez który dwa systemy wymieniają dane automatycznie — bez eksportów do Excela i przeklejania ręką. Pełna definicja →: CAST.kuba nadal rysuje „kumpla” — tyle że teraz jest nim Kasia. Każda scena, która go wywołuje, podchwyciła ją bez zmian.

Zmienił się tekst na ekranie, bo polski ma rodzaj gramatyczny. Pojawiło się „Każdy ma taką kumpelę.”, „Przypomnieć jej?…”, „Może sama pamięta…”, a tytuł powiadomienia brzmi „Dług za 3 dni: Kasia”. W jej kwestiach pada teraz moje imię: „Michał, pożycz 50 zł. Oddam piętnastego!”.

Dziecko w kadrze, więc bez piwa

Gdy obok stosu monet pojawiło się dziecko, bar przestał działać. Dziecko obok alkoholu w reklamie wygląda źle, a platformy reklamowe sprawdzają takie zestawienie ostrzej. Bar stał się więc kawiarnią — kawa, lemoniada, witryna z ciastami — a chłopiec dostał różowe lody.

Kawiarnia wyciągnęła też błąd rysunku w uścisku. Ręka Kasi była narysowana przede mną, a nie wokół mnie. Poprawka: przycięcie jej ręki moją sylwetką, tak że ręka przechodzi za moimi plecami, a na dalszym ramieniu widać tylko dłoń.

Oddanie: głośność i dwa fałszywe alarmy

Jednoprzebiegowy loudnorm z I=-14:TP=-1.5 dał −12,2 LUFS ze szczytem +0,7 dBFS — za głośno i z przesterem. Dwuprzebiegowy loudnorm (najpierw pomiar, potem zastosowanie z linear=true) i do tego alimiter trafiły dokładnie w −14,0 LUFS i −1,5 dBFS.

Sprawdzanie synchronizacji oznaczyło dwa zdarzenia jako przesunięte: jedno o 169 ms, drugie o 45 ms. Oba alarmy były fałszywe: karta albo dłoń zaczynają wjeżdżać w mierzony obszar przed uderzeniem, a samo uderzenie wypada dokładnie w klatce zdarzenia. Wszystkie pozostałe zdarzenia mieszczą się w 2 ms.

Efekt i który styl kiedy

Wersje są dwie, polska i angielska, każda po 30 sekund, 1080×1920 przy 24 fps. Angielska zaczyna się od „Everyone has that one friend”, pożyczka to 50 €, monety to bimetaliczne jednoeurówki, a powiadomienie używa prawdziwego angielskiego tekstu aplikacji: „You lent EUR 50 — repayment due soon”. Ścieżkę dźwiękową wzięliśmy z wersji tuszem: granice ujęć są te same i wszystkie 51 zdarzeń się zgadza.

Mamy teraz dwa style i prostą regułę wyboru. Tusz — do 30-sekundowych historii z postaciami i ekranami aplikacji. Ołówek — do krótkich reklam typu „policz liczbę”, a od tego filmu także do komedii z postaciami i prawdziwymi twarzami.

Wszystko to nadal jest kodem w repozytorium produktu: da się go przejrzeć, odtworzyć i sprawdzić, czy zgadza się z tym, co aplikacja naprawdę robi. AI Budżet możesz wypróbować na ai-budget.pl albo w Google Play. Jeśli chcesz podobny potok wideo dla swojego produktu — rolki ze zrzutów, filmy proceduralne albo własny zespół narysowany w reklamie — napisz do nas: development@mi-code.pl.