# Baner podstrony Oferta — wideo „Od chaosu do systemu" Ścieżka animacji, klatka po klatce. Nie mózg → nie dubluje banera homepage. Ta sama tożsamość wizualna co `brain.webm`, inny obiekt. Klatki referencyjne: `oferta-hero2-start.png` (chaos) · `oferta-hero2-end.png` (system). --- ## 1. Parametry techniczne | | | |---|---| | Rozdzielczość | 1920 × 1080 (16:9). CSS `object-fit: cover` przycina do panelu. | | Długość | 10,00 s = **300 klatek @ 30 fps** (zalecane 60 fps → 600 klatek; numeracja niżej w bazie 30). | | Format | MP4 (H.264, yuv420p) + WebM (VP9). | | Waga | docelowo < 6 MB. | | Audio | brak. | | Kolor | **monochromia**: biel `#EEF2FF` → cyjan `#96B4D7` → głęboki błękit `#37557D` na czerni `#050508`. **Zero zieleni** (dokłada ją UI). | | Zabronione | zieleń, kształt mózgu, formy organiczne, tekst, logo, watermark, twarde cięcia, szybki ruch, banding. | | Pętla | bezszwowa: **klatka 300 ≡ klatka 0**. | --- ## 2. Stała baza sceny (w kadrze przez cały czas) - **Tło:** czerń `#050508` z chłodnym podtonem; winieta (przyciemnienie krawędzi ~30%); ledwie widoczna poświata centralna. - **Bokeh:** duże rozmyte kule pyłu na 3 planach; powolny dryf „na zewnątrz" od środka (~4 px/s), parallax z kamerą. Ilość: chaos ~48 → system ~26. - **Pył drobny:** setki mikro-punktów; chaos ~240 → system ~110 (nadmiar „osiada" w fazie 2). - **Kamera:** F0 nieruchoma. Łączny ruch: orbita ~2,5° + push-in skala 1,000 → 1,045, ease-in-out; **powrót** do 0° / 1,000 na końcu (F300 ≡ F0). - **Forma:** zawsze w **prawej połowie kadru** (lewa = miejsce na tekst hero). --- ## 3. Dwa stany — geometria (współrzędne znormalizowane x/1920 · y/1080) ### CHAOS (klatka 0) - **~19 węzłów** rozrzuconych losowo w polu `x 0.29–0.81 · y 0.13–0.87`, różne rozmiary (r 2–8 px) i jasności. - **~30 nici** — krzywe (bézier kwadratowy) między losowymi parami węzłów, punkt kontrolny odchylony ±160 px → **splątany kłąb**, dużo skrzyżowań. - Pył gęsty, bokeh gęste. ### SYSTEM (klatka ~168) = `oferta-hero2-end.png` Struktura rozgałęziona, 3 piętra + siatka: ``` Korzeń: (0.458, 0.500) r≈8, najjaśniejszy Piętro 1: (0.552,0.315) (0.568,0.435) (0.560,0.565) (0.549,0.704) r≈4.5 Piętro 2: 2–3 liście na gałąź, ~ (mid.x + 0.07…0.13 ; mid.y ± 0.06) r≈2.6 Piętro 3: 4 liście dostają dziecko (+0.04…0.07 ; ±0.035) r≈1.8 Krawędzie: korzeń→każdy węzeł P1 ; P1→swoje liście ; wybrane liście→P3 (linie proste, lekko „ożywione") Siatka: perspektywiczna „podłoga" pod strukturą, pionowe od y≈0.83 zbiegają do y≈0.59 ; poziome co ≈0.048 bardzo ciemny błękit, opacity ~35% ``` **Wygląd krawędzi (po ustabilizowaniu):** rdzeń biały ~2 px + poświata cyjan ~5 px + szeroki glow ~15 px (opacity ~0.35). --- ## 4. Oś czasu — klatka po klatce (F = klatka, 30 fps) ### FAZA 0 — CHAOS / spoczynek · `F0–F45` (0,00–1,50 s) = **klatka start**. Nici lekko „falują" (punkty kontrolne oscylują sine ±6 px, okres ~50 F). Pył i bokeh dryfują. Kamera nieruchoma do **F10**, potem rusza (ease-in). - **F0** — stan wyjściowy. *(= klatka 300, pętla).* ### FAZA 1 — ROZPLĄTYWANIE · `F45–F150` (1,50–5,00 s) Chaos zamienia się w porządek — trzy równoległe procesy: **a) Węzły płyną na miejsca** *(staggered, kolejność „od środka na zewnątrz")* - **F45** — rusza **korzeń** (dojazd 60 F). - **F54, F63, F72, F81** — ruszają kolejno 4 węzły **Piętra 1** (co 9 F). - **F90–F120** — ruszają **liście** (Piętro 2), co ~4 F. - **F120–F140** — ruszają węzły **Piętra 3**. - Każdy węzeł: `chaos_pos → sys_pos` po **łagodnym łuku** (bézier z punktem kontrolnym prostopadłym do prostej, offset ±40–90 px). Easing `cubic-bezier(.65,0,.35,1)`. Czas dojazdu ~60 F. - Podczas lotu węzeł ciągnie za sobą krótki świetlny ślad (motion-blur, znika po ~10 F po zatrzymaniu). **b) Nici prostują się i selekcjonują** - **F45–F150** — punkt kontrolny każdej nici chaosu animuje się ku środkowi jej odcinka: **krzywa → prosta**. - **F60–F130** — nici, których końce **nie** są realną krawędzią struktury (≈12 z 30), **wygaszają się** (opacity 100→0, staggered). - **F90–F165** — realne **krawędzie struktury** (~18) „rysują się" od węzła-rodzica do dziecka, gdy oba są już blisko celu (draw-on ~24 F, `cubic-bezier(.4,0,.2,1)`), i rozjaśniają do docelowej wartości. **c) Siatka wchodzi** - **F60–F140** — siatka perspektywiczna: opacity 0→35%, offset `y +40 px → 0` (unosi się od dołu), ease-out. **Tło:** ~połowa drobnego pyłu dryfuje na zewnątrz i gaśnie (F45–F150) — „burza osiada". Bokeh redukuje się z ~48 do ~26. Poświata sceny +8% (F90–F170). Kamera: pełny dryf trwa. ### FAZA 2 — ZATRZASK / krystalizacja · `F150–F168` (5,00–5,60 s) - **F150–F165** — kaskada „zatrzasków": każdy węzeł po dojeździe robi mikro-**bloom** (skala 1 → 1,6 → 1 w 12 F + skok jasności), w kolejności korzeń → Piętro 1 → liście. Wzdłuż świeżo połączonych krawędzi przebiega jednorazowy błysk (od rodzica do dziecka). - **F165–F168** — wszystko dochodzi do docelowych wartości; gałęzie wyrównane. - **F168** — **struktura kompletna** *(= klatka end)*. Siatka na 35%. ### FAZA 3 — ODDECH + przepływ · `F168–F255` (5,60–8,50 s) - **Oddech:** gałęzie i węzły pulsują delikatnie — jasność ±8%, sine, okres ~70 F, faza przesunięta per gałąź (niesynchronicznie). - **Pakiety światła:** co ~20 F z **korzenia** wystrzeliwuje mała jasna kropka; leci `korzeń → P1 → liść` wzdłuż krawędzi (~40 F, prędkość stała), gaśnie na liściu. W locie 3–4 pakiety naraz, przesunięte fazowo. Start ~**F175**. - Korzeń: stały, najjaśniejszy punkt, pulsuje minimalnie (amplituda 5%). - Kamera: `F168–F210` kończy dryf; `F210–F255` **hold** (bez ruchu — akcent na spokoju struktury). - Bokeh dryfuje spokojnie. ### FAZA 4 — POWRÓT DO CHAOSU · `F255–F300` (8,50–10,00 s) Odwrotność Fazy 1, szybciej i miękko: - **F255–F270** — pakiety światła wygasają; krawędzie struktury bledną (od liści do korzenia). - **F262–F292** — węzły **dryfują od siebie** ku swoim `chaos_pos` (ease-out, ~30 F), po drodze nici znów się **wykrzywiają** (punkt kontrolny odchyla się z powrotem), część nici wraca (fade-in). - **F270–F300** — siatka gaśnie (opacity 35→0, offset `y 0 → +40`). - **F272–F300** — pył drobny znów gęstnieje (~110 → 240), bokeh ~26 → 48. - **F255–F300** — kamera wraca do skali 1,000 i 0° (ease-out). - **F300 ≡ F0** — identyczna pozycja węzłów, nici, kamery, gęstość pyłu. Cięcie niewidoczne. --- ## 5. Zachowanie elementów — parametry | element | ruch | |---|---| | węzeł (dojazd) | łuk `chaos→sys`, ~60 F, `cubic-bezier(.65,0,.35,1)`, start staggered od środka | | węzeł (zatrzask) | skala 1→1.6→1 w 12 F, ease-out; +jasność ~40% na szczycie | | nić chaosu | punkt kontrolny → środek odcinka (prostowanie), F45–F150 | | krawędź struktury | draw-on rodzic→dziecko, ~24 F, `cubic-bezier(.4,0,.2,1)` | | siatka | opacity 0→35%, offset y +40→0, ease-out (F60–F140) | | oddech gałęzi | jasność ±8%, sine, okres ~70 F, faza per gałąź | | pakiet światła | korzeń→liść wzdłuż krawędzi, ~40 F, prędkość stała, spawn co ~20 F | | kamera | orbita 0→2.5° + push-in 1.000→1.045 (ease-in-out), powrót ease-out | | bokeh | dryf na zewnątrz ~4 px/s, liniowo; ilość 48↔26 | | pył drobny | ilość 240↔110, część gaśnie w Fazie 1, wraca w Fazie 4 | --- ## 6. Wariant „tylko 2 klatki" (narzędzie interpoluje start → end) - pierwsza klatka: `oferta-hero2-start.png` · ostatnia: `oferta-hero2-end.png` - klip pokryje **Fazy 0–2** (0,00–5,60 s treści): rozplątywanie + krystalizacja - pętlę/oddech domontujesz osobno (Fazy 3–4) albo `