Концепт студии · 2026

«Клён»

Боулинг · сайт с 3D-залом

ЗадачаБоулинг в торговом центре часто выбирают по цене за человека, и разговор сводится к ней.

Ниша: Боулинг на 12 дорожек в торговом центре
Что делали: Позиционирование, тексты, дизайн, 3D-сцена, вёрстка
Формат: Одна страница: цены, 3D-зал, бронь
Статус: Концепт: боулинг и цены вымышлены
Стек: HTML · JavaScript · WebGL2 · GLSL

Главная мысль

Платят за дорожку, а не за человека, — и сравнить с соседом по цене за голову уже нельзя.

Платят за дорожку целиком

Мы не стали строить предложение на цветомузыке, фото смеющейся компании и «от 500 ₽»: с таким набором гость сравнивает только цену за голову.

Предложение строится на цене за дорожку: сколько бы человек на ней ни было, до шести. Сравнивать с соседом по цене за человека больше не получится — единицы измерения разные.

Первый экран — про взрослые компании, которые приходят вечером, в самые дорогие часы. Семьи в торговом центре никуда не делись: для них отдельный блок ниже, с бортиками и детской обувью.

Самый дорогой час недели — 2 400 ₽ за дорожку. Мы называем его вслух.

Зал, которого нет, собрали с нуля

Фотографий зала у концепта нет, а стоковые кадры показали бы чужой зал. Так бывает и у настоящих заведений — до открытия или во время ремонта. Поэтому зал мы построили сами — от карандашного наброска до сцены, которая крутится под пальцем.

Сцена прошла путь как в кино: эскиз зала, чертёж кегли, черновая сцена, световой этюд, раскадровка удара. Только после этого — код.

01 · Эскиз пространстваИщем главное: длинная дорожка, тёплый свет сверху, общий стол для компании. Всё остальное — потом.
02 · Чертёж кеглиКеглю строим по официальным размерам — в кадре она должна выглядеть настоящей.
03 · Черновая сценаСцена из простых фигур: проверяем камеру, масштаб и путь шара, до того, как тратим время на оформление.
04 · Световой этюдТри тёплые лампы, лак с длинным бликом, холодный акцент в глубине. Свет здесь работает вместо фото.
05 · Раскадровка удараШесть кадров от замаха до табло над дорожкой. По ним прокрутка страницы ведёт камеру.
06 · Рабочий прогонПервый живой прогон в браузере: камера уже летит над дорожкой, свет и материалы ещё черновые.
07 · Сцена в браузереИтог: сцена считается прямо в браузере и не тормозит прокрутку.

Удар выглядит как настоящий

Если шар проходит сквозь кеглю, а кегли проваливаются под пол, зритель чувствует фальшь, даже если не может объяснить почему. Поэтому физику удара мы написали сами и просчитали страйк заранее.

Прокрутка страницы проигрывает удар кадр за кадром, как кино: гость сам решает, как быстро его смотреть.

Разбег
Прокрутка ведёт камеру за шаром. Клён под лаком, тёплый свет, никакой цветомузыки.
Пролёт
Камера проходит вдоль зала и показывает бар в двух шагах от дорожек.
Удар
Шар входит в кегли. Физика посчитана заранее, прокрутка проигрывает её кадр за кадром.
Страйк
Камера поднимается к табло над дорожкой — и вместо рекламного слогана зажигается «СТРАЙК».

Сцена как в кино

Вторая версия сцены ближе к кино: размытие в движении, глубина резкости, мягкое свечение ламп.

На слабых ноутбуках качество снижается само — четыре уровня, от полного кино до лёгкого кадра, — чтобы страница не тормозила.

Тот же удар с видеореализмом: глубина резкости и отражения — Потяните разделитель: слева исходная сцена, справа — с эффектами камеры.

Удар в основной версии сцены — Потяните разделитель: слева исходная сцена, справа — с эффектами камеры.

Ночь зала#08060A
Тёплая лампа#FFB43C
Табло#7FE8E0

Заголовки · GeologicaПолный зал. Отзывы.
Табло счёта · Press Start 2PСТРАЙК 300

Вся цена на виду — от 900 до 2 400 ₽

На первом экране — «от 900 ₽ за дорожку», но гость всё равно спросит, сколько стоит суббота. Поэтому ниже вся таблица по дням и часам, включая самый дорогой час — 2 400 ₽. Рядом калькулятор: сколько человек, сколько часов — и сразу сумма.

Сетка недели показывает, где свободно. Клик по ячейке подставляет день и время в заявку. Кнопки крупные и контрастные — по ним легко попасть пальцем даже в полумраке зала.