Весь каталог — 76 живых демонстраций

Где хорошо смотрится: заголовки первого экрана, слоганы кампаний.

Где хорошо смотрится: история бренда, рассказ о производстве, кейсы.

Где хорошо смотрится: акцент на технологиях и инновациях, заголовки разделов.

Где хорошо смотрится: тексты-манифесты, ценностные предложения.

Попробуйте прокруткой — слои едут с разной скоростью. Где: заголовки серий и коллекций.

Наведите курсор — ускоряется. Где: ленты объявлений, кампании.

Зерно, создаваемое вживую, делает плоские цвета "вышедшими из типографии". Где: премиальные и ретро-бренды.

Для чего это: ДЕКОРАТИВНЫЕ данные, от которых страница кажется живым прибором или лабораторией. Mammut сделал это с GPS и пульсом альпиниста — читатель чувствовал себя на горе. Мы делаем это температурой варочного котла: посетитель чувствует себя в цеху. Часть чисел настоящая (часы, ваша прокрутка, ваш курсор), часть — атмосфера. Где: страницы о производстве или лаборатории.

Где: блоки статистики, "мы в цифрах".

Наведите курсор — буквы кувыркаются одна за другой. Где: меню, важные ссылки.

Наведите курсор. Где: сетки товаров и коллекций — это должно быть стандартом любого магазина.

Прокрутите — строки едут в противоположные стороны, наклоняясь со скоростью прокрутки. Где: разделители секций, манифесты.

Где: страницы 404, детские и хобби-бренды, разделы "игровая площадка".

Хватайте и тяните. Где: игровые зоны мудборда и палитры, страницы запуска.

Где: начала разделов, моменты эмоционального акцента.

Одна и та же анимация, два ритма. Ступенчатая ощущается "нарисованной от руки" — в этом был секрет Сайта года 2021.

Где: моменты смены цвета или серии, переходы между темами.

Подаёт технический материал с изяществом барной карты. Где: описания товара и подробности характеристик.

Заполнить форму — уже не повинность, а составить фразу. Где: страницы контактов и заявок.

Наведите курсор — ускоряется. Где: угловые значки, зоны "знака одобрения".

Где: премиальные и погружающие впечатления. При умеренном использовании делает сайт "осязаемым".

Одна 3D-модель, бесконечность цветов. Подумайте, что это значит в каталоге из 234 цветов. Где: главные блоки карточек товара.

Надпись гнётся как текстура на видеокарте. Где: разделы-манифесты, слоганы бренда.

Капли сливаются как настоящая жидкость, едва коснувшись друг друга, — и всё это математика. Где: премиальные открытия в духе FarbeLab.

Прокрутка = киноплёнка. Сцена прилипает к экрану, и камера едет, пока вы продвигаетесь. Где: рассказы о пути бренда.

Невидимая карта ветра тянет частицы; их следы превращаются в краску. Где: живые фоны, страницы 404.

Стеклянный шар с плавающими внутри цветными каплями, по-настоящему преломляющий свет. Где: премиальные презентации товара (FarbeLab).

3D-организм, поверхность которого непрерывно волнуется и меняет форму от прикосновения. Где: центральный объект первого экрана, маскот.

Настоящая симуляция ткани из 442 точек: гравитация, ветер и касание. Где: сцены с этикетками и флагами, запуски.

Два изображения перетекают друг в друга через карту шума. Где: наведение в галерее, переходы между коллекциями.

Не подражание, а физика: уравнения жидкости решаются в каждом кадре (диффузия, давление, завихрение). Где: открывающие экраны — это наша подпись.

Положение частиц хранится в текстуре и обновляется на видеокарте. В E23 их было 9 000 — здесь 262 144.

Для каждого пикселя прослеживается луч света: отражение, преломление, мягкая тень. Где: премиальные сцены с товаром.

Свечение, хроматический сдвиг объектива, виньетка, зерно плёнки. Этот слой поднимает на ступень каждую сцену каталога.

Две отдельные 3D-сцены, одна внутри другой. E27 был подражанием этому; здесь настоящее (буфер трафарета).

Одна фотография + карта глубины = иллюзия объёма. Где: снимки мастерской, предметная съёмка.

72 кадра готовятся заранее и привязываются к прокрутке — как видео, но управление полностью у вас.

Просит доступ к микрофону, ничего не записывает. Где: экраны выставочных стендов, стены на мероприятиях.

Надпись рассыпается на тысячи кубов, физика раскидывает их, а потом она собирается обратно. Где: моменты запуска, 404.

Десять тысяч копий одного объекта отрисовываются за один заход. Где: рассказ о мощности и масштабе, ощущение огромной фабрики.

Не поверхность, а объём: луч шаг за шагом собирает свет, проходя сквозь облако. Самая дорогая и самая кинематографичная техника.

Настоящая математика эбру: каждая капля кольцами раздвигает весь рисунок под собой; гребень проходит по синусоиде. Такого нет больше ни у кого в мире — фирменный эффект, выросший из нашей культуры.

Физика цветов мыльного пузыря (интерференция в тонкой плёнке). Цифровой аналог перламутровой краски Metakrlyic.

Газетная и трафаретная фактура. Где: бренды с ретропечатным настроением, страницы-плакаты.

Текстура сухой краски и состаривания, созданная ячейками Вороного. Где: винтажные серии, рассказы о реставрации.

Мягкое течение с низким контрастом. Где: разделы с длинным текстом, страницы контактов, под первым экраном.

Два вещества расходятся и вступают в реакцию (Грей-Скотт). Полосы зебры, коралл, пятно краски — всё из одного уравнения.

На экране синий + жёлтый = серый. На палитре синий + жёлтый = зелёный. Разница возникает из-за поглощения и рассеяния света внутри зерна пигмента; лакокрасочная промышленность считает это уравнением Кубелки-Мунка с 1931 года. В правой половине работает именно оно. Для красочного бренда нет более верного фирменного эффекта, чем этот.

Фирменный признак акварели — тёмное кольцо по краю здесь не рисуется — он образуется сам, потому что вода испаряется, а пигмент утягивается к краю и там остаётся. Учитывается и фактура бумаги: пигмент скапливается во впадинах (гранулирование).

Из каждого пикселя в сцену пускается луч, и лучи отскакивают от поверхностей, стараясь дойти до света. Белый шар рядом с красной стеной сам уходит в красноту — это не нарисовано, это произошло потому, что свет действительно оттуда отскочил. Браузерная версия метода, применяемого в кинематографических эффектах.

След кисти — не "печать". Каждая из 420 щетинок ведёт себя как отдельная пружина: нажмёшь — расходится, повернёшь — отстаёт, поднимешь — собирается. След рождается там, где щетинки касаются бумаги, — поэтому ни один мазок не похож на другой.

Та самая дрожащая светлая сетка, которую банка с водой отбрасывает на пол. Свет преломляется на поверхности жидкости и собирается в отдельных точках; из этой концентрации и рождается яркость. Наклон поверхности считается для каждого кадра.

к симуляции жидкости препятствие заданы: буквы. Краска ударяется о них, обтекает их края и оставляет за ними вихри. Название вашего бренда — не декорация сцены, а часть физики.

Две краски при дневном свете в точности одинаковы (ΔE = 0,0). Под лампой накаливания они расходятся, а под люминесцентной разница ΔE = 19— то есть очевидно. У отрасли для этого есть название: метамерное несовпадение — причина жалобы "в магазине подходило, дома нет". Здесь используются настоящие функции цветового соответствия CIE и настоящие спектры источников света; кривые отражения двух пигментов решаются так, чтобы получались.

Здесь краска — не цвет, а объём. Каждый мазок оставляет высоту; свет преломляется по наклону этой поверхности, а у края мастихина образуется гребень. Рельеф масляной картины, который виден, если смотреть сбоку.

Не по сетке, а 780 отдельных частиц жидкость, решаемая на нём. Каждая частица измеряет плотность соседей и отталкивает или притягивает; из этого рождается поверхностное натяжение. Капли действительно сливаются и рвутся — они не нарисованы.

Общая математика инея на стекле, кристалла меди и молнии. Частицы, блуждающие случайно, застывают в первой же точке касания скопления — поэтому кончики растут, а внутренняя часть остаётся голодной. Узор никто не рисует, он возникает сам.

Луч входит в стекло и выходит через заднюю грань — и каждый цвет под другим углом преломляется. Отсюда радужная кайма по краям; то же явление, что и при разложении света призмой. Форма бутылки тоже задана как одна математическая поверхность, файла модели нет.

Задайте цвет — и из каких пигментов в какой пропорции надо смешивать. То, что вы видите на экране, и есть работа колориметра лакокрасочной лаборатории: Кубелка-Мунк вычисляет цвет смеси, а пропорции шаг за шагом правятся, пока ΔE не уменьшится. Числа бегут вживую — решение находится сейчас, а не читается из готовой таблицы.

Способ, которым лакокрасочная отрасль измеряет укрывистость: на чёрно-белую карту наносят плёнку возрастающей толщины и смотрят на отношение показаний над чёрным и белым фоном. Толщина, при которой контрастное отношение превышает 98 % — это точка "полного укрытия". Здесь это уравнение (Кубелка-Мунк по грунту) решается попиксельно.

Все цвета, которые видит человеческий глаз, лежат внутри этой подковообразной области. Треугольник — это та часть, которую способен показать ваш экран. Любой цвет за пределами треугольника на вашем экране лжёт — некоторые настоящие пигменты лежат ровно там. Самый честный способ сказать клиенту: "цвет, который вы видите на экране, — это не сама вещь".

"Высохло и посветлело" — самая частая жалоба, и это не дефект краски: пока она влажная, вода и связующее заполняют промежутки между зёрнами пигмента, свет рассеивается меньше, и цвет тёмный и насыщенный проявляется. Вода уходит, её место занимает воздух, рассеяние растёт, и цвет светлеет и матовеет. Здесь коэффициент рассеяния растёт со временем, остальное — дело уравнения.

Переплетение — не узор, а инструкция: какая нить основы проходит над каким утком. Здесь работают настоящие раппорты переплетения — полотняное, саржа, сатин, ёлочка. Меняется раппорт — меняется ткань; меняются цвета нитей — меняется рисунок. Это и есть ядро любой текстильной САПР.

Тени поставлены не "для красоты": для выбранной широта, день и час вычисляются высота и азимут солнца, и свет ставится туда. Тот же расчёт, который архитектурные бюро делают для исследований затенения и инсоляции соседнего участка.

Куда бы ни легла нагрузка, усилие в каждом стержне решается мгновенно: красный — растяжение, синий — сжатие, толщина — величина усилия. За этим собирается настоящая матрица жёсткости и решается система уравнений — прямое применение курса статики. Прозрачная линия показывает деформацию, преувеличенно.

Это не анимация: маленькая искусственная нейронная сеть обучается прямо сейчас, в вашем браузере. Цветная область — решение модели; в каждом кадре работает обратное распространение, ошибка падает, и граница изгибается, пока не научится разделять два облака точек. Самый короткий способ для софтверного или технологического бренда сказать: "мы действительно этим занимаемся".

Сотни тел, разбросанных в пустоте, только из одной-единственной точки обзора выстраиваются и складываются в надпись. Анаморфоз, открытый в эпоху Возрождения; каждое тело поставлено на своей глубине вдоль луча, проходящего через одну-единственную камеру. Точно для искусства, галерей и впечатляющих пространств.

60 остановок, одна машина, кратчайший маршрут. Вариантов слишком много, чтобы компьютер перебрал их грубой силой (для 60 остановок их больше, чем атомов во вселенной), поэтому идёт доработка: находят два пересекающихся участка и разворачивают их, и маршрут всё укорачивается. В этом расчёте лежит счёт за топливо любого предприятия, которое развозит товар.

Колесо года: окно сбора каждого продукта, снаружи настоящая кривая длины дня вместе с ней. Длина дня считается по широте — это не декоративная волна, а сам календарь земледелия. Отвечает на вопрос "что свежее прямо сейчас?" одним взглядом.

В пищевой науке Правило Q10: рост на 10 °C кратно ускоряет порчу. Это уравнение работает здесь — измените температуру и посмотрите, как тает срок годности. Ниже расчёт: "что теряется, если холодовая цепь прервётся на день". Самый убедительный способ объяснить клиенту условия хранения.

Оливковое масло, мёд, виноградная патока — каждое течёт по-своему, и клиент хочет увидеть это в видео. Когда капля отрывается, по закону Тейта вычисляется: капля отрывается в тот миг, когда её вес побеждает поверхностное натяжение. Вязкая жидкость оставляет за собой нить, водянистая — нет.

Применяется для оливкового масла, кофе, мёда и вина сенсорная панель показаны. Когда профили двух продуктов накладываются, видно, где они совпадают, а где расходятся. Показать вместо слов "у нас более фруктовый" — только это и объясняет разницу в цене.

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

То же дерево, три разных лака. Разница не в цвете, в распределении отражения: матовая поверхность рассеивает свет широко, глянцевая собирает его узко и резко. На вопрос "матовый или глянцевый" клиент может ответить, только увидев их рядом.

Самая частая фраза в мебельной электронной торговле: "я не представлял, какой он большой". Показать товар В одной сцене с человеком ростом 1,75 м и показать в правильной перспективе — и проблема исчезает. При удалении он уменьшается, а размеры пишутся вживую.

В мебели в коробке большая часть возвратов и нагрузки на поддержку идёт от сборки. Показать, как детали соединяются, в трёх измерениях и шаг за шагом напрямую влияет и на доверие до покупки, и на поддержку после неё. Ровно то же применяется в машиностроении и запчастях.