O czym jest ten film
- Jak zbudować animowaną stronę z efektem ditheringu, która wygląda na wartą 10 000 dolarów, a kosztuje mniej więcej dolara.
- Cały proces: obraz statyczny → wideo → pocięcie na klatki → dithering → tło strony.
- Wybór modeli graficznych (GPT image 2, Nano Banana Pro) i wideo (Cense 2.0) przez agregator Higgsfield.
- Dlaczego warto najpierw wygenerować dobry obraz, zanim zamieni się go w wideo.
- Jak dobierać style: dostojne, „renesansowe” motywy w ciepłych, pastelowych barwach działają najlepiej.
- Sztuczka z ditheringiem i klatkowaniem (ok. 11 kl./s), która tworzy charakterystyczny „staccato” efekt.
- Budowa strony w aplikacji Claude Desktop (tryb Code) na podstawie gotowego promptu.
- Świadome użycie „słabszego” modelu (Opus 4.8), by pokazać, że nie potrzeba maksymalnej mocy AI.
- Iteracja stylów (fonty, kolory, układ) w rozmowie z agentem zwykłym językiem.
- Darmowa publikacja strony przez Vercel/Netlify bez płacenia za hosting.
Redakcyjne tłumaczenie
Wprowadzenie: efekt za dolara, który wygląda na dziesięć tysięcy
W tym materiale pokażę wam, jak tworzyć naprawdę efektowne, animowane strony z efektem ditheringu — dokładnie takie, jakie zaraz zobaczycie. Dam wam też w całości darmowy prompt, którego użyjecie w dowolnym agencie AI, żeby odtworzyć każdą z tych stron. Jak widzicie, są dynamiczne, interaktywne i animowane. Nakładamy na nie fajne proceduralne efekty, dobieramy ciekawe zestawienia fontów i tak dalej.
Nie kończyłem szkoły programistycznej, nie mam w tym dyplomu. Nauczyłem się tego, oglądając darmowe tutoriale na YouTube — dokładnie tak, jak wy teraz. Przeprowadzę was przez to prosto i przystępnie. Jeśli tylko macie dostęp do jakiegoś agenta AI, powinno się udać.
Wszystko, co za chwilę zobaczycie, dostępne jest za darmo w opisie pod filmem — wystarczy kliknąć link do Maker Zero. Zebrałem tam wszystkie zasoby i nie musicie mi płacić ani grosza.
Cały proces w skrócie
Zacznijmy od tego, jak wygląda cały pipeline.
Najpierw bierzemy obraz statyczny. Użyjemy do tego jednego ze znanych generatorów obrazów — prawdopodobnie GPT image 2, choć przetestuję kilka, żeby wybrać najwyższą jakość. Kazujemy mu wygenerować coś w rodzaju stylizowanego malarstwa. Jak pewnie pamiętacie z pokazanych wcześniej stron, wiele z nich miało klimat dostojny, niemal renesansowy — na przykład jak starożytny fresk. Bardzo lubię ten nastrój, bo świetnie pasuje do stron z efektem ditheringu.
Kiedy mamy obraz, który nam się podoba, zamieniamy go w ruch, czyli w serię klatek. A seria klatek to, jak wiadomo, po prostu wideo. Fajne jest to, że dziś można wziąć zdjęcie i przerobić je na wideo, dając dodatkowe instrukcje — na przykład: „chcę, żeby kobieta spojrzała w lewo”. Model radzi sobie z tym całkiem dobrze. Podajemy więc obraz do modelu typu image-to-video (jest ich sporo do wyboru); będzie nas to kosztowało jakieś 25–50 centów, i mamy wideo.
Ale zauważcie: na tych stronach nie odtwarza się płynne wideo. Jest lekki, „skokowy” przeskok klatek. Cały pomysł na ten efekt ditheringu polega na tym, że dzieje się to trochę staccato — widać, że jedna klatka przeskakuje w drugą. To dlatego, że tniemy płynne wideo na serię klatek i dopiero na nich nakładamy efekt. Nie wiem, czy to nazwać VHS, szczerze mówiąc nie znam dokładnej nazwy, ale wygląda świetnie i myślę, że to właśnie spina całość.
Żeby to osiągnąć, wyciągamy wszystkie klatki i odtwarzamy je z prędkością około 11 klatek na sekundę. Potem nakładamy dithering.
(Informacja dodatkowa: dithering to technika oddawania szczegółów i przejść tonalnych za pomocą wzoru drobnych czarno-białych kropek. Był powszechny na starych ekranach o ograniczonej liczbie kolorów.)
Na końcu ustawiamy taki obraz jako tło strony i przymierzamy różne warianty stylistyczne, aż trafimy na dobrze działający. Z mojego doświadczenia najlepiej sprawdzają się motywy dostojne, wielkoformatowe. Mam tu całą listę stron, które wygenerowałem, żeby pokazać wam różne style do eksperymentów. Na przykład ten wariant ma w tle coś w rodzaju floty okrętów. Tego typu motywy dobrze wyglądają w ciepłych, bardziej pastelowych barwach, więc dam wam też sporo palet i próbek kolorów do wykorzystania.
I jeszcze jedno: mamy tu efekty reagujące na ruch myszy. Uważam je za konieczne, żeby strona sprawiała wrażenie interaktywnej. Zrobione w ten sposób, ludzie zakładają, że każdy z tych pikseli renderuje się niezależnie — choć wcale tak nie jest. W rzeczywistości oszukujemy, wykorzystując właśnie ten sprytny projekt oparty na klatkach.
Krok 1: generowanie obrazu
Jak wykonać ten pierwszy krok? Modeli jest sporo — wspomniałem o GPT image 2, znacie pewnie też Nano Banana i Nano Banana Pro. Poeksperymentuję z nimi i przeprowadzę was przez cały proces na żywo, opowiadając, co robię, żebyśmy byli na tej samej stronie.
Najprościej zapisać się do dostawcy obrazów typu Higgsfield. To agregatory, które hostują setki różnych modeli graficznych. Po rejestracji przechodzę do sekcji „Images” w lewym górnym rogu, klikam „Create image” i pojawia się ekran generowania. U mnie widać już mnóstwo wcześniejszych obrazów, bo eksperymentowałem z różnymi motywami: rotundą, armadą, aniołami we fresku, całymi wszechświatami. Próbowałem nawet galopującego konia — choć tu wyniki są 50/50. Zabawne, że gdy opisywałem konia bardzo dynamicznym językiem (pędzący, z napiętymi mięśniami, dumny), model uznał, że generuję treści „nieodpowiednie do pracy”.
Najlepiej sprawdzają się, jak mówiłem, motywy w stylu renesansowym, bo wywołują poczucie monumentalności, które dobrze współgra z delikatną animacją. Jeden z promptów brzmi mniej więcej tak: renesansowe studium olejne kolosalnego gotyckiego okna różanego widzianego na wprost, z setkami promieniście rozchodzących się segmentów kamiennego maswerku i tafli witrażu tworzących jedno wielkie, koncentryczne koło.
Kilka ustawień, na które warto zwrócić uwagę:
- Proporcje. Nie używajcie 1:1 — trzeba iść w szeroki kadr (widescreen), co ma sens, bo w praktyce budujemy panoramiczne tło.
- Rozdzielczość. Domyślnie ustawiają 2K, bo chcą wyciągnąć jak najwięcej pieniędzy. Polecam zejść do 1K.
- Batch size. To liczba generowanych naraz obrazów. Z jednego rzadko wyjdzie najlepszy efekt, więc robię dwa, żeby mieć wybór.
Klikam „Generate” — kosztuje to cztery tokeny, czyli dosłownie grosze na tym pierwszym etapie. Potem czekam. Wygenerowałem sporo wariantów, dorzuciłem też motyw z opadającym popiołem, żeby mieć opcje. Efekt jest już całkiem niezły „z pudełka”: mamy gotyckie okno, a wyobraźcie sobie, że powoli się obraca — wyjdzie coś naprawdę fajnego.
Krok 2: zamiana obrazu na wideo
W prawym dolnym rogu jest przycisk, który jednym kliknięciem zamienia obraz w wideo — wystarczy wpisać „turn to video”. To przenosi nas na stronę wideo.
Polecam model Cense 2.0. To prawdopodobnie nie najlepszy model na rynku, ale najlepszy do naszego zastosowania: jest tani, a do ditheringu i tak nie potrzebujemy najwyższej jakości.
Ustawienia:
- Długość. Może być 8 lub 16 sekund, ale liczba tokenów wtedy mocno rośnie. Chcę zmieścić się w mniej więcej dolarze, więc schodzę do 4 sekund.
- Proporcje. Wybierzcie 16:9.
- Jakość. 1080p jest w porządku. Można 720p, ale 480p odradzam — jakość byłaby fatalna.
- Materiał wejściowy. W polu „upload media” koniecznie wskażcie dokładnie ten obraz, który wcześniej wygenerowaliśmy. Jeśli tego nie zrobicie, wideo nie będzie przypominało naszego obrazu.
Ktoś może zapytać: po co w ogóle najpierw generować obraz? Bo kiedy podamy dobry obraz do modelu image-to-video, wynikowe wideo jest znacznie wyższej jakości i lepiej trzyma się założeń kompozycji. A ponieważ obrazy są tanie, można wygenerować dwadzieścia obrazów, wybrać najlepszy i dopiero na niego przeznaczyć droższe „pieniądze na wideo”, zamiast generować dziesiątki wideo w ciemno.
Podobnie jak wcześniej, generuję po kilka wariantów, żeby zwiększyć szanse na dobry efekt. To są nasze bazowe zasoby — materiał, który zamienimy w piękne, dithered tło. Zwróćcie uwagę, że wciąż nie dotknęliśmy okna czatu agenta AI — korzystamy wyłącznie z gotowych modeli na dużym agregatorze obrazów i wideo. Gdy przeniesiemy to do naszego modelu i postawimy stronę, będzie już prosto, bo mamy wysokiej jakości gotowe materiały.
Po chwili pojawiają się rezultaty: powolny najazd na gotycki kościół z lekkim światłem, opadający popiół — „dopalający się w prochu rzymskiej chwały”. Nie każde wideo zapętli się idealnie, ale można je ewentualnie doszlifować. Od tego momentu wydaliście już zdecydowaną większość pieniędzy, jakie w ogóle wydacie w tym procesie.
Krok 3: budowa strony w Claude
Mój preferowany model na tym etapie to rodzina modeli Claude. Otwieram aplikację Claude Desktop — dostępną na macOS i Windowsie; wystarczy w Google wpisać „Claude Desktop”, pobrać wersję odpowiednią dla swojego systemu i zainstalować. Bez konta trzeba się zarejestrować; plan bazowy to około 20 dolarów miesięcznie.
Następnie przechodzę do zakładki Code po lewej stronie — to tam odbywa się całe kodowanie. Interfejs się zmienia. Jeśli na dole widnieje „default”, przełączcie na „local”, żeby wszystko działało bezpośrednio na waszym komputerze, i wybierzcie folder (u mnie nowy folder „for YouTube”).
Teraz mogę po prostu coś napisać. Pierwsze, co robię, to wchodzę na moją stronę z zasobami (Maker Zero), znajduję materiał „dithered web design” i kopiuję prompt do ditheringu — nie prompt do obrazu ani do wideo, bo tych już użyliśmy. Wklejam cały prompt do Claude. Ten prompt poprowadzi model przez cały proces.
Ostatnia rzecz: muszę dać modelowi pliki, które wygenerowałem — to część promptu. Wracam do Higgsfield, pobieram wideo, kopiuję ścieżkę do pliku (np. users/Nick/…/downloads/…) i wklejam ją do Claude. Model poprosi o dostęp do plików — domyślnie pozwalam mu na dostęp do wszystkich potrzebnych. Znajduje plik, sprawdza go i stwierdza, że to „doskonałe źródło dla tej techniki” — zgadzam się, panie Claude.
Warto zaznaczyć: używam modelu, który wielu uznałoby za dość przestarzały — Opus 4.8, sprzed jednej czy dwóch generacji. Zrobiłem to celowo, żeby pokazać, że da się to zrobić naprawdę tanio. Nie potrzeba wielkiej inteligencji, żeby stworzyć fajną stronę. Można to zrobić nawet całkowicie otwartym modelem — dostępny jest już np. Kimmy K3 i wiele innych. Wszyscy mamy dostęp do aż nadto inteligencji za kilka centów.
Gdy model skończy, dostajemy stronę wyrenderowaną w testowej przeglądarce — z żarzącymi się, wolno unoszącymi się drobinkami. Na razie generujemy tylko sekcję „above the fold”, czyli to, co widać bez przewijania — nie całą stronę. Robię tak, żeby nie narzucać wam formy: możecie z tego zbudować aplikację, sekcje aplikacji, cokolwiek. Żeby rozwinąć to w pełną stronę, wystarczy poprosić: „zamień to w pełną stronę”. Radzę jednak najpierw upewnić się, że naprawdę podoba wam się sekcja above the fold, zanim każecie modelowi rozbudować resztę.
Iteracja stylów
Piszę więc: „Bardzo mi się podobają, wyglądają świetnie, ale chcę poeksperymentować z różnymi stylami” — mając na myśli fonty, kolory, rozmieszczenie. Proszę o trzy–cztery warianty do wyboru. Zwróćcie uwagę: piszę tak, jak do każdego człowieka, z którym współpracuję — zwykłym językiem, zrozumiałym dla każdego. Nie jestem żadnym zaawansowanym programistą.
Model generuje warianty w podobnym stylu i efekcie, tylko przełącza kolory, fonty i inne detale. To jeden z moich ulubionych układów ze względu na powolny efekt opadającego popiołu.
Pokażę też drugą stronę — tę z panelem szklanym. Otwieram nową sesję, ponownie wklejam ten sam wielki prompt, ale podaję inny plik. Efekt końcowy jest bardzo fajny — mamy tu szalony efekt oddalania, niemal jak wszechświat, z krzykliwymi barwami (kwasowa limonka, magenta). Uwaga praktyczna: nie trzymajcie otwartych naraz kilkunastu takich stron — im więcej, tym bardziej obciążają komputer.
Krok 4: publikacja strony za darmo
Ostatni szlif: jak wrzucić to do internetu? Za hosting stron nie trzeba już płacić od dłuższego czasu. Zamiast tego używa się usług hostingu statycznego. Dobra jest Netlify, dobry jest też Vercel. Na kanale zawsze pokazywałem Netlify i ludzie żartowali, że jestem „szyldem Netlify”, więc tym razem użyję Vercela.
(Informacja dodatkowa: nazwy w transkrypcie zostały zniekształcone przez automatyczne napisy — chodzi o Netlify, Vercel i platformę Skool.)
Rejestruję się (logowanie przez Google), zakładam zespół. Potrzebuję dwóch rzeczy: ID zespołu i klucza API (tokenu). ID kopiuję i wklejam do Claude: „świetnie, wrzuć to na Vercel, oto team ID”. Token generuję w ustawieniach → tokens (można też po prostu wpisać „tokens” w wyszukiwarce ustawień). Nazywam go „YouTube”, nadaję pełen zakres konta i — ponieważ wiecie, że widzowie zaraz się tu rzucą — ustawiam wygaśnięcie na godzinę. Kopiuję i wklejam do Claude.
To wszystko. Model bierze projekt i sam go wdraża. Prawdopodobnie zwróci mi uwagę, że wkleiłem sekret (token) czystym tekstem na czacie — ale to w porządku. Po jakichś 20 sekundach całość jest przesłana, tworzy się deployment, a model czeka, aż będzie gotowy. Napotkał nawet komunikat: „wyłączenie ochrony wdrożenia sprawi, że strona będzie publicznie dostępna dla każdego z linkiem” — skoro poprosiłem o publikację na Vercel, to zapewne moja intencja. Na koniec model ładuje żywy URL w swojej wewnętrznej przeglądarce jako dowód. Wklejam adres do swojego Chrome i proszę bardzo — strona działa.
Nie musicie płacić nikomu za drogi hosting. Wystarczy podać klucze API, a reszta zrobi się sama.
Podsumowanie
Jeśli chcecie zobaczyć wszystkie style, które przygotowałem, wrzuciłem je na osobną stronę (projektowałem to dla własnego SaaS-u o nazwie Clarvo). Znajdziecie tam link do każdego wariantu, a pod adresem z końcówką /prompt — wszystkie prompty do skopiowania i wklejenia do własnego agenta AI. Wszystko za darmo.
Zaczynałem z zerowym doświadczeniem programistycznym — samo postawienie strony w internecie było dla mnie koszmarem. Dlatego wiem, że nie potrzebujecie drogich programistów. Wystarczy dobry generator obrazów, dobry generator wideo i przemyślany, „opiniotwórczy” proces, żeby uzyskać naprawdę wysokiej jakości strony.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Cały efekt „za 10 tysięcy” kosztuje około dolara
Na czym polega: Prawie cały koszt to jeden krok — generowanie wideo (25–50 centów za klip). Obrazy to grosze, a budowa strony w ramach planu agenta AI jest praktycznie darmowa (poza planem: około 10 centów w tokenach).
Jak stosować: Zaplanuj budżet wokół etapu wideo. Generuj dużo tanich obrazów, a droższe wideo rób tylko z najlepszego wybranego kadru.
Na co uważać: Dłuższe klipy i wyższe rozdzielczości gwałtownie podbijają liczbę tokenów — trzymaj się 4 sekund i 1080p, żeby zmieścić się w dolarze.
2.Sekwencja: obraz → wideo → klatki → dithering → tło
Na czym polega: To sztywny, powtarzalny pipeline. Każdy etap karmi następny, a końcowy efekt to statyczny wzór klatek udający renderowaną animację.
Jak stosować: Traktuj to jak checklistę i nie pomijaj kroków — zwłaszcza cięcia wideo na klatki, bo to ono daje charakterystyczny efekt.
Na co uważać: Pominięcie etapu obrazu i generowanie wideo „od zera” daje gorszą jakość i mniej kontroli nad kompozycją.
3.Zawsze generuj obraz przed wideo
Na czym polega: Model image-to-video daje znacznie lepszy, spójniejszy efekt, gdy dostanie dobry obraz wejściowy, zamiast tworzyć wszystko od zera.
Jak stosować: Wygeneruj wiele tanich obrazów (batch po 2), wybierz najlepszy i dopiero jego podaj do modelu wideo. Upewnij się, że w polu „upload media” jest dokładnie ten obraz.
Na co uważać: Jeśli nie wskażesz właściwego pliku wejściowego, wideo nie będzie przypominało twojego obrazu — łatwo o tę pomyłkę.
4.Efekt „staccato” bierze się z klatkowania, nie z płynnego wideo
Na czym polega: Charakterystyczny, lekko skokowy wygląd powstaje przez pocięcie płynnego wideo na klatki i odtwarzanie ich z ~11 kl./s, a potem nałożenie ditheringu.
Jak stosować: Celuj w około 11 klatek na sekundę. To ta „niedoskonałość” sprawia wrażenie retro i sprzedaje cały efekt.
Na co uważać: Zbyt płynne wideo zabije efekt; z kolei zbyt niska liczba klatek może wyglądać na zwykłą usterkę, a nie zamierzony styl.
5.Dostojne, renesansowe motywy w ciepłych barwach działają najlepiej
Na czym polega: Monumentalne, „wielkoformatowe” kompozycje (gotyckie okna, freski, armady) wywołują poczucie grandiozy, które współgra z delikatną animacją.
Jak stosować: Pisz prompty na obrazy o dużej skali i symetrii; stosuj szeroki kadr (widescreen) i ciepłe, pastelowe palety.
Na co uważać: Proporcje 1:1 nie sprawdzają się do panoramicznych teł. Zbyt „zajęte” kompozycje bywają mniej czytelne niż prostsze, bardziej rozpoznawalne motywy.
6.Filtry treści potrafią blokować niewinne opisy
Na czym polega: Autor przy generowaniu galopującego konia użył dynamicznego języka (napięte mięśnie, pędzący brzuch) i dostał odmowę jako „treść nieodpowiednia”.
Jak stosować: Jeśli prompt zostanie zablokowany, przeredaguj go, usuwając sformułowania, które mogą zostać źle odczytane, i opisz scenę neutralniej.
Na co uważać: Niektóre motywy (zwierzęta w ruchu, ciała) są kapryśne — miej zapasowe warianty promptu i nie licz na powtarzalność.
7.Do tego zadania nie potrzeba najmocniejszego modelu
Na czym polega: Autor celowo użył starszego Opusa 4.8, by pokazać, że efekt osiąga się tanio; wspomina też o modelach open source (np. Kimmy K3).
Jak stosować: Wybieraj tańszy/starszy model do zadań głównie mechanicznych, jak składanie strony wg gotowego promptu.
Na co uważać: Oszczędność na modelu ma sens dla prostych zadań; przy bardziej złożonej logice aplikacji słabszy model może wymagać więcej poprawek.
8.Steruj agentem zwykłym, ludzkim językiem
Na czym polega: Autor buduje i iteruje stronę, pisząc do modelu jak do współpracownika: „podobają mi się, ale chcę poeksperymentować z fontami, kolorami i układem — pokaż 3–4 warianty”.
Jak stosować: Formułuj polecenia opisowo i proś o kilka wariantów do wyboru, zamiast dyktować kod. Iteruj sekcję po sekcji.
Na co uważać: Najpierw dopracuj sekcję „above the fold”, zanim każesz rozbudować całą stronę — inaczej model rozwinie coś, co może ci się nie spodobać.
9.Za hosting statycznej strony nie trzeba płacić
Na czym polega: Vercel i Netlify hostują strony statyczne za darmo. Agent potrafi sam wdrożyć projekt, mając team ID i token API.
Jak stosować: Wygeneruj token o pełnym zakresie, wklej go wraz z ID zespołu do agenta i poproś o publikację; model prześle pliki i zwróci działający URL.
Na co uważać: Token API to sekret — wklejony na czacie jest jawny. Ustawiaj krótki czas życia (np. 1 godzina) i usuwaj token po użyciu. Pamiętaj, że wyłączenie ochrony wdrożenia czyni stronę publiczną.
10.Taniość obrazów pozwala „przegrywać wielokrotnie”
Na czym polega: Skoro obrazy kosztują grosze, można wygenerować ich mnóstwo, wybrać najlepszy i dopiero na niego przeznaczyć droższe generowanie wideo.
Jak stosować: Rób duże serie obrazów jako tanie „loterie”, selekcjonuj bezlitośnie i inwestuj droższe zasoby (wideo) tylko w zwycięzców.
Na co uważać: Nie oszczędzaj na etapie selekcji — pojedynczy obraz rzadko jest najlepszy; brak wyboru między wariantami obniża końcową jakość.