O czym jest ten film
- Pokaz budowy „przewijalnej”, interaktywnej strony 3D — takiej, jaka bywa viralowa na Twitterze i Instagramie — w kilka minut.
- Narzędziem jest open-source’owy skill Scroll World z GitHuba, instalowany jako plugin z marketplace do Claude Code.
- Silnikiem generującym obrazy i wideo jest Higgsfield — trzeba osobno zainstalować jego CLI i zalogować się na konto.
- Skill prowadzi użytkownika przez serię pytań: kierunek artystyczny, informacje o marce, wersja desktop czy mobilna.
- Strona składa się ze scen (tu nazwanych „podróżą”), przez które przelatuje kamera, kończąc na wezwaniu do działania.
- Autor pokazuje wygenerowany plan sześciu scen i decyduje się połączyć niektóre z nich.
- Zachęca, by przed instalacją przeczytać kod skillu — dobra praktyka bezpieczeństwa i sposób na zrozumienie mechaniki.
- Kluczowa lekcja: znajomość słownictwa (np. rodzaje ujęć kamery) daje realną kontrolę nad efektem promptowania.
- Efekt końcowy to płynnie animowana strona z przybliżaniem i oddalaniem kamery między scenami.
- Koszt całości: ok. 500 kredytów Higgsfield, czyli mniej więcej 20 dol. — głównie za generowanie wideo łączącego sceny.
Redakcyjne tłumaczenie
Skąd pomysł
W sieci krążą efektowne, interaktywne strony przewijane, które robią się trochę viralowe na Twitterze czy Instagramie. Zawsze mnie zastanawiało, co właściwie trzeba zrobić, żeby zbudować coś takiego — bo z tego typu witryną, która sama się modyfikuje w miarę przewijania, można sporo osiągnąć. Okazuje się, że jest to prostsze, niż mogłoby się wydawać, zwłaszcza jeśli ma się skill, który w tym pomaga. Dokładnie to pokażę w tym filmie — krok po kroku poprowadzę cię przez cały proces i pokażę, co da się uzyskać w pięć–dziesięć minut zabawy takim narzędziem.
Instalacja skillu Scroll World
Skill nazywa się Scroll World, jest open source i znajdziesz go na GitHubie. Instalacja jest prosta: kopiujemy komendę pluginu z marketplace, wklejamy ją do terminala. Kiedy instalacja się skończy, wracamy na GitHuba, kopiujemy komendę instalacyjną samego skillu i uruchamiamy ją. Gdy to się zakończy, wystarczy otworzyć Claude i uruchomić komendę scroll world, żeby ruszyć.
Skill zaczyna wtedy zadawać serię pytań. Warto rozumieć, jak to działa pod maską: efekt końcowy to obrazy łączone jedne z drugimi, „zszywane” ze sobą. Dlatego potrzebne jest API do generowania obrazów — w tym przypadku Higgsfield.
(Informacja dodatkowa: Higgsfield to komercyjny generator obrazów i wideo AI, działający w modelu kredytowym — każde generowanie zużywa pulę kredytów rozliczaną według poziomu konta.)
Konfiguracja Higgsfield
Zanim odpowiemy na pytania skillu, trzeba upewnić się, że Higgsfield jest skonfigurowany na naszej maszynie. Wchodzimy na higgsfield.ai/cli, kopiujemy komendę pobierającą CLI i uruchamiamy ją w projekcie. Po pobraniu wystarczy uruchomić komendę logowania i zalogować się na swoje konto Higgsfield. Kiedy to gotowe, można wrócić do odpowiadania na pytania.
Pytania: kierunek artystyczny i marka
Pierwsze pytanie dotyczy kierunku artystycznego. Są gotowe propozycje do wyboru — na przykład „glossy toy” (błyszcząca zabawka) czy „neon night” (neonowa noc) — ale można też wpisać coś własnego, jeśli masz konkretny klimat na myśli. Wybieram „neon night”.
Następnie podajemy informacje o marce. Można je zaimportować z adresu URL, pozwolić narzędziu dobrać paletę, albo samemu ją narzucić. Tutaj pozwalam mu zrobić, co chce. Kolejne pytanie: strona ma być responsywna na urządzeniach mobilnych czy tylko desktopowa? Na potrzeby demo wybieram tylko desktop.
Potem wklejam informacje o marce. Dla przykładu: „Tech Snack AI” — powiedzmy, że chcę przenieść swój newsletter, dawać w nim aktualizacje o różnych biznesach i aplikacjach oraz linki do ciekawych rzeczy, które akurat sprawdzam. Na podstawie tych odpowiedzi — kierunku artystycznego i reszty — narzędzie próbuje wygenerować przewodnik po stylu (style guide) oraz zestaw scen.
Sceny — „podróż” przez świat
Warto myśleć o tym tak: mamy różne sceny, dla których trzeba wygenerować obrazy. Ogólna „podróż” to kamera przelatująca przez świat i kończąca na jakimś wezwaniu do działania. Narzędzie zaproponowało sześć ekranów:
- Signal tower (wieża sygnałowa) — sekcja hero, ekran powitalny witryny.
- Newsletter desk (biurko newslettera) — coś w stylu sali prasowej, futurystyczne centrum wysyłkowej poczty.
- Workshop (warsztat) — jakby garaż albo warsztat, z którego prowadzi się biznes.
- Tool vault (skarbiec narzędzi) — świecące ikony i przełączniki ścienne, klimat skrzynki z narzędziami.
- Repo archive (archiwum repozytoriów) — miejsce, z którego można linkować do repozytoriów GitHub, które lubię śledzić.
- Launchpad (wyrzutnia) — właściwe wezwanie do działania: zapis do newslettera.
Każdą z tych rzeczy można dostroić, ale ja lecę na ustawieniach domyślnych. Zostawiam brand kit bez zmian, a w „podróży” postanawiam połączyć narzędzia i repozytoria w jedno. Głównym wezwaniem do działania jest zapis do newslettera. Zatwierdzam wszystkie odpowiedzi — to blokuje plan — i narzędzie rusza budować autonomicznie. Trzeba pamiętać: żeby to zadziałało, Higgsfield musi być skonfigurowany. Chyba że chcesz to dostosować — bo skill jest open source, więc możesz podmienić dowolną bibliotekę.
Czytanie kodu skillu — dobra praktyka
Kiedy narzędzie pracuje, zajrzyjmy do biblioteki skillu, żeby zrozumieć, co się właściwie dzieje. To bardzo dobry nawyk: rozumieć, co dzieje się w środku takich bibliotek, żeby nie dawać komuś pełnego dostępu do naszego komputera bez powodu.
Przeglądając skill po kolei:
- Krok zerowy to bootstrap — sprawdzenie, czy skill ma dostęp do wszystkiego, czego potrzebuje: CLI Higgsfield, FFmpeg (do kodowania i domykania wideo), narzędzie do obrazów w Pythonie. Są też uwagi o tym, jak długo trwa proces, żeby model wiedział, czego się spodziewać po stronie timeoutów i blokujących zadań — jedno takie zadanie może zajmować od trzech do ośmiu minut.
- Krok pierwszy to wywiad z użytkownikiem: zrozumienie, o czym w ogóle mówimy, jaka jest tożsamość marki, kierunek artystyczny, poszczególne sekcje strony (czyli „podróż”) oraz to, czy chcemy wersję mobilną. Ja wybrałem domyślne, ale przy prawdziwym projekcie warto podać rzeczy specyficzne dla własnej marki.
Pod maską zakodowane są konkretne modele. Jeśli chcesz użyć innych, ponownie — jest to open source, można to dostosować. Można nawet wykorzystać fragmenty skillu, żeby część strony była interaktywna przy przewijaniu, a część nie.
Co dzieje się w tle: klatki i praca kamery
Pierwszą rzeczą, jaką narzędzie robi, jest generowanie statycznych klatek — obrazu dla każdej z sekcji (u mnie pięciu). Ma do tego swoje referencje, a wszystko trafia do Higgsfield.
Jeśli chcesz uzyskać te bardziej „unoszące się”, abstrakcyjne strony — gdzie elementy zdają się dryfować i zaczynają się poruszać w miarę przewijania — jest to opcjonalny krok. Do tego służy plik knockout.py, który wcześniej oglądaliśmy.
Najważniejsze w tych viralowych demach jest to, jak kamera się porusza i przybliża — to daje im bardzo specyficzny charakter. Dlatego skill promptuje konkretne ujęcia kamery przy przechodzeniu przez sceny. Są dwa główne podejścia:
- Ciągłe ujęcie do przodu (continuous forward take) — jak w pokazie zwiedzania domu z początku filmu, gdzie cały czas posuwamy się naprzód przez scenę.
- Nurkowanie w dół i w górę (dive in, dive out) — ujęcie z lotu ptaka, gdzie z „tysiąca stóp” przybliżasz się i oddalasz między np. górskimi krajobrazami. To zupełnie inne podejście do tego, co nazywają „architekturą kamery”.
Dlaczego słownictwo ma znaczenie
To wszystko skill promptuje pod maską, ale możesz sam przekazać dowolny z tych elementów jako kontekst. I to jest coś, co mocno podkreślam. To akurat luźny przykład tego, co da się zrobić w ramach vibe codingu, inżynierii agentowej, kodowania z AI — jakkolwiek to nazwiesz. Ale najważniejsze: jeśli chcesz pchnąć taki projekt (albo cokolwiek innego) w konkretnym kierunku — czy budujesz produkcyjną aplikację, czy sprzedajesz usługi firmom — posiadanie właściwego języka jest niesamowicie cenne.
To właśnie lubię w tym skillu: można go przeczytać, zobaczyć, jak działa, a potem użyć tej wiedzy do promptowania. Na przykład podając kierunek artystyczny i koncepcje, można wpleść konkretne pojęcia i tony zgodnie z tym, jak zdefiniowano je w skillu — i to popycha stronę w wybrany styl. Tak samo działa to w narzędziach w rodzaju Claude Design, gdy chcesz nadać konkretny charakter estetyczny swoim stronom docelowym czy projektowi aplikacji. Znajomość języka, którym promptuje się model, ma ogromny wpływ na to, co model wybierze.
(Informacja dodatkowa: „Claude Design”, zapisany w automatycznym transkrypcie jako „claw design”, to narzędzie Anthropic do projektowania interfejsów wspieranego przez AI.)
Ładowanie się słownictwem i rozumienie, co ono znaczy, to jeden z najpotężniejszych sposobów, by przejść od kogoś, kto tylko zbiera losowe narzędzia i nic z nimi nie robi, do kogoś, kto faktycznie buduje rzeczy i potrafi je sprzedać albo wdrożyć we własnym biznesie.
Krok piąty i efekt końcowy
W kroku piątym, w zależności od typu ujęć kamery, różni się sposób przetwarzania obrazów i łączenia scen. Ale na końcu całego procesu powinniśmy mieć w pełni funkcjonalną, przewijalną stronę — taka jest przynajmniej obietnica.
Gdy proces się kończy, uruchamiamy komendę startującą serwer, kopiujemy adres URL, wklejamy go do przeglądarki i patrzymy. Widać wszystkie obrazy, które wcześniej oglądaliśmy — przestrzeń roboczą i resztę. Podczas przewijania strona interaktywnie przybliża się i oddala, a perspektywa całkowicie się zmienia. To była opcja B architektury kamery — nie przelatujemy przez coś, tylko przeskakujemy pomiędzy scenami.
Ogólnie wygląda to całkiem fajnie. Nie włożyłem w to prawie żadnego wysiłku — poszedłem na domyślnych ustawieniach. Gdybyś poświęcił dużo czasu na omówienie poszczególnych kroków, mógłbyś pchnąć to w zupełnie inną stronę. Ale te animacje przewijania są naprawdę płynne i wyglądają świetnie. Jak na pięć–dziesięć minut zabawy — nieźle.
Ile to kosztowało
Cały proces zużył około 500 kredytów na Higgsfield. Samo generowanie obrazów nie jest drogie — to generowanie wideo, które łączy sceny, kosztuje najwięcej. Przy moim poziomie konta jeden kredyt to mniej więcej 4 centy, więc ta strona kosztowała około 20 dolarów. Trochę drogo, ale w ogóle jej nie dopracowałem. Gdybym miał tego naprawdę użyć, byłbym bardziej przemyślany co do tego, co konkretnie buduję i dlaczego, oraz które fragmenty strony faktycznie mają korzystać z tego mechanizmu przybliżania i przelatywania.
Mimo wszystko to całkiem imponujące, że dzięki jednemu skillowi w zwykłym Claude Code, Codeksie czy czymkolwiek podobnym można stworzyć coś takiego.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Efektowne strony 3D da się złożyć bez ręcznego kodowania 3D
Na czym polega: Open-source’owy skill Scroll World w Claude Code prowadzi cię przez wywiad i sam generuje przewijalną stronę z animowaną kamerą, łącząc obrazy i wideo w jedną „podróż”.
Jak stosować: Zainstaluj plugin z marketplace, potem skill z GitHuba, uruchom komendę scroll world i odpowiadaj na pytania. Do prototypu wystarczą ustawienia domyślne.
Na co uważać: To skill zależny od zewnętrznego API (Higgsfield) — bez jego konfiguracji nic nie zadziała. Efekt „na domyślnych” jest ładny, ale generyczny; prawdziwy rezultat wymaga świadomych decyzji.
2.Higgsfield to warunek konieczny i główny generator kosztu
Na czym polega: Sceny powstają jako obrazy i łączące je wideo generowane przez Higgsfield. To najdroższy element całego procesu.
Jak stosować: Pobierz i skonfiguruj CLI Higgsfield (higgsfield.ai/cli), zaloguj się przed uruchomieniem skillu. Zaplanuj budżet kredytów z góry.
Na co uważać: Wideo łączące sceny pochłania zdecydowanie więcej kredytów niż same obrazy. Jedna niedopracowana strona to ok. 500 kredytów (~20 dol.) — koszt rośnie z liczbą scen i długością animacji.
3.Zawsze czytaj kod skillu przed instalacją
Na czym polega: Autor podkreśla, że przeglądanie zawartości biblioteki skillu to podstawowy nawyk bezpieczeństwa — nie dajesz obcemu kodowi pełnego dostępu do komputera w ciemno.
Jak stosować: Otwórz repozytorium na GitHubie i przeczytaj kroki skillu (bootstrap, wywiad, generowanie klatek, praca kamery). Przy okazji zrozumiesz, co i gdzie możesz dostroić.
Na co uważać: Skille mają dostęp do terminala i plików. Instalowanie „na klik” z nieznanego źródła jest ryzykowne — zwłaszcza gdy skill pobiera dodatkowe CLI i uruchamia zewnętrzne narzędzia.
4.Słownictwo to realna dźwignia kontroli nad modelem
Na czym polega: Znajomość terminów (np. rodzajów ujęć kamery, tonów, koncepcji stylu) pozwala precyzyjnie promptować model i uzyskać zamierzony efekt zamiast losowego.
Jak stosować: Wyciągnij słownictwo z samego skillu — jego opisy kierunków artystycznych i architektury kamery to gotowy słownik do wklejania w prompty. Buduj własną listę pojęć i ucz się, co znaczą.
Na co uważać: Samo zbieranie narzędzi bez opanowania języka daje efekt „klikacza”, który nic nie wdraża. Wartość pojawia się dopiero, gdy potrafisz świadomie sterować outputem.
5.Architektura kamery decyduje o charakterze strony
Na czym polega: Są dwa główne tryby: ciągłe ujęcie do przodu (przelot przez scenę) oraz nurkowanie w dół i w górę (perspektywa z lotu ptaka, przeskoki między scenami).
Jak stosować: Wybierz tryb pod treść — przelot do przodu dla narracyjnego „zwiedzania”, nurkowanie dla przeskoków między odrębnymi sekcjami. Możesz to wskazać wprost jako kontekst w promptcie.
Na co uważać: Na domyślnych skill sam wybiera tryb (w demie wyszła opcja B) — jeśli nie sprecyzujesz, dostaniesz jego decyzję, niekoniecznie zgodną z zamysłem.
6.„Podróż” i sceny to szkielet strony — projektuj je świadomie
Na czym polega: Strona to zestaw scen (hero, newsletter, warsztat, skarbiec narzędzi, archiwum, wyrzutnia/CTA), przez które przelatuje kamera, kończąc na wezwaniu do działania.
Jak stosować: Potraktuj sceny jak sekcje klasycznej strony docelowej i zmapuj je na własną narrację. Możesz łączyć sceny (autor scalił narzędzia z repozytoriami), żeby uprościć przekaz.
Na co uważać: Więcej scen to więcej wideo, czyli więcej kredytów. Nie każda sekcja musi być animowana 3D — rozważ, gdzie efekt naprawdę wnosi wartość.
7.Open source oznacza pełną możliwość podmiany modeli i bibliotek
Na czym polega: Domyślnie zakodowane modele i Higgsfield można zastąpić innymi narzędziami, bo cały skill jest otwarty.
Jak stosować: Jeśli masz preferowany generator obrazów lub chcesz obniżyć koszt, przejrzyj kod i podmień odpowiednie fragmenty. Możesz też użyć tylko części skillu do animowania wybranych sekcji.
Na co uważać: Podmiana wymaga zrozumienia kodu i może zaburzyć łańcuch generowania (klatki → wideo → montaż FFmpeg). Testuj na małym zakresie, zanim przebudujesz cały pipeline.
8.Zaplanuj czas — proces jest wolny i blokujący
Na czym polega: Pojedyncze zadanie generowania może trwać od trzech do ośmiu minut; skill ma to zakodowane, by model nie przekraczał timeoutów.
Jak stosować: Uruchamiaj generowanie, gdy masz czas na kilkuminutowe oczekiwanie. Wykorzystaj przestój na czytanie kodu skillu, tak jak robi to autor.
Na co uważać: To zadania blokujące — nie licz na natychmiastowy podgląd. Przy wielu scenach łączny czas rośnie i łatwo o niecierpliwe przerwanie w połowie.
9.Domyślne ustawienia = szybki prototyp, nie produkt
Na czym polega: Autor jawnie „poszedł na domyślnych” i uzyskał ładny, ale nieukierunkowany efekt; realne wdrożenie wymaga intencjonalności.
Jak stosować: Użyj domyślnych do szybkiego sprawdzenia koncepcji, a potem wróć i podaj konkretne informacje o marce, paletę, ton i wybrane sceny do animacji.
Na co uważać: Domyślny wynik może wyglądać efektownie, ale nie oddaje twojej marki. Nie myl „działającego demo” z gotowym do publikacji produktem.
10.Cała moc mieści się w zwykłym Claude Code — bez egzotycznego stacku
Na czym polega: Pełny efekt powstaje dzięki pojedynczemu skillowi w standardowym Claude Code, Codeksie lub podobnym narzędziu agentowym.
Jak stosować: Jeśli już pracujesz w agentowym IDE, wystarczy dołożyć skill i skonfigurować API obrazów — nie potrzebujesz osobnej platformy do „stron 3D”.
Na co uważać: Prostota wejścia nie znosi kosztów zewnętrznego API ani potrzeby zrozumienia procesu. Łatwość uruchomienia może kusić do niedbałych, kosztownych eksperymentów.