# ROZKMINA — styl jako dane: fabryka faceless-wideo w duchu wytwórni

> **STATUS 2026-08-28 wieczór: E1 + E4 ZROBIONE I PRZEKROCZONE.** Mini-fabryka działa:
> `fabryka/generuj.mjs` (composer, ~130 linii) + `fabryka/komponenty.mjs` +
> `komponenty-extra.mjs` (21 builderów scen) + `fabryka/skiny/*.json` (8 skinów) +
> 3 skiny napisów. Wyprodukowano **20 filmów** (`videos/f01…f20/renders/*.mp4`),
> wszystkie przechodzą `hyperframes check`; test koronny (f01) odtworzył film
> rzemieślniczy z czystych danych + skopiowanego audio przy ZERO tokenów na klatki;
> f20 renderuje te same dane w 4 skinach ("style is a file"). Uruchomienie jednego
> filmu: `npx hyperframes init videos/<id> …` → `film.json` → `node
> fabryka/generuj.mjs videos/<id> --tts` → `npx hyperframes check && render`.
> Opłacone lekcje: ID elementów nie mogą zaczynać się cyfrą (CSS selektor);
> hatch-fill/track muszą być `display:block`; kickery na jasnych skinach w tuszu
> (opcja `kicker.ink`); caret terminala = `data-layout-allow-overlap`; geometria
> SVG zawsze względem viewBoxu.
>
> **E2 również ZROBIONE (2026-08-28 noc):** codex1 napisał prompt produkcyjny
> (`fabryka/prompty/SCENOGRAF_V2.md`; brief `BRIEF_scenograf_v2_dla_codex1.md`;
> schemat `fabryka/plansze-v2.schema.json`). Test end-to-end na REALNYM transkrypcie
> RepoChada (yt-dlp audio + `whisper-cli` large-v3-turbo, przepis z matura_PL_2) →
> scenograf (gpt-5.6-sol na codex2 — codex1 złapał limit tuż po napisaniu promptu)
> wybrał cards-list / hero-stat / flow / compare / verdict-stack, ZERO flag,
> wszystkie liczby wierne źródłu → `videos/f22-repochad-transcript/renders/f22.mp4`
> (1:42, check passed). Errata do promptu v2.1: pole `ikona` = pojedynczy glif (✓),
> nie słowo — LLM wpisał "check" i wyrenderowało się jako tekst. Runner:
> `fabryka/e2/scenograf_run.py`. Test f21 (rate limiting) czeka na reset limitów
> codex1/codex2 (skrypt: scratchpad sesji `e2-pelny.sh`). Pozostał port do wytwórni:
> E3 (whisper — w sandboxie Kokoro daje timestampy słów z natury).

> Sandbox: `misc/identyfikacja_yt` · 2026-08-28 · autor: sesja Claude (identyfikacja
> RepoChada → test odtworzenia → ta rozkmina). Dowód rzeczowy: gotowy film
> `videos/local-ai-break-even/renders/video.mp4` (41,7 s, 650k tokenów w trybie
> rzemieślniczym) + 5 klatek-wzorców w `videos/local-ai-break-even/compositions/frames/`.

## 0. TL;DR — pięć tez

1. **Styl "RepoChada" nie jest niczym szczególnym.** To jedna z kilku RODZIN
   stylistycznych faceless-explainerów. Każda rodzina rozkłada się na: ~10 tokenów
   designu + ~10 komponentów CSS + 4 layouty scen + wspólną doktrynę ruchu.
   Rodzina ≠ magia; rodzina = plik konfiguracyjny.
2. **CalebWritesCode (106k subów) to rodzina "tablica wykładowa"** — czarna tablica,
   przyrostowe odręczne diagramy, screenshoty-rekwizyty z dopiskami. Architektonicznie
   to jest TO SAMO co wytwórnia (tablica ciągła + ryciny + panel). Wytwórni nie brakuje
   stylu jako zdolności — brakuje jej dopracowanego SKINU i 2–3 komponentów.
3. **Tak — fabryka składa gotowce.** CSS komponentu pisze się RAZ (ręcznie albo agentem,
   testuje raz, wchodzi do silnika); LLM przy masówce podaje wyłącznie DANE (JSON:
   który komponent, jakie liczby, jaki akcent, na którym słowie lektora wejść).
   Dzisiejszy film powstał w trybie droższym — LLM pisał bespoke HTML per scena
   (~130k tokenów/klatka, ~650k/film). To tryb rzemieślniczy/R&D. Fabryczny tryb
   komponentowy zbija koszt do poziomu obecnego scenografa (pojedyncze tysiące).
4. **"Premium feel" to w 80% synchronizacja, nie CSS.** Trzy tanie rzeczy robią różnicę:
   (a) element wchodzi na ekran dokładnie na słowie lektora (timestampy słów),
   (b) easing `power3` (gładki ogon) zamiast bounce,
   (c) licznik i wypełnienie paska lądują na JEDNYM easie jako jeden beat.
   Timestampy = whisper, który i tak jest w roadmapie wytwórni (kotwice już są w danych).
5. **Gotowców jest mnóstwo do zrzynania, lokalnie na dysku:** 13 skinów
   (frame-presets), 22 blueprinty ujęć, 48 reguł ruchu, 12 adapterów runtime —
   ścieżki w §7. Nie piszemy niczego "od zera" poza cienkim composerem.

---

## 1. Anatomia dzisiejszego filmu (jak to naprawdę powstało)

Sześć warstw; przy każdej — kto ją robi i ile kosztuje:

| # | Warstwa | Artefakt | Kto | Koszt dzisiaj | Koszt w trybie fabrycznym |
|---|---------|----------|-----|---------------|---------------------------|
| 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 | mały LLM (JSON) |
| 3 | TTS + timestampy słów | `audio_meta.json`, `assets/voice/*.wav` | kod (Kokoro/box) | 0 tokenów | 0 tokenów |
| 4 | HTML+GSAP per scena | `compositions/frames/*.html` | **5× LLM worker** | **~650k** | **0 — composer składa z szablonów** |
| 5 | Napisy karaoke | `compositions/captions.html` | kod (szablon+timestampy) | 0 | 0 |
| 6 | Montaż + przejścia + render | `index.html` → `renders/video.mp4` | kod (HyperFrames) | 0 | 0 |

Wniosek strukturalny: **jedyna droga warstwa (4) jest jedyną, którą tryb fabryczny
zamienia na kod.** Wszystko inne już dziś jest "przebieg = kod".

Mechanika warstwy 4 (to, co znasz z HTML/CSS/JS, plus dwie nieoczywistości):

- Kompozycja to zwykły HTML we fragmencie `<template>`; elementy z `data-start` /
  `data-duration` to "klipy" na osi czasu.
- Cały ruch żyje w JEDNYM `gsap.timeline({paused: true})` zarejestrowanym w
  `window.__timelines`. Renderer NIE odtwarza filmu — **przewija (seek) klatka po
  klatce i fotografuje**. Stąd twarde prawo determinizmu: zero `Math.random`,
  `Date.now`, CSS `transition/@keyframes`, nieskończonych pętli; każde wejście przez
  `fromTo` (stan początkowy zadeklarowany jawnie). To jest 90% "sekretnej wiedzy"
  agentów o HyperFrames — reszta to zwykły frontend.

---

## 2. Elementarz: z czego składa się styl (5 poziomów)

**Poziom 1 — TOKENY** (kilkanaście wartości): tło, kolor tuszu, 3–5 akcentów,
2–3 fonty (display / mono / odręczny), promień, intensywność glow. U nas:
`videos/local-ai-break-even/frame.md` (sekcja `colors:` + `typography:`).

**Poziom 2 — KOMPONENTY** — każdy to 10–30 linii CSS, pisane RAZ. Dziewięć
komponentów pokryło 100% języka RepoChada; esencje:

```css
/* hatch-bar — pasek "przemysłowy" (cała tajemnica w jednej linii) */
background: repeating-linear-gradient(45deg, var(--acc) 0 6px, transparent 6px 12px);
border: 1px solid var(--acc); border-radius: 999px;
box-shadow: 0 0 1.6cqw rgba(var(--acc-rgb), .35);        /* glow */

/* glow-card — karta z neonową obwódką */
background:#131A2E; border:1px solid var(--acc); border-radius:1.2cqw;
box-shadow: 0 0 2.4cqw rgba(var(--acc-rgb),.25), inset 0 0 1.2cqw rgba(var(--acc-rgb),.08);

/* dashed-pill — badge "odręczna uwaga" */
border: 1.5px dashed var(--acc); border-radius: 999px; font-family: "Caveat";

/* kicker — mikro-nagłówek mono (sygnatura całego gatunku) */
font-family:"IBM Plex Mono"; font-size:.68cqw; letter-spacing:.32em; text-transform:uppercase;
```

Pełna lista naszych 9: `kicker-spark`, `glow-card`, `badge-on-border`, `dashed-pill`,
`hatch-bar`, `threshold-line` (przerywana linia progu na wykresie), `check-item`,
`annotation` (Caveat + nieregularne podkreślenie SVG), payoff-line. Ikony = glify
tekstowe (✓ ✳ ⏱ →), nigdy ikonofonty.

**Poziom 3 — LAYOUTY SCEN** — cztery szablony pokryły cały film referencyjny:
`centered-hero` (wielka liczba/słowo), `card-stage` (karta produktu), `rows-stack`
(2–4 wiersze pasków), `chart-stage` (wykres + badge), `verdict-stack` (checki+payoff).
Dół ~17% kadru zawsze wolny (pas napisów); hero kotwiczy na y≈0,42 wysokości.

**Poziom 4 — RUCH** — pięć ruchów wystarcza na cały gatunek, wszystkie po stronie kodu:

| Ruch | Esencja | Nasz wzorzec (plik) |
|---|---|---|
| wejście | `fromTo(el,{y:24,opacity:0},{y:0,opacity:1,ease:"power3.out"})` | każda klatka |
| count-up | licznik + skala rosnąca z wartością | `01-rent-math.html` |
| fill | pasek/pierścień wypełnia się NA TYM SAMYM easie co licznik | `03-subscription-wall.html` |
| draw | linia/podkreślenie rysuje się (`stroke-dashoffset`) | `02-…` (podkreślenie), `04-…` (wykres) |
| karaoke | słowo rozjaśnia się na swoim timestampie | `compositions/captions.html` |

Doktryna (ważniejsza od samych ruchów): **nic nie wchodzi, zanim lektor tego nie
powie** (anty-PowerPoint; reveale rozłożone w tylnej połowie sceny), gładki ogon
zamiast bounce, stop-klatka lepsza niż zły ruch, żadnego "oddychania" elementów.

**Poziom 5 — SKIN** = tokeny + warianty komponentów + dobór fontów. Zmiana skinu
nie dotyka composera ani danych. Skin to jest właśnie "wariancja" z Twojego pytania.

---

## 3. Rodziny stylistyczne (research YT + mapowanie na gotowce)

| Rodzina | Cechy | Przykład na YT | Gotowiec w presetach |
|---|---|---|---|
| **dark-dashboard** | ciemna navy, neonowe akcenty per scena, mono-kickery, hatch-bary, glow-karty, odręczne dopiski | RepoChad (nasz test 1:1) | brak 1:1 — nasz `frame.md` z override'ami JEST tym skinem (gotowy do destylacji) |
| **blackboard-lecture** | czarna tablica, przyrostowe odręczne diagramy (mapy, strzałki, wielokolorowa "kreda"), screenshoty-rekwizyty z różowymi dopiskami | **CalebWritesCode, 106k** ; kuzyn: 3Blue1Brown | DNA wytwórni (tablica ciągła + ryciny); brakuje: rough-stroke, font odręczny, multicolor |
| **paper/editorial** | kremowy papier, serif+mono, siatka milimetrowa, granatowy tusz | (odcinek RepoChada z 14.08 — tak, oni ZMIENIAJĄ skiny między filmami!) | `cartesian`, `cobalt-grid`, `code-editorial`, `biennale-yellow` |
| **poster/brutalist** | wielka lowercase typografia, jeden wściekły akcent, płasko | typowe kanały "motion essay" | `broadside` (nasza baza), `bold-poster`, `capsule` |
| **candy/pop** | pastele, 4px czarne bordery, hard shadows | kanały lifestyle/edu dla młodszych | `blockframe`, `daisy-days`, `coral` |

Trzy wnioski z Caleba (mozaiki storyboardu w scratchpadzie sesji: `caleb_sb_M*.jpg`):

1. **Tablica przyrostowa** — kolejne ujęcia to TA SAMA plansza + jeden element więcej.
   Wytwórnia ma to w kontrakcie ("tablica nowa-ciągła z kontynuacją"). U Caleba
   różnica jest czysto skórkowa: kreska wygląda na rysowaną ręką (rough), etykiety
   odręcznym pismem, 4 kolory kredy, czerwona strzałka jako "wskaz".
2. **Screenshot jako rekwizyt** — prawdziwe wykresy/tabele wklejone jako białe karty
   na czarnym tle + odręczne kółka/strzałki NA nich. To wytwórniowe "ryciny" +
   nasz komponent `annotation`.
3. **Napisy chunkowane maszynowo** (łamane w pół zdania) — ten sam rodowód pipeline'u
   co RepoChad i nasz test. Cały gatunek tak ma; nikt tego nie uważa za wadę.

Jak rozpoznać HTML-owy rodowód kanału (nasza metoda śledcza, do reużycia):
glify tekstowe zamiast ikon, `border: dashed`, hatch z gradientu, liczniki łapane
w pół animacji, napisy łamane w pół zdania z trailing-słowem następnego zdania,
kadencja publikacji niemożliwa dla człowieka, TTS-owe wpadki wymowy w komentarzach.

---

## 4. Sufit możliwości paradygmatu HTML→wideo

**Co jest w zasięgu ręki** (istnieje gotowa reguła/blueprint — §7 ścieżki):
kinetic typography (slam/relay/typewriter/decode-flip), liczniki i gauge'y, wykresy
rysujące się (linia/słupki/pierścienie/scrub z tooltipem), diagramy węzły+krawędzie,
SVG self-draw, marker-emphasis (kółko/highlight/scribble), kamera wirtualna
(push/pan/zoom-to-target, multi-phase), pseudo-3D (tilt kart, page-scroll 3D, depth
scatter), glitch chromatyczny, particle-burst (deterministyczny!), morph kart, FLIP,
Lottie, a nawet Three.js/WebGL i shadery (adapter jest — ale to już tryb drogi).

**Czego unikać / co poza gatunkiem:** prawdziwa fizyka i symulacje, character
animation / lip-sync, fotorealistyczne 3D, "żywe" losowe particle fields (determinizm
zabrania losowości — wszystko musi wynikać z indeksu elementu), montaż realnego
footage jako podstawa (to inny gatunek — wytwórnia ma od tego ryciny/wideo-tracki).

**Twarde prawa** (obowiązują każdy komponent, który wejdzie do silnika):
jeden spauzowany timeline na kompozycję, `fromTo` na każdym wejściu, zero
random/wall-clock/CSS-animations/pętli, offsety wejść PROPORCJONALNE do trwania
sceny (lekcja z pułapki `sweep_static` w HANDOFF wytwórni), kontrast AA (opłacona
lekcja `napis_dim` — u nas dziś to samo wyszło w `check`: przygaszone kickery
wymagały podbicia alfa).

---

## 5. Architektura mini-fabryki (sandbox tutaj, potem port do wytwórni)

```
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 słów) ──┘   + captions z szablonu
```

**Kontrakt `plansze.json` v2** — scena przestaje być `tytul+punkty`, staje się
wywołaniem komponentu (nadal mały task LLM, nadal schemat z udowodnionym słownikiem
`enum` / `minItems` / `additionalProperties:false`):

```json
{ "scena": "s03",
  "layout": "rows-stack",
  "akcent_rotacja": ["green", "orange", "purple"],
  "kicker": "PER MONTH",
  "elementy": [
    { "typ": "hatch-bar", "label": "ChatGPT Pro", "nota": "highest usage tier",
      "wartosc": 200, "sufiks": "$/month", "kotwica": "ChatGPT" },
    { "typ": "hatch-bar", "label": "Claude Max", "nota": "20x tier",
      "wartosc": 200, "sufiks": "$/month", "kotwica": "Claude" },
    { "typ": "hatch-bar", "label": "Cursor Ultra", "wartosc": 192,
      "sufiks": "$/month", "kotwica": "Cursor" }
  ] }
```

`kotwica` = słowo lektora; composer znajduje jego timestamp w wyniku whispera i tam
ustawia wejście elementu. To jest DOKŁADNIE mechanizm kotwic, który wytwórnia już ma
w `rezyseria.json` — tu tylko rozciągnięty na każdy element wizualny.

**`skin.json`** = poziom 1+2+5 z §2 w jednym pliku (tokeny + parametry komponentów).
Drugi skin = drugi plik. Zero zmian w composerze.

**`composer.mjs`** (jedyny nowy kod, cienki): czyta skin + plansze v2 + timestampy →
skleja kompozycje z szablonów komponentów (te same prawa co dziś `slajdy.mjs`) →
`index.html`. Szablony NIE powstają z powietrza: destylujemy je z naszych 5 klatek.

**Ekonomia na film ~40 s:** tryb rzemieślniczy (dziś): ~650k tokenów, ~35 min ściany
zegara, pełna dowolność layoutu. Tryb fabryczny: tokeny = scenarzysta+scenograf
(pojedyncze tysiące), render 1–2 min, wariancja layoutu ograniczona do gramatyki
komponentów — przy skinach i rotacji akcentów niezauważalne w skali setek filmów.
Hybryda: flaga "premium" wysyła workera-LLM tylko do 1–2 hero-scen odcinka.

---

## 6. Plan wdrożenia — 4 małe etapy (każdy = osobna wartość, w duchu potok.py)

**E1 — Biblioteka komponentów + skin "repochad-dark" (sandbox, bez LLM).**
Destylacja 9 komponentów i 4 ruchów z `videos/local-ai-break-even/compositions/frames/`
do `komponenty/*.mjs` + `skiny/repochad-dark.json`. **Test koronny:** odtworzyć
dzisiejszy film z ręcznie napisanych `plansze-v2.json` + istniejącego `audio_meta.json`
— piksel w piksel podobny, ZERO tokenów. To jest definicja "gotowce zamiast CSS od nowa".

**E2 — Scenograf v2 (prompt przez codex1 — doktryna).** Claude pisze BRIEF promptu
(gramatyka komponentów + kotwice + schemat), codex1 pisze prompt produkcyjny.
Flagi zamiast stopów, jak w wytwórni.

**E3 — Timestampy + napisy.** Whisper wg gotowych przepisów
(`matura_PL_2/pipeline/transkrybuj.py`, `napisy.py`); kotwice → czasy wejść;
skin napisów karaoke (nasz `.hyperframes/caption-skin.html` jako wzorzec) na
czekający track 3.

**E4 — Drugi skin = dowód wariancji.** `blackboard-lecture` à la Caleb: rough-stroke
(SVG z jitterem Z INDEKSU, nie z randoma), font odręczny, 4 kolory kredy, czerwona
strzałka-wskaz, screenshot-rekwizyt z odręcznym kółkiem. To jednocześnie NAJBLIŻSZY
lifting obecnej estetyki wytwórni — być może E4 wykonać jako pierwszy, bo dotyka
tego, co już produkuje.

**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 zielonym E1+E2 w sandboxie.

---

## 7. Ściągawka: skąd zrzynać (wszystko lokalnie)

| Co | Gdzie |
|---|---|
| 5 klatek-wzorców (działający, deterministyczny GSAP) | `videos/local-ai-break-even/compositions/frames/*.html` |
| Spec skinu dark-dashboard (tokeny+komponenty+prawa) | `videos/local-ai-break-even/frame.md` |
| Skin napisów karaoke (lewe kotwiczenie, 3 stany słowa) | `videos/local-ai-break-even/.hyperframes/caption-skin.html` |
| Timestampy słów — format | `videos/local-ai-break-even/audio_meta.json` |
| 13 gotowych skinów (paleta+typografia+komponenty w YAML) | `~/.claude/skills/hyperframes-creative/frame-presets/` |
| 48 reguł ruchu (przepisy, seek-safe) | `~/.claude/skills/hyperframes-animation/rules/` |
| 22 blueprinty ujęć (time-coded szablony scen) | `~/.claude/skills/hyperframes-animation/blueprints/` |
| Doktryna ruchu (anty-PowerPoint, anty-bounce) | `~/.claude/skills/faceless-explainer/references/motion-language.md` |
| Kontrakt kompozycji / determinizm | `~/.claude/skills/hyperframes-core/` + CLAUDE.md projektu testowego |
| Silnik i pułapki wytwórni (sweep_static, kontrast, pin) | `misc/wytwornia/HANDOFF.md` §PUŁAPKI, `etapy/slajdy.mjs` |
| Mozaiki storyboardu Caleba (referencja skinu E4) | scratchpad sesji: `caleb_sb_M0/M1/M3.jpg` |

## 8. Słowniczek prowadzącego implementację

- **seek-safe / deterministyczny** — render przewija czas i fotografuje klatki; każda
  klatka musi być funkcją czystą czasu. Stąd zakazy z §4.
- **paused timeline** — `gsap.timeline({paused:true})` w `window.__timelines[id]`;
  renderer sam ustawia `tl.time(t)`.
- **fromTo** — wejście z jawnie zadeklarowanym stanem startowym (bez tego element
  "mryga" przy seeku do t=0).
- **kotwica / reveal-cue** — słowo lektora, którego timestamp wyznacza wejście
  elementu. Serce "premium feel".
- **karaoke captions** — napisy wypalane; grupy słów z timestampów, aktywne słowo
  rozjaśnione; chunki ŁAMIĄ się w pół zdania i to jest cecha gatunku.
- **komponent** — szablon HTML+CSS+ruch z parametrami (dane+akcent+kotwica);
  **layout** — rozmieszczenie komponentów na scenie; **skin** — tokeny+warianty
  komponentów; **plansza v2** — dane sceny (JSON od LLM).
- **front-load / slideshow-failure** — wszystko wchodzi w pierwszych 25% sceny
  i zamiera; główny grzech gatunku, leczony kotwicami.
- **blueprint** — sprawdzony, time-codowany szablon całego ujęcia (22 szt. w §7);
  w trybie fabrycznym odpowiednik "layout+choreografia".