Od Claude Design do filmu MP4 w Remotion — pipeline bez Premiere'a

161-sekundowy film promo do open-source'owego projektu. 1920×1080, dark synthwave w tle, angielski lektor, 14 slajdów z animacjami. Jedno popołudnie od pustego katalogu do gotowego MP4 w out/. Bez Adobe Premiere, bez After Effects, bez kupowania muzyki na stocku. Trzy narzędzia wystarczą: Claude Design na mockupy, Replicate na audio, Remotion na render.

Poniżej pipeline krok po kroku. Co gdzie się dzieje, który model za co odpowiada, które decyzje oszczędzają najwięcej czasu.

Kontekst — po co ten film

Projekt codehelm: lokalny command center do sesji Claude Code CLI. Next.js 15, 564 testy, cały threat model opisany w README. Potrzebowałem krótkiej prezki, którą da się wrzucić na LinkedIn albo podpiąć pod release. Tekst w README robi robotę dla kogoś, kto już kliknął w repo. Dla kogoś scrollującego feed potrzeba obrazów i ruchu.

Budżet: jedno popołudnie. Żadnych freelancerów, żadnego Premiere'a (i tak bym go zepsuł).

Pipeline — 5 kroków

1. Design prezentacji w Claude Design

Claude Design to narzędzie Anthropica do prototypowania interfejsów w HTML/CSS/JS. Poprosiłem model o 14 slajdów w dark-mode aesthetic: czerń #0a0a0a, złoty akcent #ffcc33, JetBrains Mono. Po kilku iteracjach miałem codehelm-overview.html z całą prezentacją. Corner tick-marks, spec-listy, tile'e, placeholdery terminala.

Jeden detal wart zapamiętania. Claude Design zwraca handoff bundle — .tar.gz z HTML, CSS i osobnym README dla kolejnego agenta. Ten README jawnie mówi "nie renderuj tego w przeglądarce, czytaj źródło", bo wymiary, kolory i animacje są w CSS, a screenshot niczego nie doda.

2. Port do Remotion

Wiesz, co mnie kusiło? Rendering prezentacji w iframe. Skoro Claude Design zwraca gotowy HTML, można by go po prostu zrzucić do iframe w Remotion i klepać klatki. Brzmi pragmatycznie. Traci deterministyczny timing pod H.264 encoder, bo CSS animacje w iframie są poza kontrolą Remotion scheduler'a.

Rozwiązaniem jest port do natywnego Reacta.

Remotion to framework do renderowania video z Reacta. Każdy komponent dostaje useCurrentFrame() i rysuje swoje animacje jako funkcje klatki. Zero CSS @keyframes, zero transition. Dzięki temu klatka 123 zawsze wygląda tak samo, co by się nie działo.

Port wyglądał tak:

• 14 plików src/slides/Slide01Title.tsx do Slide14Outro.tsx
• Shared primitives w src/shared/: SlideFrame z corner marks i meta-strips, ui.tsx z Badge, Tile, Speclist, Term i Cursor, animations.ts z fadeIn, slideInR, scaleIn jako interpolate helpers
• JetBrains Mono przez @remotion/google-fonts/JetBrainsMono, blokuje render dopóki font się nie załaduje

Animacje oryginału (fade-in, slide-in-r, scale-in z d1 do d8 delays) przemapowałem na wywołania interpolate(frame - delay, [0, duration], [0, 1], { easing }). Taki sam look, deterministyczny timing.

3. Muzyka przez Replicate MusicGen

Epicki synthwave na 150 sekund, instrumental, bez wokalu. Model: meta/musicgen z wariantem stereo-large. Replicate API przyjmuje prompt, duration i format wyjściowy mp3. Jedno zapytanie, około 3 minuty renderu po stronie Replicate, gotowy plik do pobrania.

Prompt, który zadziałał:

dark synthwave, cyberpunk cinematic, analog pad drones, arpeggiated bass synth, slow driving tempo 95 bpm, moody film score, Blade Runner meets Mr Robot, instrumental only, no vocals, wide stereo

Koszt: kilka centów. Jakość: na tyle dobra, że na blind test nie odróżnisz od Hansa Zimmera w akcji drugiego planu. Jestem tego pewien, bo testowałem na kilku osobach.

4. Lektor przez Replicate Kokoro-82M

jaaari/kokoro-82m to model TTS oparty o StyleTTS2, released w styczniu 2025. W chwili pisania najbardziej naturalny open-source TTS dostępny jednym API callem. Voice am_michael: dojrzały męski, "serious tech" ton.

Narracja jest podzielona na 14 chunków, po jednym per slajd. Dzięki temu jeśli któryś brzmi dziwnie, regeneruję tylko jeden — kasuję public/audio/narration/slide-12-security.wav, odpalam pnpm narration -- --only=12 i gotowe.

Chunki mają po 10-15 sekund, cały zestaw wygenerował się w minutę. Długość każdego audio zmierzyłem przez ffprobe i wpisałem do src/narration-meta.ts. Od tego momentu Composition wie dokładnie, kiedy zaczynać każdy <Audio>.

5. Composition + render

Timeline robi <TransitionSeries> z Remotion Transitions. 14 slajdów, 13 fade() po 15 klatek (0.5s). Narracja siedzi poza TransitionSeries, jako <Sequence from={cumulativeStart + 12}>. Każdy chunk startuje 12 klatek po tym, jak slajd jest w pełni widoczny.

Muzyka to jeden <Audio loop loopVolumeCurveBehavior="extend"> pod wszystkim, volume jako funkcja klatki: fade-in przez 18 klatek, constant 0.28, fade-out przez 75 klatek na końcu. Wartość extend zamiast repeat, bo repeat resetuje licznik klatki każdej iteracji i volume curve się rozjeżdża. Na tym utknąłem na 10 minut. Pierwszy render umarł od razu z błędem "NaN in volume callback for frame NaN" i szukałem go przez chwilę w swojej matematyce. Przełączenie na extend też to naprawiło.

Render: pnpm render. 4845 klatek 1920 na 1080, concurrency 4, około 3 minuty na laptopie. Wynik: out/codehelm-overview.mp4, 14.3 MB.

Narzędzia

Dziewięć warstw, każda ma dokładnie jedno zadanie:

• Claude Design — 14 slajdów HTML/CSS jako specyfikacja
• Remotion 4.0 — React na MP4, deterministyczne klatki
• @remotion/transitions — fade 0.5 sekundy pomiędzy slajdami
• @remotion/media — <Audio> z volume callbackami
• @remotion/google-fonts — JetBrains Mono bez pobierania ręcznego
• meta/musicgen na Replicate — 150 sekund instrumentalnego synthwave
• jaaari/kokoro-82m na Replicate — 14 chunków TTS, voice am_michael
• ffprobe — długość każdego audio chunk
• pnpm + tsx + TypeScript 5.7 — skrypty generacji i Remotion CLI

Co to daje

Pipeline jest reproducible. Z jednego narration.json (prompt muzyki, tekst lektora, voice, version hashes modeli) odtworzę ten sam film za tydzień, za miesiąc, na innej maszynie. Regeneracja pojedynczego slajdu to jeden commit w tekście narracji. Dodanie nowego slajdu to jeden plik .tsx i jeden wpis w slideOrder.

Cały projekt to z grubsza 1500 linii kodu plus gotowy MP4. Budżet: token Replicate warty kilka centów za oba modele razem.

Trzy narzędzia. Jedno popołudnie. Film, który nie wygląda jak wygenerowany przez AI. No i właśnie, wygenerowany przez AI, ale przynajmniej design system jest spójny, a lektor nie brzmi jak GPS z 2007 roku.