Задача
Гость должен быстро выбрать блюдо, понять, из чего оно сделано, и почувствовать характер места ещё до визита.
ЖАРКО
О проекте
Сайт бургерной ЖАРКО: меню из 32 позиций, история ингредиентов, кухня и контакты. Бренд, блюда, состав и адрес вымышленные — это демонстрационный проект.
Подход
Меню разложено по четырём категориям с фильтрами и счётчиками, у каждой позиции есть состав, вес, время приготовления, аллергены и КБЖУ. Главная построена на движении: заставка, параллакс и 3D-стол с бургерами.
Что получилось
Сайт из 5 страниц: главная, меню на 32 позиции, ингредиенты, кухня и контакты. Движение можно остановить, а при системной настройке «уменьшить движение» оно отключается само.
Подробнее о проекте
Главную открывает заставка со сборкой бургера, её можно пропустить кнопкой или клавишей Escape. Дальше — параллакс, волны, витрина с вращением и 3D-сцена на Three.js, где бургеры падают на стол и сталкиваются по законам физики.
В меню по восемь бургеров, закусок, салатов и напитков. Фильтры закреплены вверху и показывают счётчики, состав и КБЖУ открываются в отдельном окне, блюдо можно добавить в корзину. Корзина сохраняется в браузере.
Оплата, доставка и отправка сообщений на сайте работают как демонстрация, настоящие заказы он не принимает. Значения КБЖУ вымышленные и помечены в интерфейсе.
Как мы собирали
- 01
Основа
React и Vite: пять страниц, общий каркас и быстрая сборка. Шрифты Oswald, Dela Gothic One и Golos Text лежат на сайте, внешние сервисы не нужны.
- 02
Движение
Анимации на GSAP, 3D-стол на Three.js, столкновения бургеров считает cannon-es. 3D загружается, только когда человек доходит до сцены; без WebGL показывается фотография.
- 03
Материалы
52 оптимизированных изображения: блюда, ингредиенты, гости. Референсы CRAV и Sunbeam мы адаптировали под самостоятельный бренд, а не копировали.
- 04
Проверка
Тесты запускаются командой npm test. Движение можно остановить кнопкой в футере, а системная настройка «уменьшить движение» отключает его сама.
