NOIR/STUDIO — Kiedy strona zachowuje się jak praca

NOIR/STUDIO to koncepcyjny projekt strony landing page dla wysokiej klasy studia produkcji filmowej i fotograficznej, zbudowany wokół jednej idei: strona studia powinna zniknąć w pracy, którą prezentuje — nie konkurować z nią.

Kierunek wizualny definiuje jedna nadrzędna zasada: kinowa powściągliwość w stylu edytorialu. Złamana czerń w tle (#0A0A0A), ciepła złamana biel w typografii (#F3F1EC) i jeden akcent w kolorze utlenionej pomarańczy (#D4451C) używany z premedytacją — nigdy więcej niż dwa, trzy razy na całej stronie. Paleta czerpie z printowego edytorialu i filmowego color gradingu, a nie z konwencji webdesignu. Czyta się ją jako pewną siebie, nie krzykliwą.

Typografia niesie całą tożsamość wizualną. Duży display serif — Instrument Serif lub Fraunces — obsługuje każdy moment nagłówkowy w skali clamp do 12vw, przeskalowany do punktu, w którym staje się architekturą, a nie tekstem. Wąski monospace — JetBrains Mono — obsługuje etykiety, indeksy, znaczniki czasu, koordynaty i metadane na marginesach. Dialog między tymi dwoma głosami — monumentalnym serifem i inżynieryjnym mono — tworzy cały system projektowy. Bez elementów dekoracyjnych.

Layout porzuca wycentrowane konwencje SaaS na rzecz asymetrycznej siatki edytorialowej. Meta-teksty siedzą wyrównane do linii bazowej w rogach i przy krawędziach, oznaczone indeksami w nawiasach i numeracją sekcji w sposób, w jaki magazyn drukowany prowadzi paginację. Sekcja Selected Work odrzuca standardową siatkę kart projektów na rzecz horyzontalnej listy edytorialowej — indeks, tytuł, klient, rok, dyscyplina — gdzie hover ujawnia podgląd śledzący kursor. Sekcja Services rezygnuje z ikon i kart na rzecz długiej listy z poziomymi liniami. Sekcja Studio dzieli serifowy cytat naprzeciw trzech statystyk w mono. Każda sekcja podąża własną wewnętrzną logiką, dzieląc spójny rytm przestrzenny.

Projekt motion zbudowany jest na GSAP-ie z jedną nadrzędną krzywą — expo.out — i czasami trwania utrzymanymi między 0.9 a 1.6 sekundy. Nic nie odbija. Nic nie sprężynuje. Strona otwiera się pełnoekranową czarną nakładką i licznikiem w mono tykającym od 00 do 100, po czym unosi się i odsłania nagłówek hero, który pojawia się linia po linii z przejściem od rozmycia do ostrości. ScrollTrigger obsługuje reveale sekcji według sztywnej zasady: animacja gra raz i nigdy się nie cofa. Hover-preview w Selected Work używa gsap.quickTo() do opóźnienia kursora — jedynego technicznie poprawnego sposobu śledzenia myszy bez kosztu wydajnościowego. Custom cursor skaluje się i zmienia kolor na elementach interaktywnych. Żywy zegar Warszawy w nawigacji cicho tyka w mono. Cały motion respektuje prefers-reduced-motion.

Narracja UX podąża łukiem studyjnego reela: wejście przez typograficzny hero, wiarygodność przez edytorialową listę prac, kompetencje przez sekcję usług, filozofia przez cytat studyjny, social proof przez przewijającą się listę klientów i zaproszenie przez przeskalowane "Let's talk.", które podkreśla się na hover i zamyka całą stronę.

NOIR/STUDIO to koncept, który traktuje whitespace jak zdjęcia, typografię jak reżyserię, a motion jak montaż. Nie pokazuje pracy studia — zachowuje się tak, jak zachowuje się praca studia.