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

«Полымя»

Ресторан на открытом огне · бронирование

ЗадачаАтмосферу зала с сайта не почувствовать, а стол можно забронировать только звонком.

Ниша: Ресторан, где всё готовят на огне
Что делали: Сценарий страницы, дизайн, анимации, бронь, вёрстка
Бронь: В концепте демонстрационная. В работе — в систему бронирования ресторана или в Telegram администратору
Статус: Концепт: ресторан и цены вымышлены
Стек: Next.js 16 · React · TypeScript · CSS view-timeline · Canvas · zod/mini

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

Ужин начинается с углей: гость прокручивает вечер до стола и тут же его бронирует.

Жар нельзя сфотографировать. Его можно прокрутить

Фото блюда на белой тарелке не передаёт главного — открытого огня. Мы рассказали вечер четырьмя сценами: «Уголь → Огонь → Дым → Стол». Кадр закреплён, а слово и подпись меняются, пока гость листает вниз.

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

Сцена «Огонь»: закреплённый кадр пламени, слово меняется по мере прокрутки — Огонь на десктопе, дым на телефоне: одна история на любом экране.

Сцена «Дым» на телефоне — Огонь на десктопе, дым на телефоне: одна история на любом экране.

Стол на пятницу — с телефона, в четыре шага

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

Занятое время не нажимается, понедельник помечен выходным: гость не узнаёт об этом из вежливого отказа через час. В рабочем проекте свободные столы сайт берёт из системы бронирования ресторана.

Дата
Лента ближайших дней. Выходной видно заранее.
Время
Свободные слоты — на выбор, занятые не нажимаются.
Гости и зал
Сколько человек и где сесть. Выбор уже записан в адресе страницы.
Контакт
Имя и телефон с маской — всё, что нужно для подтверждения.
Стол ваш
Итог с датой, временем и числом гостей — можно показать спутникам.

«Назад» — это шаг назад, а не на главную

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

Бронь на десктопе: выбор времени, вечерний пик отмечен огоньком, прогресс из четырёх шагов

Меню не прячется в PDF

Меню разбито на главы, как и сам вечер: «Огонь», «Дым», «Зола», «Погреб». Цены стоят рядом с блюдами, страница открывается на телефоне сразу.

Ресторан в концепте вымышленный, поэтому 26 кадров зала и кухни сгенерированы в одном свете. В рабочем проекте здесь съёмка настоящего зала — чтобы гость заранее знал, куда идёт.

Остывший уголь#171210
Пламя#FF6B35
Латунь#C9A15C

Заголовки · Yeseva OneСтол на вечер
Меню и подписи · LiterataЗал у печи
Навигация и кнопки · JostУказать гостей

Глава меню «Дым»: блюда с ценами и кадр кухни — Глава «Дым»: блюда, цены и кухня в одном кадре.

Анимации не тормозят страницу

Атмосферные сайты часто грузятся долго, и гость уходит раньше, чем увидел огонь. Мы проверили все шесть страниц в Lighthouse — сервисе Google для замера скорости: 99–100 баллов из 100. Первый экран появляется за 1,5–1,7 секунды.

баллов из 100 за скорость, все шесть страниц: 99–100
до первого экрана: 1,5–1,7с

Ролик о проекте