Skip to content

Landing pages

Coffee shop website with animation and order ahead: the MORROW case

Анімований лендинг і консоль замовлень для бару

Кав'ярні та обсмажувальні · Тель-Авів
IndustryКав'ярні та обсмажувальні · Тель-Авів
WorkАнімований лендинг і консоль замовлень для бару
ScopeЗаставка · перший екран · меню-чек · циферблат барів · обсмажувальня · замовлення наперед · консоль бару
Timeline3 тижні від брифу до запуску
StackHTML / CSS / JavaScript / GSAP / WebGL
Year2026
01

CHALLENGE

What the project had to solve.

MORROW обсмажує каву у Флорентіні й наливає її у трьох барах Тель-Авіва. Власного сайту кав'ярня не мала: була сторінка в Instagram, а замовлення приймали через WhatsApp. Що заважало: • зранку у Флорентіні черга на 15 хвилин, і частина гостей розверталась біля дверей; • замовлення наперед падали в особистий месенджер бариста і губились у пікову годину; • у трьох барів різні години, тож гості щодня питали в директі «ви вже відкриті?»; • меню жило в PDF, а стоп-лист оновлювали в сторіз.

02

SOLUTION

What we built and why.

Зробили односторінковий сайт, де головна роль у кави, і консоль для бару. Сайт: • заставка: поки сторінка вантажиться, чашка наповнюється кавою; • перший екран: пачка і стакан MORROW нахиляються за курсором, унизу смуга з годинами роботи; • меню на світлому блоці: чотири позиції дня, а повне меню виїжджає у вигляді чека; • циферблат барів: тягнеш стрілку і бачиш, який бар відкритий о будь-якій годині; • обсмажувальня: навколо стакана літають зерна і відштовхуються від курсора; • замовлення наперед: гість обирає бар і час, а принтер «друкує» йому чек. Консоль бару працює на планшеті біля кавомашини: • черга замовлень за часом видачі зі статусами «нове», «готується», «готово», «забрали»; • меню і стоп-лист: позиція вимикається одним натиском і відразу зникає з сайту. На старті показали три варіанти першого екрана, у MORROW обрали темний з рукописним словом. Потім внесли дві правки: години бару в Сароні і назву холодного напою. Від брифу до запуску минуло три тижні.

PROJECT MATERIALS

Screens and interactions, not mock claims.

Open the images full screen. Use arrow keys or swipe to move through the gallery.

03 · RESULT

What changed after the launch.

Замовлення наперед тепер приходять у консоль бару. За день у Флорентіні їх набирається 64, і 97% готові до часу, який обрав гість. Середній чек такого замовлення ₪34. Питання «ви вже відкриті?» в директі майже зникли, бо години всіх трьох барів видно на циферблаті. Стоп-лист бариста вимикають на планшеті, і позиція відразу зникає з сайту.

0164

замовлення наперед на день у барі Флорентін

0297%

замовлень готові до часу видачі

03₪34

середній чек замовлення наперед

043 тижні

від брифу до запуску

LIVE DEMO

Open the working version in a separate view.

Open live demo

DISCUSS A WEBSITE

Have an idea for a product or a new website?

Describe the functionality, audience, and result you want. We will help shape the structure, development stages, and a realistic launch format.

  • A reply within one business day
  • A focused first step
Back to all cases

Choose the format that is easier for you. The contact page lets you leave the task in writing; booking lets you pick the time yourself.

Leave a taskBook a time
Live demo