Motion graphics z Opus 5.5 i Remotion - poradnik krok po kroku

👁 115 przeczytań

Wideo motion graphics z Opus 5.5 i Remotion da się zrobić bez programu do montażu: model pisze kod w React, a Remotion zamienia go w plik MP4. Na X krąży hasło „motion graphics z jednego promptu”, więc sprawdziłem je dosłownie. 26 września 2026 postawiłem czysty projekt Remotion na Windowsie, wysłałem Opusowi 5.5 jedno polecenie przez API i wyrenderowałem 9-sekundową zapowiedź naszego Laboratorium. Poniżej każdy krok, czasy, koszt i to, czego viralowe wpisy nie mówią.

Co naprawdę stoi za viralem

Opus 5.5 nie generuje obrazu jak Kling czy Veo. Serwis OrcaRouter ujął to trafnie: model „pisze, a potem reżyseruje program, który renderuje wideo”. W analizowanym przez nich przykładzie film powstał w dwóch generacjach, nie w jednej. Danny Stuart opisał na Substacku pracę w Claude Code na Opusie 5.5 z wysiłkiem „Extra”: pierwszy film był gotowy po około 10 minutach, przy kolejnym potrzebował 2-3 cykli renderu.

„Z jednego promptu” to też nie jedna technika. Remotion (React, każda klatka to funkcja numeru klatki) jest najpopularniejszy, ale repozytorium Barty-Bart/motion-graphics renderuje strony HTML w bezgłowym Chromium, a agentic-motion-graphics korzysta z HyperFrames i dokłada lektora z TTS. Firma Motion (@motion_so) sprzedaje z kolei gotowy skill „Motion in Claude”, który z adresu produktu robi film promocyjny.

Krok 1: projekt Remotion

Użyłem Node 26.10 i npm 11.18. Kreator ma tryb bez pytań, co przydaje się też agentowi:

npx create-video@latest --yes --blank --no-tailwind laboratorium
cd laboratorium
npm i

Instalacja zależności trwała 62 sekundy i zajęła 330 MB w node_modules. Dwie rzeczy mnie zaskoczyły. Kreator zgłosił błąd przy tworzeniu repozytorium git, ale projekt i tak powstał. A mimo flagi --no-tailwind w package.json i konfiguracji został Tailwind v4. Nie przeszkadza w renderze, ale warto o tym wiedzieć przed sprzątaniem zależności.

Krok 2: skill Remotion dla agenta

Remotion udostępnia oficjalne „Agent Skills”, czyli instrukcje dla Claude Code, Codeksa czy Cursora:

npx skills add remotion-dev/skills -a claude-code -s remotion-best-practices -y --copy

Instalacja trwała 5 sekund i wrzuciła do .claude/skills/ 139 plików. Główny plik jest tylko rozdzielnikiem: kieruje agenta do właściwego działu (animacja, napisy, mapy, render). Claude Code doczytuje tylko to, czego potrzebuje. W moim teście przez API wkleiłem ręcznie dwa pliki: rozdzielnik i dział o animacji, razem około 5,5 tys. tokenów.

Krok 3: polecenie

Wysłałem to samo polecenie dwa razy przez OpenRouter, z wysiłkiem medium: raz samo (wariant A), raz ze skillem w wiadomości systemowej (wariant B). Całe polecenie:

Mam świeży projekt Remotion 4 (szablon „blank", React 19, TypeScript). Plik src/Root.tsx importuje `MyComposition` z ./Composition i renderuje <MyComposition />. Napisz kompletną nową zawartość pliku src/Composition.tsx.

Wymagania techniczne:
- `MyComposition` zwraca <Composition id="Laboratorium" ... /> o wymiarach 1280x720, 30 fps, 9 sekund (270 klatek).
- Tylko pakiet `remotion` i React. Żadnych zewnętrznych obrazów, fontów, bibliotek ani plików audio.
- Każda animacja liczona z useCurrentFrame() (interpolate, spring). Żadnych animacji CSS.

Treść - zapowiedź testu na blogu promptowy.com:
1. „Laboratorium Promptowego" - tytuł wjeżdża, pod nim „test modeli AI po polsku".
2. Dwa liczniki odliczające od zera: „16 modeli" i „13 zadań".
3. „Zwycięzca: Claude Opus 5.5" i wynik „90,1 pkt" z paskiem wypełniającym się do 90,1%.
4. Outro: „promptowy.com/laboratorium-promptowego".

Styl: motion design jak z dobrego studia, nie slajdy z PowerPointa. Ciemne tło (#0e0d0c), ostre krawędzie, bez zaokrągleń i cieni, akcent w kolorze wypalonej gliny (#c46a3c), jasny tekst (#f2ede6), duża bezszeryfowa typografia (font systemowy), dynamiczne przejścia między scenami, rytm i przesunięcia w czasie (stagger). Polskie znaki muszą się wyświetlać poprawnie.

Zwróć wyłącznie kod pliku w jednym bloku ```tsx.

Liczby w filmie pochodzą z naszego Laboratorium Promptowego. Zwróć uwagę, ile w poleceniu jest decyzji: wymiary, czas, cztery sceny, kolory w HEX, zakazy. To one robią robotę, nie magiczne słowa.

Krok 4: render

npx tsc --noEmit
npx remotion render Laboratorium out/wariant-B.mp4

Pierwszy render trwał 20 sekund, bo Remotion pobrał Chrome Headless Shell (113,3 MB). Kolejne: 9,5 s dla wariantu A i 9,7 s dla B, przy 8 równoległych kartach. Plik ważył 956 kB, po ponownej kompresji w ffmpeg 394 kB.

Wynik: wariant bez skilla i ze skillem

Skill zmienił styl kodu, a nie wygląd. Wariant B w 16 miejscach użył właściwości CSS scale, translate i rotate, jak zaleca dokumentacja skilla, a wariant A ani razu. Oba filmy mają jednak niemal ten sam układ: siatkę, pasek postępu, numerację scen w rogu. Dołożenie skilla podniosło rachunek o 0,023 USD, czyli około 9 groszy. Nowszych funkcji z opisu skilla (Interactive.Div, Easing.spring) model nie użył w ogóle.

Co z „jednego promptu” jest prawdą

• Prawda: jedna wiadomość dała kod, który się skompilował i wyrenderował. W dwóch próbach na dwie, zero poprawek.
• Półprawda: projekt postawiłem sam, a polecenie zawierało gotowy scenariusz, paletę i wymiary. Bez tego model zgadywałby treść i styl.
• Nieprawda: „bez poprawek” nie znaczy „bez usterek”. Przez API model nie widzi klatek. W Claude Code agent może sam wyrenderować film i obejrzeć klatki, tak działa np. skill haidrrrry/claude-remotion-skill (licencja MIT), ale wtedy to już kilka lub kilkanaście kroków, a nie jedna odpowiedź.

To opinia redakcji: do zapowiedzi, liczników i animowanych wykresów to działa już dziś. Do realistycznych ludzi i plenerów dalej potrzebny jest generator wideo. Pracę agentową opisujemy w przewodniku po Claude Code, a dobór wysiłku w tekście o poziomach effort.

Licencja Remotion: za darmo nie dla każdej firmy

Remotion jest bezpłatny dla osób prywatnych, organizacji non-profit i firm zatrudniających do 3 osób. Większa firma potrzebuje licencji firmowej. Cennik na remotion.pro: 25 USD miesięcznie za stanowisko (ok. 96 zł) w planie dla twórców, 0,01 USD za render przy minimum 100 USD miesięcznie (ok. 386 zł) przy automatyzacji i od 500 USD miesięcznie w planie Enterprise. Sam kreator przypomina o tym komunikatem po instalacji. Koszt samego modelu liczysz osobno, według cennika Opus 5.5.

Windows: co się wysypało

Nic, co blokowało render. Po drodze pojawiły się trzy komunikaty: błąd tworzenia repozytorium git w kreatorze, ostrzeżenie Node 26 o przestarzałym module.register() oraz ostrzeżenie npm 11, że skrypt instalacyjny esbuild nie został uruchomiony bez zgody. Szablon buduje przez Rspack, więc brak esbuild niczego nie zepsuł.

Film można też zrobić bez Remotion, na samym canvasie w przeglądarce. Tak powstał nasz 60-sekundowy showreel opisany w tekście motion graphics z Opus 5.5.

Najczęstsze pytania

Czy potrzebuję Claude Code, żeby zrobić wideo w Remotion z Opusem 5.5?

Nie. Wystarczy API albo czat i wklejenie kodu do projektu. Claude Code dokłada automatyczny render i sprawdzanie klatek, czego w moim teście przez API brakowało.

Ile kosztuje taki film?

W moim teście 0,31-0,34 USD za kod 9-sekundowego klipu, czyli 1,21-1,30 zł. Render na własnym komputerze nic nie kosztuje, ale firma powyżej 3 osób płaci za licencję Remotion.

Czy skill Remotion poprawia wynik?

W jednym porównaniu zmienił sposób pisania animacji i usunął dwie usterki tekstowe, ale dodał inną. Jedna próba to za mało, żeby ogłosić zwycięzcę.

Czy do renderu potrzebna jest mocna karta graficzna?

Nie. Klatki rysuje przeglądarka Chrome Headless Shell, a 270 klatek wyrenderowało się w 9,5 sekundy.