Їжа / Ресторани · Студійне демо
ZHAR — інтерактивна історія продукту
Студійна збірка, яка показує формат скрол-історії на повсякденному продукті. Бургер розходиться на булку, соус, сир, котлету й цибулю разом зі скролом, процес розказано числами, а під ним — повний шлях замовлення. Не клієнтський проєкт: живе демо формату.
Студійне демо, зроблене, щоб показати формат. За ним немає ресторану, і замовлення не потрапляють на кухню.
Студійне демоЇжа / Ресторани
ZHAR — інтерактивна історія продукту
Бургер, розібраний шар за шаром разом зі скролом: склад, інгредієнти, процес.
- Формат
- Scroll story · exploded layers
- Розділи
- 4
- Пристрої
- Desktop · Mobile
- Статус
- Live demo
- Рік
- 2026
- Формати
- Скрол-історія продукту · Розібраний продукт
Проблема
Сітка фотографій страв нічого не каже про те, що всередині і як це зроблено. Те саме з більшістю фізичних продуктів: склад і є аргументом, а фото його ховає.
Ідея
Розглядати бургер як збірку. Сторінка побудована розділами, зафіксованими у вікні; скрол розводить шари й називає їх, а потім викладає процес — температуру, суміш, години — як специфікацію. Темп розбирання задає відвідувач.
Досвід
- Скролом розібрати продукт і зібрати назад
- Прочитати склад шар за шаром
- Побачити процес у числах, а не прикметниках
- Замовити з тієї ж сторінки: меню, модифікатори, кошик, обслуговування столика
Результат
Жива двомовна сторінка продукту, де склад продукту і є інтерфейсом. Та сама структура працює для будь-якого продукту, зібраного з частин.
Екрани
Технологія
- Next.js і TypeScript
- Зафіксовані розділи з послідовностями на скролі, які працюють в обидва боки
- Легші медіа для телефонів; нічого не вантажиться, доки відвідувач не почав рух
- Меню, кошик і обслуговування столика на тому ж стеку
