Сборка пикселями
Изображение открывается через уменьшающиеся ячейки. На мобильном используется более лёгкая сетка.
Посмотреть эффект →App3D / Digital workshop
Цифровая
мастерская.
Лендинг, который даёт почувствовать работу с формой, светом и материалом. С интерактивной 3D-сценой, нестандартной сеткой и движением под контролем посетителя.
App3D · опубликованный демонстрационный лендинг
Задача и моя роль
Показать инструменты через опыт.
Исходный многостраничный концепт рассказывал об инструментах App3D через множество похожих блоков. Я пересобрал его в одну последовательную страницу: от первого впечатления и эксперимента с моделью до возможностей, совместимости и выбора набора инструментов.
Задача редизайна — сделать эту длинную историю разнообразной, сохранив понятный порядок. Я проработал структуру и тексты, типографику Unbounded + Onest, адаптивную вёрстку, веб-сцену и систему взаимодействий.
- UX и продуктовый сценарий
- Веб-дизайн и типографика
- 3D и motion
- Frontend и публикация
Демонстрационный сайт на основе предоставленного концепта App3D. Иллюстрации показывают продуктовые сценарии, а веб-сцена создана отдельно. Готовность функций приложения не следует из наличия эффектов на лендинге.
25возможностей на странице
5направлений работы
12композиций галереи
1последовательный маршрут
01 / Живой объект
Свет, который
можно передвинуть.
Перетащите светящуюся точку мышью или пальцем. Блик и тень меняются вместе с настоящим источником света. Модель тоже можно вращать.
Процедурная веб-сцена на Three.js. Это самостоятельная демонстрация формы и материала, а не изображение, полученное в App3D.
Открыть сцену отдельно ↗02 / Ритм вёрстки
Одна система.
Разный масштаб.
В галерее чередуются крупный кадр, пары, тройки и зеркальные композиции. В Sculpting четыре изображения собраны по диагональному балансу: большие кадры напротив друг друга, меньшие между ними.
Пример композиции на иллюстрациях Sculpting из лендинга. Общие поля и подписи связывают кадры; на телефоне они выстраиваются в одну колонку.
03 / Оптика и внимание
Сначала — фактура.
Затем — ясность.
Ребристое стекло преломляет фотографию. При наведении слой плавно исчезает, при уходе возвращается. На телефоне этот сценарий переключается касанием, не мешая вертикальной прокрутке.
04 / Движение со смыслом
Скролл управляет
раскрытием.
Мозаика, полосы, «ластик» и выход из расфокуса отвечают на положение страницы. Раскрытие можно остановить посередине и вернуть назад. Заголовки и пояснения появляются отдельным, более спокойным ритмом.
Проходы «ластика»
Одна SVG-маска постепенно открывает изображение и текст. Она сохраняется для обратного скролла.
Посмотреть эффект →Фокус и стекло
Наведение открывает чёткий кадр. Фирменный курсор сохраняет знак App3D без растягивания.
Разобрать реализацию →
05 / Адаптация и доступность
В ладони —
свой сценарий.
Касание заменяет наведение, композиции собираются в колонку, а сложное преломление уступает место облегчённому стеклянному слою. Источник света можно перетаскивать пальцем.
При уменьшенном движении маски и декоративные эффекты отключаются: фото и текст видны сразу. Для интерактивных элементов предусмотрены клавиатурные действия и состояния.
Проверял адаптивную сетку, обратную прокрутку, повторные касания, отмену жеста, переключение профиля и работу без анимации.
Результат
Визуальная система,
которую можно исследовать.
Опубликован работающий адаптивный демонстрационный лендинг. 25 возможностей доступны на странице, интерфейс выбора инструментов пересчитывает демонстрационную цену, а модель, свет и материалы реагируют на действия.
Коммерческая конверсия не измерялась. Отправка заявок, оплата и аккаунты не подключены: кейс показывает дизайн и frontend, а не завершённый коммерческий сервис.
Дизайнерский разбор
Как собрать лендинг с вау-эффектом
Сетка, 3D, ритм и мобильный сценарий.
Техническая статьяКод скролла, света и стекла
GSAP, SVG, Canvas, Three.js и очистка эффектов.
Код проекта
Запустить App3D локально
HTML, CSS, неминифицированные JS-модули, иллюстрации, шрифты и зависимости. Отдельная сборка не нужна: распакуйте архив и запустите локальный HTTP-сервер по инструкции README.
Скачать исходники · ZIP