Кейс · дизайн продукта
Разбор интерфейса — с живыми демо, а не застывшими кадрами. Ниже: анимации UI и 3D, реально встроенная в композицию сайта.
Живые примеры
Интерактивные макеты повторяют логику legion-msk.ru: можно крутить модель, видеть появление блоков и слот под WebGL. В конце — iframe живого сайта.
Модель вращается внутри композиции. Лоадер → сцена, счётчики оживают при появлении в кадре.
Scroll как путешествие. Модель — часть интерфейса, не картинка в рамке.
Блоки проявляются по очереди — тот же принцип «тихого люкса», без статичного скрина.
01 · Ценности
Типографика и воздух держат ритм. Блоки проявляются по очереди — без карточного шума.
Каждый объект с чистого листа — без типовых решений в интерфейсе и в доме.
Цена в договоре. В UI — спокойный тон, без «акций» и шума.
Один контур ответственности. Так же собран сайт: без чужих виджетов.
После сдачи — сопровождение. После запуска сайта — развитие, не исчезновение.
Этапы слева, WebGL справа. Видно, что объём встроен в сетку, а не приклеен картинкой.
03 · Четыре этапа
Сначала смысл и сроки — потом объём в кадре. Модель занимает выделенный слот, не ломая сетку.
Полные scroll-анимации и орбита моделей — на боевом сайте в iframe.
Задача
Клиент — премиум-девелопер. Аудитория сравнивает долго и не терпит «агентского» шума. Обычный лендинг с сеткой проектов читался как витрина подрядчика: дома есть, доверия нет.
Нужен был сайт-продукт: объяснить характер бренда, дать прожить каталог и довести до брифа — без ощущения маркетплейса и без тяжёлого 3D, которое душит первый экран.
Дизайн-решения
Классическая сетка карточек убивала ощущение премиум-архитектуры: дом превращался в товар на полке. Выбрали scroll-вселенную: пользователь «путешествует» между объектами, а не листает каталог. Так бренд звучит как практика, а не как маркетплейс.
Тонкие крупные заголовки, воздух, минимальный UI. Вывод из тестов прототипа: тяжёлые блоки и яркие акценты спорили с геометрией модели. Дизайн должен быть рамкой для объёма, а не вторым шоу.
На hero оставили два CTA: войти в пространство (погружение) и обсудить проект (конверсия). Всё остальное — вторично. Иначе пользователь терялся между «посмотреть», «посчитать» и «написать».
Ценности и этапы пути клиента идут до жёсткой формы заявки. Логика: сначала снять страх неопределённости (как строите, что фиксируете), потом просить контакт. Форма в конце пути конвертирует теплее.
3D-визуализация
3D обещали как преимущество бренда — «каждая резиденция как модель». На практике это четыре трения: вес, масштаб, жесты и продакшен контента.
Полноценные GLB на hero блокировали LCP: белый экран или «загрузка 3D» ломали премиум-ощущение быстрее, чем успевала появиться модель.
Резиденции сильно отличаются по габаритам. Одна настройка камеры обрезала крупные объёмы или оставляла мелкие «бусинкой» в кадре.
Orbit + вертикальный scroll конфликтовали: пользователь тянул модель и одновременно скроллил страницу. Нужно было развести жесты без потери контроля.
Фото, планировки и модели жили в разных папках. Без единого манифеста каталог ломался при добавлении объекта — ручная правка HTML не масштабировалась.
Решение
WebGL поднимается после idle / появления в viewport. До этого — лёгкий poster и спокойный лоадер в эстетике интерфейса. Первый экран остаётся быстрым, модель не обязана быть «с нулевой миллисекунды».
Модели сжимаем Draco. Для hero / featured / catalog / project задали отдельные scale-профили и per-project множители: кадр стабилен, пропорции честные.
На мобиле вертикаль отдана скроллу страницы, орбита — ограниченному жесту на canvas. Пользователь не «застревает» в 3D, путешествие по вселенной остаётся непрерывным.
Один JSON описывает model, poster, exterior, interior, plans. Рантайм резолвит URL и fallback. Новый объект = папка + запись в манифест, без пересборки вёрстки.
Живое подтверждение — в демо выше: модель крутится внутри UI, а не лежит мёртвым превью.
Разберём задачу: где модель усиливает продажу, а где достаточно фото и сильной композиции.