Колофон

От автора

Когда мы делали этот сайт, мы дважды переписывали его целиком — и оба раза не потому, что что-то не работало, а потому, что не звучало. Главным критерием была не функциональность, а присутствие: сайт должен был не упаковывать метод, а быть его продолжением.

Дольше всего возились с порталом. Идея простая на словах: лого в шапке отрывается, опускается на середину экрана, расходится на EXCI и CON, между ними проявляется этимология — tare, «будить», и scientia, «сознание», — потом части снова собираются, и через белую шторку справа налево мы заходим в видео-приветствие. На стыке двух систем рендеринга, DOM и SVG, буквы дрожали миллиметровым прыжком, который глаз не пропускал. Помог kick-start на первом кадре SVG и явное отключение лигатур в обоих слоях, чтобы шрифт рендерился одинаково.

Долго просидел над случаями из практики. Это самые длинные нарративы на сайте, набранные Cormorant Garamond — серифным шрифтом, который сам по себе хочет тишины. Но как только подключили smooth-scroll, прокрутка стала рваной: колесо мыши конфликтовало с библиотекой, библиотека конфликтовала с overscroll-behavior, и каждое движение в браузере отдавалось дрожью. Финальное решение — перехват wheel-событий на уровне окна до того, как их подхватит Lenis, плюс ручной prevent в нужных местах. Несколько вечеров — на одно ровное движение страницы.

Букинг рисовали под референс Cal.com, но без их фреймворков и без их кода. Получился frosted-glass над списком слотов, выбор часового пояса с автоматическим пересчётом времени, три способа оплаты, и форма, которая раскладывается из карточки наружу. Сделано на чистом Vanilla JS — никаких React, никаких пакетов. Сложнее, чем поставить готовое, но мы хотели понимать каждую строчку.

Дольше всего не давалась «Команда». Три портрета стоят полосами в ряд; наводишь на любой — он расходится почти на весь экран, оттесняя соседей, а поверх фотографии всплывают имя, регалии и короткий рассказ. На словах просто, но мучились мы над блоком несколько суток. Главная ошибка была в самом подходе к размеру: сначала фото меняли масштабом — через transform: scale, — и при движении они не сужались, а распухали, наезжая на соседей и теряя кадр. Переделали на изменение реальной ширины через flex: теперь полосы честно ужимаются и раздвигаются, а соседи плавно уступают место. Вторая морока — подложки: пока полосы перетекали, между ними на доли секунды проступали белые швы, фон страницы просвечивал ровно в момент анимации. Под все слайсы легла глухая тёмно-зелёная подложка, чтобы в любой щели был наш цвет, а текстовую шторку погнали не по ширине, а через clip-path — маска едет от края к краю, и шва на стыке не остаётся. Ровно тот случай, когда зритель не должен заметить ничего, — а за этим «ничего» неделя возни.

Что-то ещё. Hero-портрет на sticky-pin, проявляется только когда нужно. Cinematic-mode — шапка постепенно скрывается clip-маской, чтобы не мешать кадру. Книжная секция со шторкой-обложкой как у издательств. Курсор, который не заменяет системный, а догоняет его с инерцией, превращаясь в подсказку. Стек корешков-писем в духе osi.swiss. Каждая мелочь — осознанно. Это сложнее, но честнее.