[11]

3 Monkeys Bozüyük

2026

Клиент

Piton Studios

Год

2026

Объём

Web design, scroll animation, WebGL

Роль

Design / Development

Сайт онлайн

Открыть сайт ↗

§ Детали проекта

3 Monkeys Bozüyük — Концепт-сайт бургерной: бургер, собирающийся слой за слоем при прокрутке, и hero-экран с дымом на WebGL в реальном времени.

Концепция сайта на турецком языке с мобильной адаптацией, которую мы подготовили для филиала 3 Monkey Burger House в Бозююке. Над кинематографичной сценой с тремя бургерами в реальном времени плывёт дым; при прокрутке шесть отдельных фотослоёв — булочка, соус, чеддер, котлета, зелень — собираются в один бургер. Главная, меню, наша история и контакты сделаны отдельными страницами.

Сайт разработан на Next.js App Router, React 19 и TypeScript. Сцена с бургером — не 3D-модель, а 2.5D-композиция слоёв на CSS-перспективе, а дым — шейдер WebGL без сторонних зависимостей. Это независимая дизайн-концепция, а не официальный сайт ресторана; изображения сцены условные, цены и непроверяемые сведения не показываются.

Next.jsScroll AnimationWebGLRestaurant

Задача

Это независимая концепция, подготовленная Piton Studios по собственной инициативе; она не является официальным сайтом ресторана и не подаётся как заказная клиентская работа. Цель — создать для местной бургерной аппетитный, анимированный, но лёгкий сайт: сцену прокрутки, рассказывающую о продукте, сильный hero-экран и быстрый доступ к меню. Сделать это нужно было без тяжёлой 3D-модели или видео, сохранив плавность на мобильных и слабых устройствах.

Решение

Сцена с бургером состоит из шести слоёв одного фотоспрайта; слои расходятся и собираются за счёт CSS-перспективы и прогресса прокрутки, WebGL-модель не требуется. Дым на hero-экране — шейдер WebGL без зависимостей: ограничен 30 кадрами в секунду, останавливается вне экрана, в скрытой вкладке и при выбранном уменьшении движения; если WebGL недоступен, интерфейс продолжает работать. Анимации работают на пассивном обработчике прокрутки и requestAnimationFrame, прокрутка колесом сглаживается с помощью Lenis. Для мобильных предусмотрена отдельная вертикальная композиция hero, мобильное меню с управлением с клавиатуры и поддержка Escape. Ссылки на телефон, Instagram, карту и актуальное меню ведут на реальные каналы филиала; бэкенда, оплаты, регистрации и сбора персональных данных нет.

Ключевые технические решения

Шесть фотослоёв, собирающихся при прокрутке: 2.5D-сцена на CSS-перспективе, без 3D-модели.
Шейдер дыма на WebGL без зависимостей; ограничение 30 кадров в секунду, автопауза вне экрана и в скрытой вкладке.
Отдельная вертикальная композиция hero для мобильных и мобильная навигация с управлением с клавиатуры.
Контент остаётся видимым без JavaScript, настройка уменьшения движения учитывается.
Без цен, наград и непроверяемых часов работы; за актуальной информацией посетитель направляется на каналы самого филиала.

Технологии

Next.jsReactTypeScriptWebGLCSSLenisVercel

Результат

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