Почему рукопись, а не интерфейс
Нам не хотелось делать ещё одно мистическое приложение. Хотелось сделать книгу, которой случилось жить в браузере: книгу, чьи страницы переворачиваются по одной карте, чьи чернила успевают просохнуть между черновиками, чьи поля несут те же волосяные украшения, какие подписал бы в печать типограф шестнадцатого века. Слово «рукопись» вместо слова «интерфейс» — не поэтическое убранство. Оно меняет каждое следующее решение.
Интерфейс устроен ради пропускной способности: он хочет довести от намерения до итога за наименьшее число касаний. Рукопись устроена ради внимания: она хочет замедлить в нужных местах — на дыхании перед вытягиванием, на тихих двух секундах, пока карта переворачивается, на паузе перед тем, как толкование начнёт вписываться в страницу. Устроенная ради пропускной способности Lunarcana была бы быстрее и легче, и возвращаться в неё было бы незачем.
Палитра «слоновая кость по обсидиану» — первое, чего эта осанка требует. Тёмная страница читается как пергамент, подсвеченный снизу, как миг, когда свечу подносят к книге ближе. Заодно она сообщает о серьёзности намерений в жанре, который давно пересвечен фиолетовыми градиентами и стоковыми хрустальными шарами. Нам хотелось, чтобы Lunarcana с первого взгляда читалась как серьёзное место для тихой внутренней работы, а не как салонный фокус.
От трёх вещей мы отказались сразу. От готовой мистической картинки в любом виде — никаких развевающихся шарфов, светящихся ладоней, фиолетовых туманностей. От всплывающих окон в церемониальные минуты — собирание внимания идёт потоком, открытие карт идёт потоком, ничто не прерывает. И от рамки, в которой карты выдают за прогноз: Lunarcana — цифровой гримуар и тетрадь для практики, зеркало, а не оракул. Всё, что ниже, служит этим трём отказам.
Пропускная способность — для инструментов. Внимание — для ритуалов.
Цвет: слоновая кость, обсидиан, золото
В палитре три ноты. Слоновая кость — чернила по умолчанию: всякий абзац, всякая подпись, всякая тихая строчка служебных сведений написаны ею или её приглушёнными оттенками. Обсидиан — страница: чёрный без послаблений, никогда не смягчённый до синевы или графита, потому что стоит фону потеплеть на пару градусов — и золото теряет порог, а рукопись начинает походить на рекламную полосу. Золото — третья нота, и его отпускают по норме.
Золото — только знак порога. Оно отмечает места, где внимание меняет форму: сигил в шапке документа, буквица, открывающая длинный отрывок, волосяная линейка под заголовком раздела, состояние наведения, обещающее, что до кнопки можно дотянуться, светлый край карты в середине переворота, подпись позиции, которая только что открылась, глиф лунной фазы в оправе. За пределами этих порогов золота нет. Целая страница может пройти без единого золотого пикселя — и это свойство, а не недосмотр.
Причина нормирования не вкусовая, а из теории связи. Если золото всюду — золота нет нигде: оно перестаёт нести сигнал и становится фактурой. Оставляя его для минут, которые действительно меняют отношение читателя к странице, мы позволяем одной тёплой искре сделать работу, с которой в менее дисциплинированном рисунке не справились бы и десять градиентов. Правило порога — главное правило этого документа и то самое, которое тише всего нарушается под давлением новых возможностей.
Где золото разрешено
- Сигил Lunarcana в шапке документа.
- Буквица, с которой начинается длинный отрывок.
- Волосяная линейка под заголовком раздела.
- Наведение и фокус на живом элементе управления.
- Светлый край карты таро в середине переворота.
- Подпись позиции карты, которая только что открылась.
- Глиф лунной фазы в оправе страницы.
Фиолетового у нас нет. Ни в градиенте, ни в акценте, ни в наведении, нигде. Дело не в том, что цвет плох сам по себе: за последние двадцать лет фиолетовый стал опознавательным знаком целого жанра — обложек эзотерических серий, вывесок с ладонью и звёздами, иконок приложений про карты. Глаз считывает его прежде текста и заранее знает, чего ждать. Спорить с этой памятью бессмысленно — из неё проще выйти. Три ноты — слоновая кость, обсидиан, золото — говорят о том же самом, но без чужого акцента.
Набор: шкала, контраст, дыхание
В рукописи восемь шрифтовых токенов, и у каждого одна работа. Display — логотип и редкий церемониальный титул. H1 — открытие главы. Section — надзаголовок, вводящий блок. Body — длинная проза, которую ты читаешь прямо сейчас. Body-CJK — та же проза по-китайски и по-японски, с начертаниями, настроенными на другой вертикальный ритм. Eyebrow — маленькая прописная подпись. Quiet — служебное на полях. Numeral — табличная цифра в счётчиках.
Начертание тела выбирает помощник bodyClass(locale): он возвращает t-body для латиницы и кириллицы и t-body-cjk для китайского и японского — потому что иероглифические знаки дышат иначе, и та же высота строки, которая по-английски кажется щедрой, по-китайски выходит тесной. Проверку локали никогда не вписывают прямо в JSX: граница проходит через помощника, и только там.
Одна ловушка каскада стоит того, чтобы запомнить её наизусть. Классы .t-* в globals.css лежат вне слоёв, а значит произвольные утилиты Tailwind вроде text-[1rem] не перебьют ни кегль, ни трекинг, ни интерлиньяж у .t-display и .t-h1. Когда этим трём нужен отзывчивый перебой, спускайся к инлайновому style с clamp() — инлайн выигрывает в обоих слоях. Однажды мы обожглись на этом с логотипом в шапке; второго раза не будет.
.t-display · церемониальный
LVNARCANA
.t-h1 · открытие главы
Как мы рисовали рукопись
.t-eyebrow · подпись раздела
РИСУНОК И НАБОР
.t-body · длинная проза
Чтение — церемония, а не запрос.
Эти четыре образца набраны теми же самыми классами .t-*, что и вся остальная рукопись. Это не снимок экрана. Если голос токена однажды поплывёт, дрейф проступит сначала здесь.
Движение: растворения по одной прозрачности
Переходы между фазами в Lunarcana растворяются. Они не съезжают, не выскакивают, не пружинят по вертикали. Весь ход чтения — вопрос, собирание внимания, вытягивание, открытие, толкование — живёт внутри одного AnimatePresence в режиме wait, и каждая фаза входит прозрачностью и уходит прозрачностью. Исключение одно: сама карта поворачивается вокруг вертикальной оси, потому что карта есть карта и карта переворачивается. Все прочие переходы — чернила, которые проступают или сходят.
После первой редакции мы убрали layoutId. Приём красив — Framer умеет перелетать между двумя разметками, — но у нас он давал едва заметные скачки, когда расклад перестраивался после открытия карт. Перелёт заменили CSS-переходом по left и отдельным растворением новой оправы, и рукопись перестала вздрагивать. Инвариант звучит так: скачка разметки не случается никогда. Если между двумя состояниями страница мерится по-разному, новое состояние обязано занять своё место заранее.
Сниженное движение уважается на каждом слое. При prefers-reduced-motion дышащий круг перестаёт дышать, переворот карты становится трёхсотмиллисекундным растворением, колода перестаёт вздрагивать, свеча — мерцать, а золотая вспышка на перевороте гасится. Доступность здесь не галочка в списке: для инструмента тихого внимания она и есть сама поверхность.
Кривая прозрачности на переходе между фазами
Чего мы не делаем
Большинство систем описывает ходы, которые делает. Документ потруднее — и тот, который мы перечитываем чаще прочих, — это список ходов, от которых мы отказываемся. Пустое место здесь тоже учение. Пять вещей вынесены за границу.
Мы не берёмся говорить о будущем.
Lunarcana поставлена как цифровой гримуар, тетрадь для практики, внутреннее зеркало — а не как ремесло, объявляющее, чем всё кончится. Рамка несущая по двум причинам. Во-первых, её требует политика допустимого использования у платёжного оператора. Во-вторых — и это важнее — внутренняя работа, которую карты делают для читателя, обрушивается ровно тогда, когда карты выдают за прогноз. Мы говорим: гримуар. Говорим: дневник. Говорим: зеркало. Слова «оракул» мы про себя не говорим.
Мы не берём готовую мистическую картинку.
Ни фиолетовых градиентов, ни хрустальных шаров, ни развевающихся шарфов, ни светящихся ладоней, ни туманности за колодой. Единственная мистическая графика в рукописи — рисунок самой колоды, и оправа вокруг него нарочито суха, чтобы колода говорила своим голосом.
Мы не прячем сам ритуал за оплату.
Бесплатный доступ читает всегда. Два ежедневных расклада идут без счёта, остальные — по месячной мере. Стена, когда она появляется, стоит вокруг количества и вокруг выгрузки, но не вокруг дыхания, вытягивания, открытия карт и толкования. Церемония принадлежит читателю.
Мы не прерываем церемонию всплывающими окнами.
Собирание внимания — потоком, открытие карт — потоком, толкование вписывается потоком. Окно в одну из этих минут разбило бы ритм вдребезги. Окна оставлены служебному: подтверждения, настройки, оплата. Церемонии — никогда.
Мы не включаем звук сами.
Во многих местах по умолчанию тихо. Фоновый слой и отдельные звуки включаются вручную и помнят последний выбор. Звук, застигающий человека в тихом вагоне, — самый быстрый способ его потерять, и рукопись предпочтёт молчать, чем быть невежливой.
Родословная и ссылки
В Lunarcana нет ничего придуманного из ничего. Рукопись стоит на длинной полке медленной, сделанной руками, тщательно украшенной работы, и называть эту полку поимённо — часть дисциплины. Вот те влияния, которые мы держали в уме на долгих итерациях. Ни одно имя не приведено ради веса: каждое отдало книге вполне определённую осанку.
- Уильям Моррис и издательство Kelmscott Press
- Убеждение, что страница — не разметка, а ткань; что поля значат не меньше колонки; и что работа, переплетённая вручную, имеет право быть медленнее промышленного соперника.
- Обри Бёрдслей
- Дисциплина чёрно-белого контура и смелость оставлять большие поля страницы пустыми, чтобы одно-единственное украшение говорило за всех.
- Хромолитография Райдера — Уэйта 1909 года
- Собственно иконография и цветовая логика колоды — и напоминание: печатная мистика доходит внятнее всего тогда, когда перестаёт стараться выглядеть мистически и начинает выглядеть как серьёзная книга.
- Манускрипт Войнича
- Воздух страницы, которая знает больше, чем объясняет. Маргиналии. Волосяные украшения. Готовность дать читателю побыть не на своей глубине прежде, чем смысл осядет.
- Современное движение медленного дизайна
- Разрешение отказаться от петель вовлечения, бесконечной ленты и дофаминовой каденции, на которых держатся нынешние приложения, и рисовать для человека, который сам сел наедине с одной мыслью.
Приглашение
Если учение делает свою работу, оно исчезает, как только усвоено. Почти всё написанное выше через несколько минут станет просто комнатой, в которой ты сидишь. Так и задумано: правила под поверхностью нужны для того, чтобы поверхность могла молчать.
Когда захочется — вытяни карту. Колода в соседней комнате. Библиотека карт на полке над ней. Страница «О проекте» расскажет, кто хранит рукопись. Надеемся, переплёт удержит.