Интерактивная карта лобби-бара · 2026
Mantera Journey
Работа изнутри заведения
Автор коктейлей, рецептур и ТТКТехнико-технологическая карта — документ на позицию: состав, граммовка, выход, себестоимость.Весь словарь →. Концепция, дизайн, код
Восемь коктейлей — по одному на каждую бизнес-единицу холдинга. Изометрическая карта-диорама, восемь калиброванных тап-зон, карточки с переворотом, колесо фортуны со звуком через Web Audio. Один HTML-файл, всё внутри.
- Коктейлей
- 8
- Вес
- один файл
- Зависимостей
- 0
- Генератор QR
- свой
Живое демо
Это не скриншот — настоящий проект, работает прямо здесь. Листайте и нажимайте.
Задача
У холдинга восемь бизнес-единиц — отель, казино, курорт, замок с виноградниками, парк, форелевое хозяйство, деревня и горный курорт. Нужно было связать их с баром так, чтобы гость это почувствовал, а не прочитал в буклете.
Решение
Каждой единице — свой коктейль, и все восемь живут на одной изометрической карте-диораме. Тап по табличке уводит к карточке: лицо — фото коктейля, оборот — фото места, состав и описание. При загрузке золотые створки расходятся, облачка-дымки рассеиваются над табличками по очереди.
Что оказалось сложным
Тап-зоны на диораме пришлось калибровать вручную под палец, а не под курсор: восемь координат, каждая проверена на телефоне. Переворот карточки сделан кроссфейдомПлавная смена одного изображения другим через прозрачность: первое растворяется, второе проявляется. Мягче, чем поворот или сдвиг, и не даёт рывка на слабых телефонах.Весь словарь →, а не 3D-поворотом — на мобильных браузерах rotateY давал дёрганый кадр на середине анимации.
Колесо фортуны
Отдельный модуль: колесо на восемь секторов, вращение с замедлением и упругим доводом, звук через Web Audio API, бонусный флаер с промокодом и ограничение — один спин в сутки. Всё в том же файле, без библиотек.
Генератор QR
Написан с нуля: пятая версия кода, уровень коррекции H, фирменные цвета. Проверен сторонним декодером и на нескольких телефонах.