InterLAB
InterLABdigital studio
Меню
ГлавнаяПортфолиоУслугиНовости2Контакты
О компании
WhatsAppTelegram
Войти
InterLABdigital studio
Меню
ГлавнаяПортфолиоУслугиНовости2Контакты
О компании
WhatsAppTelegram
Войти
InterLAB
Войти
Кейс · Флагман · интерактив и моушн

Крем Coffee Кофе, который будит город.

Флагманский кейс спешелти-кофейни: фирменный стакан ведёт гостя через весь сайт по скроллу, а состав фирменного рафа разбирается на видео, которым управляет прокрутка. Редакционная антиква вместо дежурного гротеска, стеклянные панели с тёплым свечением, меню на 18 позиций из одного файла. Дизайн, код и визуалы — InterLAB. Кофейня вымышленная, это витрина подхода.

Открыть живое демо ↗наведите на облако — точки сгущаются

point-cloud · стакан навынос

interlab-demos.vercel.app/v3/cafe
Открыть живое демо ↗

это не скриншот — в рамке настоящий сайт · наведите, чтобы выпрямить

Problem → Solution

боль ниши

Кофеен много — запоминают единицы

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

решение

Продукт показан, а не описан

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

Design System

Палитра, пара шрифтов, стек. Одна ниша — одна система.

Кофе, который будит город

Prata — высококонтрастная антиква с кириллицей: засечки и тонкие штрихи дают редакционный характер. Onest — нейтральный гротеск для набора. Контраст засечек вместо контраста ширины.

Prata · заголовкиOnest · набор
  • --bg#572a14терракота
  • --surface#6d3a1dобжарка
  • --ink#f5ecddкремовый
  • --accent#f2a43cзолото
  • --accent-2#ff6a1fоранж крема

стек

Next.js 16Tailwind 4MotionScroll-videoffmpeg
UX-решения / 4

Почему сделано именно так

Продукт вместо стоковых кадров

01

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

scroll-choreography

Разбор напитка на видео, которым правит скролл

02

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

scroll-driven video

Редакционная антиква вместо дежурного гротеска

03

Prata — высококонтрастная антиква с полной кириллицей. Строчные вместо жирного капса сразу поднимают восприятие цены: спешелти читается дороже точки у метро.

editorial serif

Меню живёт в одном файле

04

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

JSON-menu · wa.me

Честно

«Крем Coffee» — вымышленная кофейня: флагман-демо шоурума InterLAB, цены и меню — иллюстрация формата. Такой же сайт под ваш реальный бизнес собирается с вашим меню, фото и номером WhatsApp.

отвечаем в течение рабочего часа

Хотите такой же — под вашу кофейню?

Покажем черновик на нашем поддомене до любых оплат. Скролл-видео, меню из одного файла и заказ в WhatsApp — как в демо, но с вашим напитком, позициями и фото.

  • Оценка объёма и рисков до старта
  • NDA — по вашему или нашему шаблону
  • Старт работ за 3–5 дней
Написать в WhatsAppTelegram

Нажимая кнопку, вы соглашаетесь с обработкой персональных данных.

InterLABdigital studio

web apps · services · software

ПортфолиоУслугиО компанииКонтакты

© 2026 InterLAB · Конфиденциальность