Powierzchnie

Tło hero nie jest obrazkiem ani gradientem. To parametryczna powierzchnia liczona w WebGL2 — jeden czworokąt i shader. Marki różni forma, nie technika.

Zasada

Jedna maszyneria, wiele form

Wstęga powstała jako tło jednej strony. Gdy stron zrobiło się siedem, kuszące było napisanie siedmiu efektów. Zamiast tego rozdzielono to, co wspólne, od tego, co różni.

Wspólnemateriał marki

Rampa po łańcuchu pięciu stopów z interpolacją wyłącznie między sąsiadami. Krycie od ustawienia płata — krawędzią jaśniej, płasko bledziej. Prążkowanie włókna. Maska chroniąca nagłówek. Zatrzymanie pętli poza widokiem i poszanowanie „ogranicz ruch”.

Różnetrzy funkcje i trzy liczby

Ścieżka środka płata, prawo skręcenia, prawo szerokości — plus krycie, udział cieniowania i miękkość brzegu. Nowa forma to tyle i nic więcej.

Dołożenie formy nie jest nowym plikiem. To jedna gałąź w każdej z trzech funkcji i jeden wiersz w rejestrze. Jeśli komuś wychodzi drugi plik, znaczy, że zmienia maszynerię, a nie formę — i wtedy zmiana dotyczy wszystkich marek naraz.

Przypisanie

Siedem serwisów, siedem powierzchni

Powierzchnia jest znakiem marki, nie ozdobnikiem. Dwie marki z tą samą formą to dwie marki bez rozpoznawalnego tła.

Serwis	Forma	Dlaczego ta
gsi-platform.pl	Wstęga	Skręcony płat biegnący łukiem. Powstała pierwsza i zostaje wyróżnikiem Platformy — jedynego serwisu, który działa, a nie mówi.
gsi-podklucz.pl	Kolumna	Wszystko nawinięte na jedną oś. To jest wprost claim marki: jeden kosztorys, jeden harmonogram, jedna osoba do kontaktu.
gsi-dom.pl	Żagiel	Jednostronne wybrzuszenie czyta się jak połać. Spokojniejsza od serpentyny, a nagłówek tej marki jeszcze urośnie.
pfm-kuchnie.pl	Tafla	Tafla to płyta — materiał, z którego marka robi meble. Przy okazji najcichsza forma zestawu, więc nie konkuruje z produktem.
gsi-grupa.pl	Rzeka	Kilka szerokich pasm płynących jednym nurtem.
gsi-market.pl	Serpentyna	Sklep żyje z ruchu i promocji. Ostre nawroty dają energię, której nie ma żadna forma z rodziny spokojnej.
pfm-smart.pl	Klepsydra	Sklep PFM ma zostać w rodzinie tafli: przewężenie w połowie wysokości jest równie ciche, a odróżnia go od strony marki.

Sklep ma inne hero niż landing marki. Nad tłem stanie zdjęcie produktu, cena albo baner promocyjny, więc powierzchnia musi ustąpić treści. Serpentyna jest z całej siódemki najgłośniejsza i przy pierwszym prawdziwym makiecie sklepu może się okazać, że trzeba zejść do formy cichszej. To jest znane ryzyko przypisania, nie przeoczenie.

Podgląd

Siedem form na żywo

Kadry w proporcji 16:9, czyli w zakresie, w którym powierzchnie są liczone.

Wstęga gsi-platform.pl

Kolumna gsi-podklucz.pl

Żagiel gsi-dom.pl

Tafla pfm-kuchnie.pl

Rzeka gsi-grupa.pl

Serpentyna gsi-market.pl

Klepsydra pfm-smart.pl

W pliku siedzi dwadzieścia jeden form — czternaście nieprzypisanych czeka na kolejny serwis albo na zmianę kierunku. Katalog nie jest długiem: wybór szóstej marki zaczyna się od tej listy, a nie od rysowania od zera.

Reguły

Cztery rzeczy, które ograniczają każdą formę

Barwatylko po łańcuchu

Rampa interpoluje wyłącznie między sąsiadami tablicy pięciu stopów: granat → turkus → fiolet → róż → pomarańcz. Para odrzucona w teście nasycenia nie może więc powstać przez przypadek — nie odradzamy jej, tylko czynimy niemożliwą.

Kadrpion, nie poziom

Wszystkie formy stoją pionowo. Powód jest mierzalny: shader dzieli x przez proporcję kadru, więc forma pozioma działa w zakresie 1,5–2,4, a poniżej rozdziera się na telefonie. Pionowa znosi każdą proporcję.

Nagłówekpróg z miary, nie z oka

Maska gasi lewą stronę, bo tam stoi nagłówek. Próg liczy się z jego miary: 16 znaków przy stopniu display to około 39% szerokości kadru — do 20% czysto, do 42% ledwie muśnięte, pełne tło od 70%. Forma, która przy takiej masce znika, jest narysowana za daleko w lewo.

Kryciezależy od liczby pasm

Mieszanie idzie z premnożoną alfą na bieli: wynik to barwa·α + biel·(1−α). Wstęga ma dziewięć płatów przechodzących przez siebie, więc alfa się sumuje. Formy o pasmach równoległych nie nakładają się wcale — piksel dostaje alfę jednego płata, resztę dokłada biel i barwa blednie do pastelu. Dlatego krycie, udział cieniowania i miękkość brzegu są parametrami formy, nie stałymi: mniej pasm to wyższe krycie i pełniejszy brzeg.

Pułapka

Limit kontekstów WebGL

Przeglądarki trzymają ograniczoną liczbę żywych kontekstów WebGL na dokument — Chrome około szesnastu.

Po przekroczeniu nie dostajesz błędu. Przeglądarka po cichu odbiera kontekst najstarszemu płótnu, więc pierwsze kadry na stronie gasną, a strona potrafi się zaciąć. Złapane na katalogu z dwudziestoma jeden formami naraz — na produkcji hero jest jedno, więc tam problem nie istnieje.

Skrypt tworzy kontekst dopiero, gdy płótno wchodzi w kadr, a przy przekroczeniu limitu zwalnia najdawniej oglądane jawnie, przez WEBGL_lose_context. Jawnie, bo bez tego kontekst czeka na zbieracz śmieci, czyli na nieokreślony moment — a limit obowiązuje natychmiast.

Pomiar, który zmienia mierzone. Przy diagnozie policzenie kontekstów przez wywołanie getContext na wszystkich płótnach utworzyło dokładnie te konteksty, których miało dotyczyć badanie. Liczbę żywych kontekstów sprawdza się obserwacją zachowania, nie odpytaniem każdego płótna.

Ziarno

Ziarno idzie na cały kadr, nie na samą powierzchnię

Zakładka Kolor opisuje ziarno jako warstwę nad meshem. Przy hero obowiązuje mocniejszy zapis: arkusz szumu kładzie się na całą wysokość kadru — także po lewej, gdzie powierzchni nie ma i zostaje samo tło.

Skutek jest widoczny natychmiast i o niego chodzi: biel przestaje być płaską bielą ekranu. Pod nagłówkiem robi się bardzo jasna, drobnoziarnista szarość, która czyta się jak papier albo tynk, a nie jak pusty prostokąt. Kadr bez ziarna po lewej stronie wygląda przy nim jak niedokończony — powierzchnia ma fakturę, tło nie ma, i widać szew między nimi.

Wartościbez odstępstw

Kafel 160 × 160 px, feTurbulence typu fractalNoise, baseFrequency 0.45, numOctaves 2, stitchTiles: stitch. Krycie 21%, tryb mieszania luminosity.

Dlaczego luminositya nie zwykłe krycie

Ten tryb bierze z szumu jasność, a barwę zostawia podkładowi. Nad bielą, która nie ma nasycenia, zostaje więc czysta szarość — stąd ten wygląd. Nad powierzchnią barwa marki nie jest ruszona, dochodzi wyłącznie faktura. Zwykłe krycie rozjaśniłoby gradient i zabrało mu nasycenie.

Kafel w pikselachekranu, nie rysunku

Szum wypalony w SVG kłamie w każdym rozmiarze poza 1:1, bo feTurbulence liczy się w jednostkach użytkownika. Dlatego ziarno jest osobnym arkuszem o stałym rozmiarze kafla, a nie częścią obrazu pod spodem. Ta sama reguła co przy meshach w zakładce Kolor i ten sam powód: przy kaflu 320 px na płótnie 1000 jednostek okres szumu wypadał na 0,32 piksela, czyli gęściej niż siatka próbkowania — i zamiast ziarna wychodził aliasing.

Zasięg kończy się na kadrze hero. Ziarno obejmuje wysokość tła, a nie całą stronę — sekcje pod hero zostają czyste. Rozciągnięcie go na cały dokument zamienia fakturę w szum tła i po trzech ekranach przestaje się je widzieć, a koszt malowania zostaje.

Przyjęte w arkuszu. Reguła nie jest tylko opisana: siedzi w .hero w system.css (brandbook maluje nią własne otwarcia) oraz w .strona .hero w bloki-2026.css po stronie renderera stron. Kadry poglądowe wyżej też ją mają. Zapis bez adopcji byłby martwym wzorcem, dokładnie jak Section, który stał w repo miesiącami z zerem użyć.

Ziarno jest w dwóch arkuszach i to jest dług. Ta sama duplikacja co przy skrypcie powierzchni: zmiana wartości musi wejść w system.css i w bloki-2026.css. Inaczej się nie da, dopóki renderer stron jest osobną aplikacją i nie sięga do tego repo w czasie działania.

Kod

Gdzie to leży

templates/specimen/powierzchnie.js      ŹRÓDŁO PRAWDY
gsi-www/public/js/powierzchnie.js       kopia renderera stron

Blok „Hero 2026" (gsi-www) ma pole „Powierzchnia w tle" —
redakcja wybiera formę z listy, bez wdrożenia.

Zmiana wspólnej maszynerii — rampy, cieniowania, maski — musi wejść w oba pliki, w tej kolejności. To znany koszt tego, że renderer stron jest osobną aplikacją i nie sięga do tego repo w czasie działania.