12 288 лиц одного логотипа

Логотип в шапке этого сайта не статичен. Каждая из семи букв CHERNOV нарисована в нескольких характерах — строгая, пиксельная, барочная, викторианская, оп-артовая — всего 27 начертаний. Буквы живут своей жизнью: раз в несколько тактов одна из них решает стать другой. Не мгновенно, а морфингом — форма перетекает в форму, как жидкость.

Это разбор того, как оно устроено и на какие грабли я наступил.

Почему морфинг, а не кадры#

Первая версия просто меняла SVG по кроссфейду. Работало — и было мертво: смена картинки читается как «глюк», а не как «жест». Живым логотип делает именно траектория: глаз успевает увидеть, как строгая антиква превращается в пиксельный гротеск, и достраивает характер персонажа.

Морфинг работает на flubber — библиотеке интерполяции путей. Но скормить ей буквы «в лоб» нельзя, и вот где начинаются детали.

Три грабли#

Дырки. Буквы «e», «o», «r» — это пути с отверстиями. Наивная интерполяция внешнего контура склеивает дырку, и буква на полпути превращается в кляксу. Решение: разобрать путь на подпути, сматчить их между начертаниями по эвристике — цвет заливки, площадь, расстояние между центроидами — и морфить подпуть-к-подпутю с fill-rule: evenodd, чтобы отверстия оставались отверстиями всю дорогу.

Лишние формы. В одном начертании буква состоит из двух фигур, в другом — из пяти. Куда девать три лишние? Прятать нельзя — заметно. Flubber умеет combine и separate: лишние формы честно вырастают из соседних или растворяются в них.

Ритм. Если морфить все буквы разом — получается салют, если по таймеру — метроном. Скучно и то и другое. Поэтому у логотипа есть «дирижёр»: соло-буква меняется каждые 2,8–4,6 секунды, а раз в 5–7 тактов по слову прокатывается волна со стаггером в 110 мс. Плюс лёгкое «дыхание» масштаба поверх, чтобы даже в паузах слово не было каменным.

Перфоманс-зона#

В футере логотип отдан посетителю: наведите на букву — она сменит характер. Комбинаций — 4 × 4 × 4 × 4 × 4 × 4 × 3 = 12 288. Счётчик внизу честно пересчитывает, сколько вы уже посмотрели.

Зачем всё это#

Логотип — самая частая точка контакта с брендом и самая мёртвая: обычно это картинка, приколоченная к углу экрана. Мне хотелось, чтобы подпись дизайнера вела себя как дизайнер — не могла усидеть на месте, но знала меру. Анимация без функции — украшательство; здесь функция есть: логотип демонстрирует диапазон — то самое, что продаёт портфолио.

Хороший motion-дизайн отвечает не на вопрос «как красиво подвигать», а на вопрос «какой у этой вещи характер».

Технические детали — flubber занимает 13 КБ, морфит на requestAnimationFrame с easeInOutCubic, при prefers-reduced-motion всё честно выключается. Буквы отрисованы в Figma, вычищены до чистых путей и живут отдельными SVG — по четыре варианта на букву (у «v» — три: четвёртую она ещё не заслужила).