Берёста — концепт-сайт ресторана

Задача

Показать, как должен выглядеть современный сайт авторского ресторана: не таблица бронирования из 2010-х и не «PDF-меню в footer», а атмосферное цифровое пространство, передающее настроение заведения с первого экрана.

Концепция «Берёста» — слияние русской традиции и европейской утончённости. Сайт должен быть таким же: серифные акценты + чистая типографика, природная палитра (forest green + cream + dark wood), тёплые AI-фотографии, лёгкие микровзаимодействия по всему пути пользователя.

Решение

Стартовая точка — собственная мини-дизайн-система: палитра из четырёх токенов (forest green + cream + dark wood + bark light), серифные заголовки Playfair Display, чистый sans-serif Be Vietnam Pro для текста, мягкое скругление 4-8px и paper-grain текстура поверх всей страницы. Бриф для каждого экрана был прописан заранее с типографикой, отступами и компонентами. Дальше — одностраничная вёрстка под Tailwind с продвинутой анимацией.

Анимации фона

• Ken Burns — фон hero медленно масштабируется и смещается, 30 сек цикл. Создаёт ощущение «живого» интерьера, не статичной картинки.
• Floating particles — 24 светящиеся точки летят снизу вверх, разная скорость и задержка. Имитация частиц света, попадающих в кадр через большое окно.
• Animated blobs — пульсирующие цветовые пятна в фоне секций Меню и Бронирования. blur-3xl + медленная анимация translate + scale — мягкий «дышащий» эффект.
• Mouse parallax — контент hero слегка следует за курсором.

Hero с летучими буквами

Заголовок «Вкус Леса» собирается побуквенно с задержкой 100 мс между символами и лёгким поворотом rotateZ(-10deg). Слово «Леса» — шиммер-градиент: бегущий цветовой переход (linear-gradient + background-position keyframe).

Scroll-reveal без библиотек

Каждая секция и группа карточек получает класс reveal или reveal-stagger. Один IntersectionObserver отслеживает их и добавляет .visible при попадании в viewport. Карточки внутри stagger-блока появляются с задержкой 100 мс друг за другом — естественный визуальный ритм без подключения AOS или GSAP.

Меню с переключением категорий

Завтраки / Обеды / Ужины переключаются мгновенно через data-tab / data-pane. При смене панели заново срабатывает reveal-stagger — карточки нового раздела появляются по очереди с fade-эффектом. Каждый раздел — настоящие блюда с ценами в рублях, не lorem ipsum.

Бронирование, которое хочется заполнить

Форма — не серая таблица. Гости выбираются селектом, дата — нативным <input type="date">, время — chip-кнопками с подсветкой активного слота. Пожелания — большое поле. Сабмит обрабатывается на JS — кнопка превращается в «✓ Бронирование получено».

Доступность и производительность

• prefers-reduced-motion: reduce — отключает все анимации для пользователей с настройкой
• Семантическая разметка: <header>, <main>, <section> с id для якорей
• Все изображения с alt-атрибутами
• Зеро бэкенда — статический HTML, отдаётся за миллисекунды

Результат

Сайт развёрнут на отдельном поддомене, доступен по HTTPS с Let’s Encrypt-сертификатом. Открывается мгновенно (~80 KB на index.html, остальное — CDN-картинки и шрифты Google Fonts).

Это концепт-демо — реального заведения «Берёста» не существует. Но архитектурно проект готов к продакшену: достаточно подключить настоящий бэкенд для формы бронирования (PHP-эндпоинт или Telegram-бот для уведомлений менеджеру), вставить реальные фото и встроить настоящие данные ресторана.

Стек технологий

• Frontend: Vanilla HTML5 + Tailwind CSS (через CDN, без сборки) + Vanilla JS
• Анимации: CSS @keyframes (Ken Burns, blob pulse, letter reveal, shimmer, float-up particles), IntersectionObserver для scroll reveal, requestAnimationFrame для смены панелей меню
• Шрифты: Playfair Display (заголовки), Be Vietnam Pro (текст), Material Symbols (иконки)
• Изображения: AI-арт с подобранной цветовой палитрой + фотобанк Unsplash для галереи
• Дизайн-этап: собственная мини-дизайн-система (токены цветов, типографики, отступов) под бренд-концепцию «Cozy Luxury»
• Хостинг: свой VPS, Nginx + Let’s Encrypt SSL