Jak działa fabryka faceless-wideo klasy RepoChad / CalebWritesCode — i jak zbudować ją w duchu wytwórni. Teza: styl nie jest talentem ani magią. Styl to plik konfiguracyjny — kilkanaście tokenów, ~10 komponentów CSS pisanych raz, 4 layouty i jedna doktryna ruchu. LLM przy masówce podaje wyłącznie dane.
To jedna z kilku rodzin stylistycznych gatunku. Każda rozkłada się na tokeny + komponenty + layouty + ruch. Rodzina = plik, nie talent.
106k subów w rodzinie „tablica wykładowa": przyrostowa czarna tablica + screenshoty-rekwizyty. Architektonicznie to tablica ciągła + ryciny, które wytwórnia już ma. Brakuje skinu, nie zdolności.
CSS komponentu pisze się RAZ i wchodzi do silnika. Dzisiejszy film powstał w trybie droższym (LLM pisał HTML per scena, ~650k tokenów) — to tryb R&D, nie fabryczny.
Element wchodzi na słowie lektora (timestampy), easing power3, licznik + wypełnienie na jednym easie. Tanie w kodzie; wymaga whispera — który i tak jest w roadmapie.
13 skinów (frame-presets), 22 blueprinty ujęć, 48 reguł ruchu, 12 adapterów — wszystko na dysku, ścieżki w §7. Nowego kodu potrzeba tyle, co cienki composer.
Sześć warstw. Kluczowa obserwacja: jedyna droga warstwa to nr 4 — i to jest dokładnie ta, którą tryb fabryczny zamienia na kod.
| # | warstwa | artefakt | kto | koszt dziś | koszt fabryczny |
|---|---|---|---|---|---|
| 1 | spec designu (tokeny + komponenty) | frame.md | raz, agent/człowiek | jednorazowy | 0 — plik skinu |
| 2 | storyboard: co i na którym słowie | STORYBOARD.md | LLM | ~10k tok. | mały LLM (JSON) |
| 3 | TTS + timestampy słów | audio_meta.json | kod | 0 tok. | 0 tok. |
| 4 | HTML+GSAP per scena | compositions/frames/*.html | 5 × LLM worker | ~650k tok. | 0 — composer z szablonów |
| 5 | napisy karaoke | compositions/captions.html | kod (szablon + timestampy) | 0 | 0 |
| 6 | montaż, przejścia, render | index.html → video.mp4 | kod (HyperFrames) | 0 | 0 |
Mechanika warstwy 4 to zwykły frontend plus dwie nieoczywistości, które są całą „sekretną wiedzą":
<template>; elementy z
data-start/data-duration to klipy na trackach.gsap.timeline({paused:true}); renderer przewija czas klatka po klatce i fotografuje.
Stąd twarde prawo determinizmu: zero Math.random, Date.now, CSS-animacji,
pętli; każde wejście przez fromTo.Poziom 1 — tokeny (kilkanaście wartości: tło, tusz, 3–5 akcentów, 2–3 fonty, promień, glow) → Poziom 2 — komponenty (10–30 linii CSS każdy, pisane raz) → Poziom 3 — layouty scen (5 szablonów starczyło na cały film) → Poziom 4 — ruch (5 ruchów + doktryna) → Poziom 5 — skin (tokeny + warianty = rodzina stylu; to jest „wariancja").
Poniżej komponenty poziomu 2 renderowane na żywo — to są dosłownie te same techniki CSS, które widzisz w filmie (kafle celowo trzymają jeden, ciemny świat — niezależnie od motywu tej strony; tak działa skin):
Poziom 4 — ruch. Pięć ruchów pokrywa cały gatunek, wszystkie po stronie kodu:
wejście (fromTo + power3.out), count-up (licznik + rosnąca skala),
fill (pasek wypełnia się na tym samym easie co licznik), draw
(stroke-dashoffset — linia się rysuje), karaoke (słowo rozjaśnia się na swoim
timestampie). Doktryna ważniejsza od ruchów: nic nie wchodzi, zanim lektor tego nie powie;
reveale w tylnej połowie sceny; gładki ogon zamiast bounce; stop-klatka lepsza niż zły ruch;
zero „oddychania".
Ciemna navy, neonowy akcent rotowany per scena, mono-kickery, hatch-bary, glow-karty, odręczne dopiski.
RepoChad (nasz test 1:1)
gotowiec: nasz frame.md z override'ami — gotowy do destylacji
Czarna tablica, przyrostowe odręczne diagramy (mapy, strzałki, wielokolorowa „kreda"), screenshoty-rekwizyty z różowymi dopiskami.
CalebWritesCode · 106k subów · kuzyn: 3Blue1Brown
DNA wytwórni (tablica ciągła + ryciny); brakuje: rough-stroke, font odręczny, multicolor
Kremowy papier, serif + mono, siatka milimetrowa, granatowy tusz. RepoChad zmienia skiny między filmami — odcinek z 14.08 był właśnie taki.
rodzina „notatnika inżyniera"
presety: cartesian · cobalt-grid · code-editorial · biennale-yellow
Wielka lowercase-typografia jako grafika, jeden wściekły akcent, płaska płaszczyzna, hairline'y.
kanały „motion essay"
presety: broadside (nasza baza) · bold-poster · capsule
Trzy wnioski z Caleba (mozaiki storyboardu w scratchpadzie: caleb_sb_M*.jpg):
(1) tablica przyrostowa — kolejne ujęcia to ta sama plansza + jeden element; różnica ze
slajdami wytwórni jest czysto skórkowa (rough kreska, odręczne etykiety, 4 kolory, czerwona
strzałka-wskaz); (2) screenshot jako rekwizyt — białe karty na czarnym + odręczne kółka NA nich;
(3) napisy chunkowane maszynowo, łamane w pół zdania — cecha całego gatunku, nie wada.
Jak rozpoznać HTML-owy rodowód kanału (nasza metoda śledcza): glify tekstowe zamiast ikon,
border: dashed, hatch z gradientu, liczniki złapane w pół animacji, napisy z
trailing-słowem następnego zdania, nieludzka kadencja publikacji, wpadki TTS wyłapane w komentarzach.
fromTo na każdym wejściu; zero random / wall-clock / CSS-animacji / pętlisweep_static z HANDOFF wytwórni)napis_dim)temat/tekst → SCENARZYSTA ─→ SCENOGRAF v2 ──→ composer.mjs ─→ hyperframes → film.mp4
[LLM: lektor │ [LLM: plansze.json v2: (KOD: skin +
+ plan scen]│ komponent+dane+kotwice] szablony → HTML)
└→ tts → whisper (timestampy) ───────┘ + captions z szablonu
Kontrakt plansze.json v2 — scena przestaje być
tytuł+punkty, staje się wywołaniem komponentów. Nadal mały task LLM, nadal schemat
z udowodnionym słownikiem (enum, minItems,
additionalProperties:false):
{ "scena": "s03",
"layout": "rows-stack",
"kicker": "PER MONTH",
"elementy": [
{ "typ": "hatch-bar", "label": "ChatGPT Pro", "nota": "highest usage tier",
"wartosc": 200, "sufiks": "$/month", "akcent": "green", "kotwica": "ChatGPT" },
{ "typ": "hatch-bar", "label": "Claude Max", "nota": "20x tier",
"wartosc": 200, "sufiks": "$/month", "akcent": "orange", "kotwica": "Claude" },
{ "typ": "hatch-bar", "label": "Cursor Ultra",
"wartosc": 192, "sufiks": "$/month", "akcent": "purple", "kotwica": "Cursor" } ] }kotwica = słowo lektora; composer znajduje jego timestamp u whispera i tam ustawia
wejście elementu. To ten sam mechanizm kotwic, który wytwórnia ma już w rezyseria.json —
rozciągnięty na każdy element wizualny. skin.json = tokeny + parametry komponentów;
drugi skin = drugi plik, zero zmian w composerze. composer.mjs — jedyny nowy kod,
cienki: skin + plansze + timestampy → HTML z szablonów (szablony destylujemy z naszych 5 klatek,
nie piszemy z powietrza).
Destylacja 9 komponentów i 5 ruchów z naszych klatek do komponenty/*.mjs +
skiny/repochad-dark.json.
Claude pisze BRIEF promptu (gramatyka komponentów + kotwice + schemat); prompt produkcyjny pisze codex1 (doktryna). Flagi zamiast stopów, jak w wytwórni.
Whisper wg gotowych przepisów (matura_PL_2/pipeline/transkrybuj.py, napisy.py);
kotwice → czasy wejść; skin napisów karaoke na czekający track 3.
„blackboard-lecture" à la Caleb: rough-stroke z jitterem z indeksu (nie z randoma), font odręczny, 4 kolory kredy, czerwona strzałka-wskaz, screenshot-rekwizyt z kółkiem. To zarazem najbliższy lifting obecnej estetyki wytwórni — rozważ wykonanie E4 jako pierwszego.
Czego nie robić: frameworka skinów „na zapas", rejestru komponentów, guardów. Komponent dopisujemy, gdy scenariusz go potrzebuje (KISS/Pareto). Port do wytwórni dopiero po zielonych E1+E2 w sandboxie.
| co | gdzie (lokalnie) |
|---|---|
| 5 klatek-wzorców (działający deterministyczny GSAP) | videos/local-ai-break-even/compositions/frames/*.html |
| spec skinu dark-dashboard | videos/local-ai-break-even/frame.md |
| skin napisów karaoke (3 stany słowa, lewe kotwiczenie) | videos/local-ai-break-even/.hyperframes/caption-skin.html |
| format timestampów słów | videos/local-ai-break-even/audio_meta.json |
| 13 gotowych skinów (tokeny + komponenty w YAML) | ~/.claude/skills/hyperframes-creative/frame-presets/ |
| 48 reguł ruchu (przepisy seek-safe) | ~/.claude/skills/hyperframes-animation/rules/ |
| 22 blueprinty ujęć + 12 adapterów runtime | ~/.claude/skills/hyperframes-animation/blueprints/ · adapters/ |
| doktryna ruchu (anty-PowerPoint, anty-bounce) | ~/.claude/skills/faceless-explainer/references/motion-language.md |
| silnik i pułapki wytwórni (sweep_static, kontrast, pin) | misc/wytwornia/HANDOFF.md · etapy/slajdy.mjs |
| mozaiki storyboardu Caleba (referencja skinu E4) | scratchpad sesji: caleb_sb_M0/M1/M3.jpg |
gsap.timeline({paused:true}) w window.__timelines[id]; renderer sam ustawia tl.time(t).