Jak rysowaliśmy ten rękopis

Nie chcieliśmy zrobić kolejnej mistycznej aplikacji. Chcieliśmy zrobić książkę, której zdarzyło się zamieszkać w przeglądarce — książkę, której strony przewraca się po jednej karcie, której atrament zdąży wyschnąć między brudnopisami, której marginesy niosą te same włosowe ozdobniki, jakie podpisałby do druku szesnastowieczny typograf. Nazwanie tego rękopisem, a nie interfejsem, nie jest poetyckim przybraniem. Zmienia każdą następną decyzję.

Interfejs urządzony jest dla przepustowości. Chce doprowadzić od zamiaru do wyniku najmniejszą liczbą dotknięć. Rękopis urządzony jest dla uwagi. Chce, żeby zwolnić we właściwych miejscach — przy oddechu przed wyciągnięciem kart, przy cichych dwóch sekundach obrotu karty, przy pauzie, zanim interpretacja zacznie wsiąkać w stronę. Lunarcana zestrojona pod przepustowość byłaby szybsza i lżejsza, i nie byłoby po co do niej wracać.

Paleta kości słoniowej na obsydianie jest pierwszym, czego ta postawa się domaga. Ciemna strona czyta się jak welin podświetlony od spodu, jak chwila, w której świecę przysuwa się bliżej książki. Mówi też o powadze zamiaru w gatunku od dawna prześwietlonym fioletowymi gradientami i stokową szklaną kulą. Chcieliśmy, żeby Lunarcana od pierwszego spojrzenia czytała się jako poważne miejsce na cichą pracę wewnętrzną, a nie jako salonowa sztuczka.

Trzy rzeczy odrzuciliśmy z góry. Odrzuciliśmy sztampową ikonografię mistyczną w każdej postaci — żadnych powiewających szali, żadnych świecących dłoni, żadnych fioletowych mgławic. Odrzuciliśmy okienka modalne w chwilach ceremonialnych — zbieranie uwagi dzieje się w jednym ciągu, odsłonięcie dzieje się w jednym ciągu, nic nie przerywa. Odrzuciliśmy wreszcie ramę usługi orzekającej o przyszłości. Lunarcana jest grymuarem cyfrowym i narzędziem dziennikowym. Jest lustrem, nie wyrocznią. Wszystko poniżej służy tym trzem odmowom.

Paleta ma trzy nuty. Kość słoniowa jest atramentem domyślnym — każdy akapit tekstu, każda etykieta, każda cicha linia metadanych jest w kości słoniowej albo w jednej z jej przygaszonych odmian. Obsydian jest stroną: smolisty, nigdy zmiękczony do granatu czy grafitu, bo w chwili, gdy tło ociepli się choćby o kilka stopni, złoto traci swój próg, a rękopis zaczyna wyglądać jak strona reklamowa. Złoto jest trzecią nutą i jest reglamentowane.

Złoto jest wyłącznie sygnałem progu. Znaczy chwile, w których uwaga ma zmienić kształt — sigil marki na czele dokumentu, inicjał otwierający długi ustęp, włosową linię pod nagłówkiem sekcji, stan najechania obiecujący, że przycisk da się dosięgnąć, jasną krawędź karty w połowie obrotu, właśnie odsłoniętą etykietę pozycji, glif fazy księżyca w oprawie strony. Poza tymi progami złoto jest zakazane. Cała strona może przejść bez jednego złotego piksela i to jest zaleta, nie brak.

Powód reglamentacji jest informacyjny, nie estetyczny. Jeśli złoto jest wszędzie, złota nie ma nigdzie — przestaje nieść sygnał i staje się fakturą. Trzymając je dla chwil, które naprawdę zmieniają stosunek czytającego do strony, pozwalamy jednej ciepłej iskrze zrobić robotę, z którą w mniej zdyscyplinowanym projekcie nie poradziłoby sobie dziesięć gradientów. Reguła progu jest najważniejszą regułą tego dokumentu i jednocześnie tą, którą pod naciskiem kolejnych funkcji najłatwiej po cichu złamać.

W rękopisie jest osiem tokenów typograficznych i każdy ma jedną robotę. Display to logotyp i rzadki tytuł ceremonialny. H1 otwiera rozdział. Section to nadtytuł wprowadzający blok. Body to długa proza, którą czytasz w tej chwili. Body-CJK to ta sama proza po chińsku i po japońsku, z krojami nastrojonymi na inny rytm pionowy. Eyebrow to mała wersalikowa etykieta. Quiet to metadane na marginesie. Numeral to cyfra tabelaryczna w licznikach.

Krój tekstu głównego wybiera pomocnik bodyClass(locale): zwraca t-body dla łacinki i cyrylicy, a t-body-cjk dla chińskiego i japońskiego — bo znaki ideograficzne oddychają inaczej i ta sama interlinia, która po angielsku wydaje się szczodra, po chińsku wychodzi ciasna. Sprawdzania języka nigdy nie wpisuje się wprost w JSX: granica przebiega przez pomocnik i tylko tam.

Jedna pułapka kaskady warta jest zapamiętania na pamięć. Klasy .t-* w globals.css leżą poza warstwami, a to znaczy, że dowolne narzędzia Tailwinda w rodzaju text-[1rem] nie przebiją ani stopnia pisma, ani świateł międzyliterowych, ani interlinii w .t-display i .t-h1. Gdy te trzy potrzebują nadpisania responsywnego, schodzi się do stylu w atrybucie z clamp() — styl w atrybucie wygrywa w obu warstwach. Sparzyliśmy się na tym raz, przy logotypie w nagłówku; drugiego razu nie będzie.

Przejścia między fazami w Lunarcanie rozpływają się. Nie zjeżdżają, nie wyskakują, nie sprężynują w pionie. Cały bieg rozdania — pytanie, zbieranie uwagi, wyciąganie, odsłanianie, interpretacja — mieści się w jednym AnimatePresence w trybie wait, a każda faza wchodzi przezroczystością i wychodzi przezroczystością. Wyjątek jest jeden: sama karta obraca się wokół osi pionowej, bo karta jest kartą, a karta się obraca. Wszystkie pozostałe przejścia to atrament, który wstępuje albo schodzi.

Po pierwszej redakcji usunęliśmy layoutId. Chwyt jest piękny technicznie — Framer potrafi przelecieć między dwoma układami — ale u nas dawał ledwie widoczne skoki, gdy rozkład przebudowywał się po odsłonięciu kart. Przelot zastąpiliśmy przejściem CSS po left i osobnym rozpłynięciem nowej oprawy, i rękopis przestał drgać. Reguła brzmi tak: skok układu nie zdarza się nigdy. Jeśli strona mierzy się inaczej w dwóch stanach, nowy stan musi zająć swoje miejsce z wyprzedzeniem.

Ograniczony ruch jest uszanowany w każdej warstwie. Przy prefers-reduced-motion oddychające koło przestaje oddychać, obrót karty staje się trzystumilisekundowym rozpłynięciem, talia przestaje drżeć, świeca przestaje migotać, a złoty błysk przy obrocie zostaje wygaszony. Dostępność nie jest tu kratką do odhaczenia: dla narzędzia cichej uwagi jest samą powierzchnią.

Większość systemów projektowych opisuje ruchy, które wykonuje. Dokumentem trudniejszym — i tym, który czytamy ponownie najczęściej — jest lista ruchów, których wykonać odmawiamy. Puste miejsce też jest doktryną. Pięć rzeczy leży poza granicą.

Nic w Lunarcanie nie zostało wymyślone z niczego. Rękopis stoi na długiej półce pracy powolnej, robionej ręką i starannie ozdobionej, a wymienienie tej półki z nazwiska należy do dyscypliny. To są wpływy, które trzymaliśmy w głowie podczas długich redakcji. Żadne z tych nazwisk nie jest tu dla ozdoby — każde wniosło do gotowej książki konkretną postawę.

Jeśli doktryna robi swoje, znika, gdy tylko zostanie przyswojona. Większość tego, co napisano wyżej, po kilku minutach zacznie się wydawać po prostu pokojem, w którym się siedzi. O to właśnie chodzi. Reguły pod powierzchnią są po to, by powierzchnia mogła pozostać cicha.

Kiedy przyjdzie na to chwila, wyciągnij kartę. Talia jest w sąsiednim pokoju. Przewodnik stoi na półce nad nią. Strona o nas mówi, kto prowadzi ten rękopis. Mamy nadzieję, że oprawa wytrzyma.