Wzornik

czytanie-scrollem

tekst kluczowego statementu odsłania się słowo po słowie w tempie scrolla (szarość→pełny walor); scroll = tempo czytania, nie dekoracja.

Pełny ekran →

montaż-przez-nasunięcie

sekcje/karty sklejone w sticky-stack: kolejne ujęcie nasuwa się na poprzednie zamiast fade/crossfade.

Pełny ekran →

odsłonięcie-jako-puenta

nagłówek sceny istnieje, zanim da się go przeczytać: przesłonięty obrazami przesuwającymi się PO nim w tempie scrolla, czysty dopiero na końcu sekcji; odsłonięcie = puenta montażowa.

Pełny ekran →

puls-materiałowy

jedna całostronicowa pętla ziarna (steps, ~0.5 s, infinite) jako JEDYNY ruch tła; filmowość tańsza niż wideo i licencja na bezruch reszty UI; trigger: czas, charakter: puls materiału.

Pełny ekran →

typo-kulisy-głębi

mega-litery jednego słowa-klucza ROZBITE na osobne boczne warstwy kadru (np. A↤lewo … R↦prawo), a bohater płynie MIĘDZY nimi w głąb osi Z; głębia budowana warstwowaniem typografii jako kulis/ram, nie 3D ani parallaxem fotografii. Różni się od W5 (jeden wyraz-rzeźba ucięty/przesłonięty w jednej płaszczyźnie) i W12 (tekst+obraz jako jeden organizm): tu litery są SCENOGRAFIĄ, między którą wchodzi inny plan.

Pełny ekran →

rozstrzelony-obiekt-jako-scroll

JEDEN bohater (produkt/obiekt) rozłożony na części składowe, każda część = osobny rozdział scrolla; przewijanie obraca/rozkłada/przybliża ten sam obiekt zamiast prowadzić przez wiele różnych ujęć — eksploracja w głąb, nie katalog. Odwrotność W29 (split-screen WIELU produktów, flip osi co rozdział); zasada przenośna poza 3D (render/foto/SVG warstwami).

Pełny ekran →

próg-marki-przed-treścią

wejście to osobny pełnoekranowy brand-screen (jeden kolor marki + wordmark/herb), „ekran zero" PRZED hero, z którego hero dosłownie się wyłania; nie hero z nagłówkiem, lecz monochromatyczna plansza-próg znikająca w treść. Różni się od W15 (klamra hero↔footer tym samym ujęciem) — tu próg jest jednorazowy, na wejściu, i ma walor inicjacji. UWAGA: kradniemy ZASADĘ progu, nie mechanikę (licznik 0–100 / stagger kolumn to technika).

Pełny ekran →

kursor-przewodnik

follower zamiast systemowej strzałki zmienia podpis i kolor wg strefy pod wskaźnikiem (przewiń / zobacz / porozmawiaj); kursor komunikuje intencję miejsca, forma stała.

Pełny ekran →

ciężar-kursora

wyświetlana pozycja followera zjada co klatkę stały ułamek pozostałego dystansu (lag wykładniczy): ruch masywny, filmowy, bez oscylacji sprężyny.

Pełny ekran →

materiał-czuje-wskaźnik

współrzędne myszy (surowe + wygładzone) modulują parametry materiału sceny (zniekształcenie/refrakcja), a warstwa kursora ma pointer-events:none — scena reaguje, kliknięcia przechodzą do UI. WebGL; obowiązkowy fallback reduced-motion.

Pełny ekran →

etykieta-dwuwarstwowa

dwie kopie etykiety w masce overflow, hover przesuwa je przeciwbieżnie ze skosem: tekst „przewraca się" zamiast underline. Czysty CSS.

Pełny ekran →

przycisk-żyje-formą

hover animuje anatomię przycisku (pierścienie skalowane naprzemiennie, strzałka wjeżdża z ukrycia, podpis odsuwa się), nie kolor tła. Czysty CSS.

Pełny ekran →

UI-schodzi-ze-sceny

po progu postępu narracji (~60%) stały element akcji zjeżdża poza kadr i traci klikalność, wraca w finale; chrom nie konkuruje z opowieścią.

Pełny ekran →

portal-rozpuszczalny

pełnoekranowy obiekt hero obraca się i rozpuszcza w sprzężeniu ze scrollem, odsłaniając treść pod spodem: scroll przenika przez warstwę, nie przewija strony. WebGL lub wariant oszczędny pętlą wideo.

Pełny ekran →

taśma-ostrości

pionowy konveyor pozycji, gdzie odległość od poziomej osi ostrości steruje blur i opacity wiersza: ostre tylko to, co „w fokusie". Czysty CSS/JS.

Pełny ekran →

wyostrzanie-klastrami

nagłówek przechodzi z rozmycia do pełnej czytelności klastrami liter w funkcji postępu scrolla (tekst „łapie fokus"); pokrewne W7 (tam walor słowo-po-słowie, tu ostrość).

Pełny ekran →

kratka-z-kotwicą

kolumny kafli suną pionowo, a element akcji stoi przypięty na geometrycznym przecięciu osi podziału: ruch dookoła, kotwica nieruchoma.

Pełny ekran →

kurtyna-tonalna

zmiana rozdziału twardą poziomą krawędzią wjeżdżającej warstwy o przeciwnej tonacji, bez gradientowego crossfade; radykalizacja W8 o cięcie walorowe.

Pełny ekran →

marquee-od-scrolla

przypięty blok z wielkoskalową linią tekstu, której translacja pozioma jest wprost proporcjonalna do pionowego scrolla: user fizycznie napędza ruch, nie autoodtwarzacz.

Pełny ekran →

inwersja-fabularna

przejście tonacji strony (ciemne→jasne) w finale uzasadnione narracyjnie (zamknięta praca → otwarte zaproszenie), nie dekoracyjnie; rozszerza zasadę złamania fabularnego z oryzo na skalę całej strony.

Pełny ekran →

słowa-schodzą-się

rozproszone wyrazy w przestrzeni kadru, sprzężone ze scrollem lub czasem, składają się w jedno zdanie-tezę; ruch ilustruje sens łączenia, nie dekoruje. [CSS/JS]

Pełny ekran →

linia-spod-maski

wiersz displayu wjeżdża z ukrycia przez overflow-maskę (translateY z clip), nie przez fade; stagger między wierszami buduje rytm otwarcia. [CSS]

Pełny ekran →

wypełnianie-znakiem-scroll

kluczowy cytat wypełnia się walorem od lewej do prawej w tempie scrolla (maska gradientu / clip), nie słowo po słowie ani blur→sharp. [CSS/JS]

Pełny ekran →

rama-kurczy-do-fullbleed

obraz startuje w szerokiej ramie neutralnej, a postęp scrolla kurczy margines do pełnego kadru tuż przed cięciem rozdziału — kamera „wchodzi" w materiał. [CSS/JS]

Pełny ekran →

gest-jeden-panel

viewport przypięty: jeden gest (wheel/touch/klawisz) = jedno przejście między pełnoekranowymi panelami; akumulator progu odrzuca trackpad-burst, lock blokuje gesty w trakcie animacji. [CSS/JS]

Pełny ekran →

przystanek-z-wewnętrznym-scrollem

wysoki panel = jeden przystanek z własnym overflow; kontroler najpierw wyczerpuje scroll wewnętrzny, dopiero potem przechodzi dalej — tall content nie jest clipowany. [CSS/JS]

Pełny ekran →

choreografia-wejścia

sekwencja on-load zróżnicowana per rodzina elementów (tracking-in, maska, typewriter, stagger) na jednej krzywej easing; jeden raz przy wejściu, potem spoczynek bitowy. [CSS/JS]

Pełny ekran →

bliskość-rozświetla-słowo

słowa w promieniu kursora dostają jaśniejszy walor i delikatny blask; poza promieniem wraca ambient CSS — pole uwagi bez zmiany layoutu. [CSS/JS]

Pełny ekran →

kontr-wychył-masy

ciężki blok typograficzny odsuwa się od kursora sprężyną o wysokiej bezwładności; ruch przeciwny do wektora wskaźnika, jak fizyczna masa. [CSS/JS]

Pełny ekran →

oddech-atramentu

słowa poza zasięgiem kursora pulsują subliminalnie w opacity (ok. 7 s); bliskość użytkownika nadpisuje ambient — tekst „oddycha", gdy nikt go nie czyta. [CSS + JS nadpisanie]

Pełny ekran →

metronom-fazowy

kilka elementów UI (separator, caret, kropka) synchronizuje się do jednego tykania 1 Hz; wspólny zegar zamiast losowych animacji. [CSS/JS]

Pełny ekran →

ken-burns-bez-wideo

statyczny asset w tle powoli dryfuje skalą i ziarnem (background-position, nie transform na kontenerze); życie materiału bez kosztu wideo i bez psucia geometrii scrolla. [CSS]

Pełny ekran →

bicie-punktu

jedno słowo-klucz w zdaniu pulsuje w brightness/glow w stałym rytmie (~2.5 s); bliskość kursora dokłada wzmocnienie — rytm serca narracji, nie dekoracja całego akapitu. [CSS + JS]

Pełny ekran →

luka-elastyczna

pusty kanał kompozycji reaguje na kwadrant kursora: masa po jednej stronie ciągnie się KU wskaźnikowi tylko w dozwolonym rejonie; negatywna przestrzeń staje się elastyczną. [CSS/JS]

Pełny ekran →

odwrócona-biegunowość-bliskości

ten sam promień kursora na jasnym tle przygasa słowa (ciemniej), na ciemnym rozjaśnia — jeden gest, dwa rejestry waloru zależne od kontrastu sekcji. [CSS/JS]

Pełny ekran →

połknięcie-przejściem

klik w element nawigacji rozszerza wąską szczelinę kadru do full-bleed (clip-path + scale), scena źródłowa odsuwa się w głąb; po settle następuje nawigacja. [CSS/JS]

Pełny ekran →

tło-crossfade-przypięte

sticky warstwa tła: kolejne kadry crossfade'ują się w funkcji scrolla, rozdziały tekstu przewijają się NAD nieruchomym tłem — montaż bez pinowania całego viewportu. [CSS scroll-driven / JS]

Pełny ekran →

pasek-postępu-wyprawy

cienki wskaźnik u góry skaluje się w osi X od 0 do 1 wprost z postępem dokumentu; użytkownik widzi, ile „drogi" zostało, bez licznika sekcji. [CSS scroll-driven]

Pełny ekran →

kamera-po-pionie

jeden wysoki kadr fotograficzny: scroll przesuwa object-position / maskę wzdłuż osi pionowej — wrażenie wznoszenia kamery, nie przewijania strony. [CSS scroll-driven]

Pełny ekran →

figura-przypięta-tekst-przewija

split-screen: figura sticky po jednej stronie, manifest przewija się po drugiej w sekcji ~200vh; bohater stoi, narracja płynie obok. [CSS]

Pełny ekran →

przycisk-magnetyczny

element akcji podąża za kursorem w promieniu z lagiem i wraca na miejsce po wyjściu ze strefy; magnetyzm subtelny (kilka px), nie „przyklejony do myszy". [CSS/JS]

Pełny ekran →

dekodowanie-znaków

tekst przy wejściu lub hover przechodzi przez losowe znaki do docelowego słowa w kilku klatkach; efekt maszynowy, jednorazowy lub na interakcji. [JS]

Pełny ekran →

sekcja-pozioma-scroll

pionowy scroll w pinowanej sekcji napędza translację poziomą treści (galeria, timeline); user „przewija w dół", a kadr jedzie w bok. [CSS/JS]

Pełny ekran →

wideo-ze-scrolla

postęp scrolla w pinowanej sekcji mapowany na currentTime materiału wideo; użytkownik „przewija montaż" klatka po klatce. [JS + video]

Pełny ekran →

marquee-pauza-hover

pozioma taśma tekstu w autoodtwarzaniu zatrzymuje się na hover i wznawia po wyjściu; ruch tła, który nie walczy o kliknięcie. Różni się od W51 (marquee napędzany scrollem). [CSS/JS]

Pełny ekran →

pochylenie-karty

karta obraca się lekko w 3D (rotateX/Y) w funkcji pozycji kursora względem środka; perspektywa z perspective na rodzicu, reset po wyjściu. [CSS/JS]

Pełny ekran →

kolor-tylko-z-treści

UI trzyma ≤2 barwy neutralne (nigdy czyste #000/#fff), a całą chromatykę wnoszą fotografie/assety; akcent jest emergentny, nie tokenowy.

hierarchia-jednym-krojem

jeden krój na wszystko; hierarchię buduje skala i waga (400 vs 700), nie drugi font.

skala-bez-środka

display ≥7–12× body, brak wartości pośrednich; każda wielkość ma jedną rolę, „uprzejma" drabinka h1–h6 znika.

zbita-masa-displayu

nagłówek jako ciężki blok graficzny: line-height < 1.0 i tracking ok. −4…−6% em; opcjonalnie złamanie rejestru (konsekwentny lowercase lub uppercase).

słowo-jako-obiekt

jeden mega-wyraz lub liczba na stronę traktowane jak rzeźba w przestrzeni: ucięte krawędzią viewportu albo przesłonięte fotografią (overlap = głębia planów); nigdy grzecznie wycentrowane w całości.

jeden-ruch-narracyjny

jedna duża animacja, która ilustruje tezę marki; reszta strony statyczna — zero fade-everywhere, cisza też jest ruchem.

rytm-gęsto-pusto

montaż strony przez twarde cięcia i zmianę gęstości (gęsta siatka → pusty ekran typograficzny → gęsto); tempo bez animacji.

hero-odwrócona-hierarchia

hero bez grzecznego nagłówka: bohater (obraz lub mega-typo) wchodzi krawędzią kadru / od dołu / wypełnia full-bleed, a tekst siedzi jak podpis w rogu, na osi przeciwnej.

didaskalia-w-nawiasach

system eyebrow/liczników `(SEKCJA)`, `(8)` drobnym uppercase lub mono przed nagłówkami; tani, powtarzalny sygnał świata redakcyjnego spinający stronę. (artiox, prolab, bymonolog) — *wariant „żywa kotwica miejsca": jedno didaskalium nie porządkuje struktury, tylko TYKA — lokalny czas+miasto jako tyknięty mono-stempel `[15:25:08] [Apeldoorn]`, sygnatura realnego miejsca tanim żywym detalem zamiast deklaracji „about us"

obraz-wbity-w-typografię

kluczowy nagłówek rozcięty insetowym kadrem fotograficznym; tekst i obraz jako jeden organizm, nie sąsiednie bloki.

dane-jako-artefakt-świata

cennik/CTA/wykres ubrane w fizyczny obiekt z fikcji marki (bilet, metka, góra z kresek) zamiast generycznej karty.

typografia-podpis-kadru

tekst na pełnoekranowym obrazie jako cienka pozioma oś z parą numer/słowo na końcach — plansza tytułowa filmu, nie nagłówek „nad" treścią.

tonacja-per-rozdział

każda sekcja-ujęcie trzyma jedną zdyscyplinowaną tonację barwną fotografii; scroll daje rytm kolorystyczny bez dodawania kolorów do palety UI.

typo-interstitial

pełnoekranowe ujęcie z samym tekstem (hasło, lista) jako cięcie między sekcjami; przy liście scroll podświetla aktywne słowo, reszta tonie w szarości.

jeden-gest-reszta-stoi

budżet ruchu strony = JEDEN gest narracyjny (intro-najazd na bohatera, logo-film odegrany raz, jedno żywe okno wideo), skończony i z settle bez odbicia; poza nim spoczynek bitowy (dwa screeny w odstępie = identyczne piksele), mikrotranzycje ≤0.5 s tylko na interakcji.

materiał-żyje-UI-stoi

cały ruch ambientowy mieszka w TREŚCI (wideo z własnym montażem, scena zmieniająca porę dnia w wolnym crossfadzie, pętle w kadrach), a warstwa marki/UI trwa nieruchomo; trigger: czas, charakter: dryf/pętla, służy obietnicy marki, nie dekoracji chromu.

mikro-szept-funkcyjny

tekst funkcyjny (nav, opisy, etykiety) zminiaturyzowany do ~10–13 px uppercase z dodatnim trackingiem przy mega-displayu; im droższy produkt, tym ciszej mówi UI.

UI-jako-podpis-na-dziele

hero = jeden asset full-bleed bez nagłówka i ramy; cały UI zredukowany do metadanych naniesionych NA bohatera (logo, nav, etykieta jak w muzeum / nazwa+numer jak w katalogu). Radykalizacja W10.

kolaż-z-pustymi-hakami

zamiast równego gridu: klastry 2–4 kadrów o kontrastowych skalach na wspólnym płótnie lub siatka z celowo pustymi slotami; oddech WEWNĄTRZ układu, packshot na tle identycznym z tłem strony „leży na płótnie" bez ramki.

inwersja-walorów-jako-montaż

paleta = 2 barwy neutralne zamieniające się rolami tło/tekst między rozdziałami; twarde cięcia walorowe (ciemne↔jasne) niosą rytm całej strony i robią robotę akcentu.

cisza-przed-finałem

jedyne CTA dostaje własny, niemal pusty ekran z ekstremalnym paddingiem; pauza montażowa nadaje mu wagę zamiast koloru akcentu.

klamra-pętla

otwarcie i zamknięcie strony tym samym ujęciem w tej samej skali (hero ↔ footer); scroll dostaje kompozycyjny początek i koniec.

dwugłos-maszyna-ręka

monumentalny druk + odręczna adnotacja w kolorze akcentu; odręczność TYLKO jako 1–2-wyrazowy dopisek, nigdy treść ani nagłówek.

akcent-gra-wszystkie-role

jeden kolor <5% powierzchni, ale obecny we wszystkich rolach: nav, CTA, cyfra, podpis i FIZYCZNY rekwizyt na fotografii — marka materializuje się w świecie.

zero-skala

cała treść w JEDNYM rozmiarze body; display istnieje raz, jako gest otwarcia (typografia-aktor), a hierarchię budują wyłącznie skala i pozycja mediów. Radykalizacja W2/W3.

rozdziały-z-flipem-osi

katalog jako rozdziały split-screen 50/50 (panel typo: mikro-opis + mega-nazwa z numerem dobitym do przeciwnej krawędzi | full-bleed obraz) w rytmie makro-detal → twarz; oś L/P flipuje się co rozdział.

footer-indeks-katalogu

zamknięcie strony jako spis treści świata marki (serie z licznikami, kropki-colorways, miniatury) zamiast generycznych kolumn linków.

glif-rebus

1–2 litery wordmarku zastąpione obiektami-symbolami, konsekwentnie od hero po stopkę; tożsamość rozpoznawalna bez koloru (kradniemy mechanizm, nie znaki).

liczba-jako-dowód

każdy case w spisie = kadr + jedna wielka liczba-rezultat w cichych didaskaliach mono; portfolio czyta się jak bilans, nie galeria.

jeden-materiał-spina-świat

jedna technika materiałowa (raster/ziarno/kreska) aplikowana konsekwentnie do logotypu, ilustracji ORAZ wizualizacji danych; spójność świata przez materiał, nie przez kolor.

napis-za-bohaterem

wielkoskalowa linia tekstu przechodzi ZA obiektem pierwszego planu; okluzja daje głębię trzech planów bez parallaxu fotografii ani 3D. [CSS/JS]

meta-warstwa-edytora

powtarzalne znaki narzędzia projektowego (uchwyty zaznaczenia, siatka, etykiety techniczne) spinają sekcje jednym metajęzykiem „obiekt w edytorze" — sygnatura bez ciężkiego renderu. [CSS]

puenta-na-końcu-scrolla

cała narracja buduje jedno założenie w powadze; ostatni akt je wywraca jednym zdaniem/ujęciem — łuk sensu, nie zmiana tonacji (W52). [proces briefu]

liczby-jako-scenografia

wielkie liczby-rezultat jako elementy tła kadru (ucięte, przesunięte, częściowo poza viewportem), nie w gridzie statystyk — liczba jest scenografią, nie metryką UI. Różni się od W33 (dowód w didaskaliach). [CSS]