Frühschicht

Задача

Сайти обсмажувалень майже взаємозамінні: беж і крафтовий папір, зерна, що падають через екран, лате згори на деревʼяному столі, «обсмажено з любовʼю» й однакові пачки, на яких міняється лише назва. Я хотів показати магазин обсмажувальні, який упізнаєш навіть із закритим логотипом і де кожен колір і кожне число щось кажуть про каву. Це зразковий проєкт: обсмажувальня, будівля й кави вигадані, фото й пачки згенеровані, нічого насправді не продається.

Роль

Концепт, арт-дирекція, дизайн, розробка, 3D, пакування

Що зроблено

• Арт-дирекція до коду: чесний перелік кліше кавових сайтів, мудборд із двома палітрами на одному й тому самому екрані та трьома парами шрифтів. Обрано бетонний сірий з одним вишневим червоним лише для дій, а колір зʼявляється тільки як ступінь обсмажки: охра, іржа, темно-коричневий. Ідея — від місця: Frühschicht означає «рання зміна», обсмажувальня стоїть у колишній шахтарській лазні в Рурі, тож сайт читається як графік змін і протокол обсмажки.
• Цілий магазин, а не лендинг: каталог-полиця з фільтрами за способом заварювання й смаком і повзунком обсмажки, що їде по кривій, сторінки товарів, один кошик на всі сторінки, демо-оформлення й підписка Dauerschicht, яка одразу показує знижку 10 %. Тікер у шапці рахує час до наступної обсмажки й показує номер партії, а футер — це план обсмажки на тиждень: вівторок і пʼятниця.
• Пачка, яку можна повертати: на сторінці товару це 3D-модель на Three.js. Тягнеш її або обираєш бік, і кожна грань несе свої дані: етикетка, походження, обсмажка, смак. Нижче крива обсмажки малюється з даних профілю, а сторінка обсмажувальні ставить усі три криві поруч: той самий барабан, різний кінець.
• Гайд із заварювання, який справді працює на кухні: обираєш V60, Aeropress, френч-прес чи мока і дозу, сайт рахує воду й температуру, а потім веде крок за кроком із живим таймером і цільовою вагою, і екран не гасне.
• Пачки зі справжніми даними про каву, як на доброму спешелті: походження, регіон, різновид, обробка, висота, смак. Я написав бриф і згенерував їх у чотири раунди в gpt-image-2, окремо німецькою й українською. Німецька, англійська й українська з власними адресами; шрифт заголовків болгарський і за замовчуванням малює «д» як g, тож я зробив файли шрифту зі звичними українськими формами літер. «Зменшити рух» враховано всюди.

Результат

Демо працює: покладіть пачку в кошик, пройдіть оформлення й запустіть таймер заварювання самі. Нічого не оплачується і нічого не виходить за межі вашого браузера. Так само обсмажувальня, пекарня чи чайна крамниця можуть продавати на власному сайті, з власним характером замість шаблону.

Інструменти

Astro, TypeScript, Three.js, View Transitions, Nanostores · gpt-image-2 (bags) · Sofia Sans Extra Condensed, IBM Plex Mono