Подборка · 2026-05-30

Дизайнерские HORECA-сайты с видео-фоном, 3D и scroll-driven анимациями

18 живых референсов — рестораны Michelin, поварская крафт, кофейни, барам спиртных. Все URL открываются. Каждый разобран: что за фишка, на каком стеке, какая стилистика, чем полезен. Внизу — рекомендации по бюджету и стеку под будущий проект.

Top picks: 6 Worth checking: 8 Bonus inspiration: 4 Технология-лидер: GSAP + Webflow / Three.js
01

Top picks

сильнейшие и самые релевантные

Caffè Design

premium-food
ФишкаИнтерактивный 3D-мир кофейни — можно «ходить», открывать social-контент, пачкать общую доску. Awwwards SOTD 2025, score 7.57.
Стек
Three.jsReact-Three-FiberGSAPLenisCustom shader
СтильPlayful retro-pop, #FFB3D4 + #3F18FF, italian design club vibes
ПочемуЭталон «сайт-как-кусочек-гастрономии». Потолок 2025 года для кофейной темы.
Требует мощного железа. На слабых ноутах подтормаживает. Мобайл — упрощённая версия.
caffe.design Открыть
ФишкаМногостраничный сторителлинг с разными layout'ами, scroll-triggered teaser-эффекты, dark-mode переключатель. Контент-фокус — кухня и интерьер.
Стек
GSAP ScrollTriggerResponsive gridLazy-load
СтильLuxury hospitality, тёплая палитра, refined typography, «only 5 tables»
ПочемуMichelin-уровень БЕЗ оверкилла 3D — через фотографию, scroll-storytelling, типографику. Реалистичный референс для дорогого ресторана.
Не WebGL. Если клиент хочет крутящиеся 3D — это не оно. Зато доказательство, что immersive ≠ обязательно Three.js.
hotel-castel.com/.../castel-fine-dining Открыть

Restaurant GEM

fine-dining
ФишкаOn-hover dish preview — наводишься на пункт меню, появляется live-видео блюда. Fullscreen-секции, page transitions, бесшовный booking flow.
Стек
WordPressGSAPHTML5 video
СтильWarm refined, тёплое золото + кремовый, цинично-элегантный шрифт, photography-driven
ПочемуAwwwards Nominee. Пример как «обычный WordPress» доводят до agency-level через motion. Immersive ≠ дорогущий tech-стек.
На WP — для multi-location или сложного CMS это не лучшая база.
restaurantgem.com Открыть

sen knife

horeca-b2b
ФишкаКарусели с 7 цветовыми вариантами стальных ножей, scroll-индикатор, японская precision-эстетика, продуктовая фотография крупным планом.
Стек
Next.js / AstroLenisGSAP
СтильDark moody minimal, японская меttикуляция, монохром с акцентами стали
ПочемуРедкий B2B-HORECA референс (инструменты для шефов). Если клиент = поставщик кухонной утвари — прямое попадание.
Sub-route /2.0/ намекает что это редизайн поверх старой версии — путь не самый чистый, но работает.
sen-knife.com/2.0/ Открыть

Done Drinks

premium-food
ФишкаScroll-triggered reveals, timeline 2018-2025 с параллакс-картинками, embedded video-demo, бутылки «плавают» на фонах неба и природы.
Стек
WebflowGSAPFigma-to-code
СтильPlayful motion, шоколад #3A1D17 + коралл #F26B75, single-page horizontal
ПочемуКак на Webflow + GSAP сделать award-level. Идеально если иммерсив без full-custom Three.js разработки. Honorable Mention 2025.
Single-page — для каталогов / десятков страниц меню потребуется доработка структуры.
donedrinks.com Открыть

Amrit Palace

restaurant
ФишкаScroll-based menu — пункты меню разворачиваются по мере прокрутки с GSAP-анимациями. Также есть 3D-интеракция для gift card.
Стек
WebflowGSAP ScrollTriggerAVIF images
СтильElegant heritage minimalism, тёплые оттенки, типографика-driven
ПочемуПрямой шаблон «restaurant с премиальным scroll-menu» — клиент тыкает /menu и понимает как должен прокручиваться его собственный.
Главная страница спокойнее чем /menu — покажи именно menu-страницу.
amritpalace.com/menu Открыть
02

Worth checking

второй эшелон — хорошие приёмы и стилистика

Греческий узо, warm rustic craft-paper эстетика, photo-carousel, age-gate. Премиум heritage — «бабушкин рецепт» подано дорого.

matarellis.grОткрыть

sakazuki

premium-food

Японский саке-collective, dark Japanese minimalism, sectional scroll (philosophy / collective / founder). Next.js, чистая типографика.

sakazuki.ioОткрыть

Вьетнамский ресторан, family-flavor storytelling, instagram-feed, illustrated vectors. Тёплый casual вместо fine-dining — другой полюс HORECA.

mrspringmrsfresh.comОткрыть

Wildbran

snack-brand

Португальский снек-бренд, Webflow + YouTube-embed, dynamic product carousel (6 категорий), minimalist craft tone. Для здорового питания / батончиков.

wildbran.ptОткрыть

Sophisticated minimalism, scroll-animations, кастомный date/time picker. Михеленский эталон «restraint over flash» — в fine-dining wow делает контент, не WebGL.

ricardcamarena.comОткрыть

Massimo Bottura. Минималистичный, gallery-driven, philosophy-first («laboratory of ideas»). Эталон бренд-подачи Michelin-уровня.

osteriafrancescana.itОткрыть

Итальянский кофе с 1937, Shopify-based, taste-profiler tool, lake-Como heritage. Mid-range пример как Shopify можно сделать визуально премиальным.

caffemilani.itОткрыть

Ceremony Coffee

coffee · anti-3D

Awwwards SOTD, minimalist e-commerce + subscription, БЕЗ WebGL/3D — эталон чистого UX для DTC-coffee. Anti-reference: «премиально-минимально» без оверкилла.

ceremonycoffee.comОткрыть
03

Bonus inspiration

не HORECA, но immersive-эстетика-эталоны

Lusion

studio

Bristol studio. WebGL + 3D storytelling, flip-solver, ray-marching, ray-tracing. Потолок immersive web. Показать клиенту верхнюю планку.

3D storytelling websites + cinematic brand videos, 50+ Awwwards-recognitions, Awwwards SOTD за «Noomo Beat» 2024. Готовая студия для контракта подобной работы.

noomoagency.comОткрыть

Milan immersive interactive 3D — та же команда что делала Caffè Design. Показывает во что трансформируется immersive когда делают «топ-out».

dversostudio.ioОткрыть

Курируемая галерея 3D-сайтов. Клиент сам полистает и ткнёт пальцем «вот в таком стиле». Бесконечный источник дальнейших референсов.

awwwards.com/websites/3d/Открыть
04

Технологии и бюджеты

что стоит за immersive-сайтами

GSAP + ScrollTrigger

Done Drinks · Amrit Palace · Caffè Design · Castel

Scroll-driven анимации, timeline-based motion. Стандарт индустрии, бесплатно с 2024 включая коммерческое использование.

Webflow

Done Drinks · Amrit Palace · Wildbran · Mr.Spring

No-code/low-code конструктор. Позволяет дизайнеру делать award-level без full-custom dev. Идеален для среднего бюджета.

Three.js / R3F

Caffè Design · Lusion · Noomo

Полноценный WebGL/3D в браузере. Для серьёзного immersive — must-have. React-Three-Fiber упрощает работу с React.

Lenis / Locomotive Scroll

sen knife · Caffè Design

Smooth scroll — плавная прокрутка с инерцией. Маленькая деталь, но это «уровень премиум-ощущения».

Next.js / Astro

sakazuki · sen knife

Современные SSR-фреймворки. Стандарт под кастом-проекты. Astro выигрывает в скорости загрузки.

HTML5 video (autoplay loop muted)

Castel · Restaurant GEM (hover preview) · Done Drinks

Фоновое видео — самый дешёвый immersive-эффект. Не требует Three.js. Главное — оптимизированный mp4/webm под web.

Три уровня бюджета — рекомендация под проект клиента

WOW-уровень Caffè Design
Next.js + Three.js (React-Three-Fiber) + GSAP + Lenis + кастомный shader. Разработка 2-3 месяца.
$30-50k
«Хорошо но без оверкилла» — Done Drinks / Amrit Palace
Webflow + GSAP + premium video/photography. Разработка 3-5 недель.
$5-15k
Fine-dining без 3D — Castel / Restaurant GEM
WordPress / Webflow + GSAP + сильный art-direction. Минимальный технологический риск.
$4-10k