HAVN

Задача

Решение

1. Страница обжаривается при прокрутке

   Фон непрерывно едет по стадиям обжарки: зелёное зерно, жёлтая стадия, первый крэк, средняя, тёмная. Сверху идёт шкала температуры и времени, от 165°C и 0:00 до 212°C и 11:40. Цвет текста на каждом кадре выбирается расчётом контраста по WCAG, поэтому читаемость не проседает ни на одной стадии.

2. Логотип улетает в шапку

   На первом экране имя занимает всю ширину, а при прокрутке уменьшается и садится в шапку, оставаясь на месте до конца страницы. Знак не дублируется: это один и тот же элемент, который считает своё положение между героем и шапкой.

3. Витрина с фильтром по вкусу

   Восемь сортов в карусели, которую можно тянуть мышкой, листать стрелками и пальцем. Фильтр делит полку по тому, как человек на самом деле выбирает: яркие и кислотные, сладкие и мягкие, для молока. Вес и помол выбираются прямо на карточке, цена пересчитывается для килограмма.

4. Пачки нарисованы, а не сфотографированы

   Дойпак собран из кривых: шов с насечкой, боковой блик, тень от складки и кремовая этикетка с логотипом. Цвет сорта уходит на ярлык, и цвет текста на нём считается по контрасту, поэтому и на светлом, и на почти чёрном сорте подпись читается. Фотосъёмка упаковки для выдуманного заведения не нужна, а выглядит как настоящая полка.

5. Корзина общая для всего сайта

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

6. Календарь партий считается сам

   Жарим по средам, отправляем в четверг. Сайт сам показывает три ближайшие даты и подставляет нужную в заказ, поэтому «свежая обжарка» перестаёт быть словами и становится числом.

7. Страница на каждый сорт

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

8. Кофейня отвечает на вопросы гостя

   Живой статус «сейчас открыто» с часами до закрытия, меню с ценами, маршрут, звонок и нарисованная схема двора: вывески с улицы не видно, вход под синим краном. Это те вопросы, которые иначе приходят в личку по одному.

9. Логотип нарисован, а не набран

   Четыре буквы собраны из толстых скруглённых штрихов, низ идёт волной, как вода в гавани. Тот же знак работает на пакетах зерна и на карточках превью для мессенджеров.

10. Ноль внешних запросов

    Шрифт, картинки и скрипты лежат на своём домене. Ни счётчиков, ни чужих шрифтов, ни библиотек: нечему замедлять загрузку и нечего уводить наружу.

11. Витрина живёт как настоящая

    У сорта, который разошёлся, пачка гаснет, на ней появляется лента «нет в наличии», кнопка заказа выключается и вместо неё честная строка. Свежие партии помечены, у полки есть наклейка с графиком обжарки, а внизу экрана закреплена лента с циклом «заказ до вторника, обжарка в среду, отправка в четверг».

12. Мелочи, которые двигают заказ

    Счётчик стоит прямо на карточке, поэтому две пачки берутся одним движением. В конце полки набор из трёх сортов со скидкой, и его цена считается от настоящих цен пачек, а не назначается «на глаз». В корзине видно, сколько осталось до бесплатной отправки, и есть кнопка «добрать ещё зерна», которая возвращает к полке. Полку можно листать клавишами и тянуть за ползунок.

Что внутри

Вес страницы

200 КБ на первую загрузку

Запросов

12, ни одного наружу

Библиотеки

ни одной

Корзина

в браузере гостя, общая для всех страниц

Страниц

главная, восемь сортов и 404

Графика

пачки, логотип и схема двора нарисованы в SVG

Языки

русский, сорта латиницей

Телефон

карусель листается пальцем, картинки открываются по тапу

Без скриптов

страница объясняет, как заказать, и даёт адрес и часы

Пять дней до живой ссылки. Для сравнения: сайт-референс этого жанра тянет 1,8 МБ и 319 запросов, включая два рекламных пикселя и jQuery ради каруселей, и просит повернуть телефон горизонтально, чтобы добраться до магазина. Здесь то же ощущение сделано на 200 КБ, включая нарисованные пачки, работает с телефона одной рукой и ничего не отправляет наружу.