Идея ваша и она сильнее всего, что я предлагал до сих пор: знак не рисуется, а собирается — ровно так, как продукт собирается из десятков скиллов, сервисов и плагинов. Мини-ролик здесь не украшение поверх готовой формы, а способ её существования: сначала части, потом целое.
Второе ваше замечание принято буквально. Шрифт больше не «стоит рядом»: в каждой карточке отдельный абзац показывает, какое именно число или приём взяты из знака — толщина штриха, шаг, зазор, скругление, правило контраста. Если знак разорван с зазором 2, шрифт разорван с тем же зазором. Если знак идёт с шагом 21, трекинг тоже 21.
Восемь роликов работают прямо на странице, цикл 4,6 секунды. При системной настройке «уменьшить движение» сборка отключается и остаётся собранная форма.
01 · Сборка из модулей
шрифт
аватар
тёмный
16 px
один цвет
РоликМодули влетают с разных сторон, поворачиваясь, за 0,9 с. Держат форму 2 с. Разлетаются.
СмыслДвенадцать одинаковых модулей встают в одну форму. Так собирается наш продукт: десятки одинаковых по природе инструментов дают один результат.
Шрифт выведен из знакаЗнак — сетка квадратов со стороной 25 и скруглением 2,5. Шрифт наследует ровно это: моноширинная поступь 92 единицы, прямые обрезы, штрих 15 — та же клетка, только вытянутая в строку.
Палитрачернила · киноварь
02 · Слои
шрифт
аватар
тёмный
16 px
один цвет
РоликПластины съезжаются попеременно слева и справа, ложатся в стопку. Верхняя приходит последней.
СмыслКаждый слой — отдельная работа: стратегия, копирайт, дизайн, вёрстка, аудит. По отдельности плоские, вместе дают глубину.
Шрифт выведен из знакаЗнак — пять пластин, каждая со светлой прослойкой между соседними. Шрифт двухлинейный: внутри толстого штриха идёт светлая линия — тот же слоистый разрез, перенесённый в литеру.
Палитраглубина · шафран
03 · Разные детали
шрифт
аватар
тёмный
16 px
один цвет
РоликДетали слетаются с четырёх сторон, каждая своим маршрутом и со своим поворотом.
СмыслРазные по природе инструменты — не набор одинаковых кубиков, а именно разные детали. Вместе они и дают то, что поодиночке не выходит.
Шрифт выведен из знакаЗнак смешивает круг, прямоугольник, треугольник и дугу. Шрифт повторяет смешение: круглые окончания, скруглённые стыки, лёгкий контраст 0,78 — литера тоже собрана из разной геометрии, а не из одной.
Палитрахвоя · трава
04 · Растр стягивается
шрифт
аватар
тёмный
16 px
один цвет
РоликТочки стягиваются из хаоса к сетке, диагональ загорается последней.
СмыслСотни мелких операций стягиваются в одну форму. Диагональ проявляется только когда всё встало на места.
Шрифт выведен из знакаЗнак состоит из кружков радиусом 5,5 — окончание штриха в шрифте сделано таким же круглым и того же диаметра. Монолиния 11: literа — это тот же кружок, протянутый по траектории.
Палитраграфит · бирюза
05 · Веер собирается
шрифт
аватар
тёмный
16 px
один цвет
РоликШтрихи приходят попеременно сверху и снизу и выстраиваются в дугу.
СмыслКаждый штрих — отдельный сервис. Длина разная, потому что вклад разный, но ритм общий.
Шрифт выведен из знакаЗнак — одиннадцать штрихов шириной 8 с шагом 21. Шрифт взял ровно эти два числа: штрих 8, трекинг 21. Слово и знак — один и тот же ритм, продолженный вправо.
Палитраночь · барвинок
06 · Осколки на место
шрифт
аватар
тёмный
16 px
один цвет
РоликОсколки возвращаются каждый по своей дуге и садятся встык.
СмыслРабота приходит разбитой на части и собирается точно. Зазор между частями остаётся виден: мы не прячем сборку.
Шрифт выведен из знакаЗнак разрезан на семь частей с зазором 2. Шрифт трафаретный: штрих разорван с тем же зазором — литера тоже собрана из кусков, а не отлита целиком.
Палитраасфальт · янтарь
07 · Конвейер
шрифт
аватар
тёмный
16 px
один цвет
РоликСтолбцы въезжают слева друг за другом с задержкой 85 мс и встают в ряд.
СмыслКонвейер, а не мастерская. Детали приходят по одной, каждая встаёт в своё место, порядок не меняется.
Шрифт выведен из знакаЗнак — шесть столбцов шириной 11 с шагом 20, сжатая плотная поступь. Шрифт сужён до 70% и стянут до трекинга 9: та же плотность строя, перенесённая в набор.
Палитрасталь · оранж
08 · Гармошка
шрифт
аватар
тёмный
16 px
один цвет
РоликСкладки расходятся слева направо, гармошка раскрывается на всю ширину.
СмыслСложенное разворачивается. Презентация, которая оказывается лендингом, — первый из новых форматов.
Шрифт выведен из знакаЗнак — складки, где освещённая грань толстая, теневая тонкая. Шрифт контрастный по тому же правилу: вертикали толстые, горизонтали 0,34 от них. Одна логика света в знаке и в литере.
Палитраслива · марсала
Вторая серия: другие механики сборки
В первой серии детали в основном прилетали. Здесь механика меняется вместе со смыслом: строки разворачиваются, столбцы вырастают снизу, секторы загораются по кругу, модули втыкаются в шину, створки разворачиваются от корешка, спутники сходятся по радиусам. Механика — часть высказывания, а не способ показать анимацию.
09 · Бриф в материалразворачивание строк
шрифт
аватар
тёмный
16 px
один цвет
РоликСтроки разворачиваются слева направо одна за другой, как заполняющийся документ.
СмыслСлева приходит текст брифа, справа выходит материал. Строки разной длины — это и есть неровный человеческий вход, который мы принимаем.
Шрифт выведен из знакаЗнак — семь строк высотой 8,9 с шагом 14,3. Шрифт сужен до 86% и стянут до трекинга 13, чтобы плотность набора совпала с плотностью строк в знаке.
Палитраграфит · киноварь
10 · Трое в одинсхождение и рост
шрифт
аватар
тёмный
16 px
один цвет
РоликТри столбца съезжаются к центру сверху, затем под ними вырастает общее основание.
СмыслМаксим, Антон, Дмитрий сходятся в один результат. Верхние три равны, нижний общий шире каждого — целое больше слагаемых.
Шрифт выведен из знакаТри столбца шириной 26 и общий блок под ними. Штрих шрифта 16 — ровно 0,62 от ширины столбца, то же отношение, что у зазора к столбцу в знаке.
Палитрахвоя · латунь
11 · Три позициирост снизу
шрифт
аватар
тёмный
16 px
один цвет
РоликСтолбцы вырастают снизу вверх с задержкой, средний приходит последним и выше всех.
СмыслДешёвый инструмент, мы, дорогая студия. Средний выше не потому, что лучше всех, а потому что стоит там, где никого нет.
Шрифт выведен из знакаСтолбцы шириной 24 с шагом 38. Шрифт взял тяжёлый штрих 18 и плотный трекинг 12 — та же массивность, что у столбцов, без воздуха между ними.
Палитрасталь · оранж
12 · За один деньзаполнение по кругу
шрифт
аватар
тёмный
16 px
один цвет
РоликСекторы загораются по кругу один за другим, последний — акцентный.
СмыслДвенадцать часов. Не «быстро», а конкретный срок, который можно проверить по часам.
Шрифт выведен из знакаЗнак собран из двенадцати секторов круга. Шрифт монолинейный с круглыми окончаниями — та же дуга, только развёрнутая в строку; штрих 12 равен толщине сектора у края.
Палитраграфит · бирюза
13 · Точечная правкаодин элемент из двадцати пяти
шрифт
аватар
тёмный
16 px
один цвет
РоликСетка неподвижна. Один элемент пульсирует и меняет цвет — всё остальное не шелохнулось.
СмыслНаш проверенный отличитель: меняется ровно то, что названо, соседнее не съезжает ни на пиксель. Двадцать четыре элемента стоят, один живёт.
Шрифт выведен из знакаСетка 5×5 с ячейкой 17,6. Шрифт моноширинный с поступью 88 — сетка, вытянутая в строку: каждая литера занимает одну ячейку независимо от формы.
Палитрачернила · киноварь
14 · Плагины в шинувтыкание сверху и снизу
шрифт
аватар
тёмный
16 px
один цвет
РоликМодули приходят сверху и снизу поочерёдно и втыкаются в шину.
СмыслСкиллы, сервисы и плагины подключаются к общей шине. Каждый сам по себе бесполезен, вместе они и есть продукт.
Шрифт выведен из знакаШина высотой 12 и четыре модуля шириной 14,6. Штрих шрифта 14 равен ширине модуля — литера и модуль это одна и та же деталь.
Палитраночь · электрик
15 · Хаос в порядокразлёт и сборка
шрифт
аватар
тёмный
16 px
один цвет
РоликЯчейки прилетают с разных сторон, поворачиваясь, и садятся в ровную сетку.
СмыслЗаявка приходит беспорядком. Наша работа — не добавить красоты, а поставить всё на места.
Шрифт выведен из знакаШестнадцать ячеек 20,25 со скруглением 2. Шрифт наследует скругление и плотность: прямые обрезы, трекинг 14 — тот же шаг между ячейками.
Палитратушь · охра
16 · Оттискприпечатывание
шрифт
аватар
тёмный
16 px
один цвет
РоликПлашки приходят с масштаба 1,25 и жёстко садятся в подложку — удар, а не наплыв.
СмыслПечать ставит тот, кто отвечает. Материал не выкладывается, а припечатывается — с ответственностью за результат.
Шрифт выведен из знакаЗнак — четыре плашки, впечатанные в бледную подложку. Шрифт трафаретный: штрих разорван, как разорвана сама композиция на отдельные оттиски.
Палитрасажа · сурик
17 · Опус раскрываетсяразворот створок
шрифт
аватар
тёмный
16 px
один цвет
РоликСтворки разворачиваются от корешка на 74° и встают в плоскость.
СмыслOpus — произведение, у которого есть корешок и разворот. Мы делаем не файлы, а работы, которые открывают.
Шрифт выведен из знакаСтворки со светлой и теневой стороной. Шрифт контрастный по тому же закону: вертикали полные, горизонтали 0,34 — одна логика света в знаке и в литере.
Палитраслива · марсала
18 · Две части сходятсявстречное движение
шрифт
аватар
тёмный
16 px
один цвет
РоликПоловины прилетают навстречу друг другу с поворотом и садятся замком.
СмыслРазвитие того хода, который вы отметили первым. Части приходят порознь и сходятся без зазора — точная сборка, а не склейка.
Шрифт выведен из знакаЗамок глубиной 12 при ширине половины 38,7. Штрих шрифта 21 повторяет толщину перемычки замка, трекинг 11 — её зазор.
Палитрахвоя · трава
19 · Нота собираетсялинейка и головка
шрифт
аватар
тёмный
16 px
один цвет
РоликЛинейки разворачиваются слева направо, затем вырастает головка и поднимается штиль.
СмыслOpus — это музыкальный термин. Стан появляется первым, нота ставится последней: сначала система, потом произведение.
Шрифт выведен из знакаНотный стан из линеек толщиной 3,5 и головка радиусом 13. Шрифт волосяной 9 с круглыми окончаниями — тонкая линейка и круглая головка, перенесённые в литеру.
Палитраграфит · лаванда
20 · Рука на конвейерепадение с неровностью
шрифт
аватар
тёмный
16 px
один цвет
РоликСтолбцы падают сверху по очереди, два садятся с лёгким перекосом и так и остаются.
СмыслКонвейер даёт скорость, рука даёт то, чего у генератора нет. Два элемента из пяти живут не по линейке — и именно это отличает работу от машинной.
Шрифт выведен из знакаПять столбцов, два из которых намеренно сдвинуты и повёрнуты. Шрифт с тем же дрожанием 2,2 — неровность в знаке и в наборе одной величины, а не на глаз.
Палитрасепия · терракота
21 · Слои включаютсяпроявление рамок
шрифт
аватар
тёмный
16 px
один цвет
РоликРамки проявляются от внешней к внутренней, третья — акцентная.
СмыслТак выглядит работа изнутри: слои включаются по одному, и только вместе они дают изображение.
Шрифт выведен из знакаПять контурных рамок толщиной 5,5 со сдвигом 7,5. Шрифт двухлинейный: внутри штриха идёт светлая полоса — тот же контур, вложенный сам в себя.
Палитраглубина · шафран
22 · Стягивание к ядрусхождение по радиусу
шрифт
аватар
тёмный
16 px
один цвет
РоликСпутники сходятся к центру по радиусам, ядро вырастает последним.
СмыслСотни идей вокруг одного ядра. Первая — презентация как лендинг, остальные подтягиваются.
Шрифт выведен из знакаВосемь спутников радиусом 8,5 и ядро 16. Шрифт монолинейный со штрихом 11 и круглыми окончаниями — тот же кружок, протянутый по траектории литеры.