Три цифровых меню для точки продаж кофе на вынос: с живым фоном, анимацией элементов, своим шрифтом и игрой для тех, кто стоит в очереди. Разбираем, что из чего собирается, чем это генерировалось и сколько стоило.
Коротко
- Меню-борд собирается из трёх слоёв: фон, текст меню, оформление с информерами. Каждый слой живёт отдельно и правится отдельно.
- Текст и цены редактируются прямо в конструкторе за минуту. Перегенерировать картинку при смене цены не нужно — в этом весь смысл разделения на слои.
- Оживить меню можно двумя способами: зацикленным видеофоном или анимацией элементов через HTML прямо в конструкторе. Второй способ бесплатный. Для первого — нужен видеохостинг.
- Генератор рисует всё, кроме текста. Цифры он рисует особенно плохо.
- Расходы на генерацию — от 5 до 12 долларов на шаблон. Дизайнер и программист не нужны.
Инструменты: изображения — gpt-image-2 и nano-banana-2, видеофоны — seedance-2.0, сборка — конструктор PRTV и браузерный агент Claude.
Из чего состоит меню-борд
Главное, что стоит понять до начала работы: цифровое меню — не картинка. Это три независимых слоя.
Слой 1. Фон. Атмосфера заведения. Генерируется нейросетью один раз и дальше не трогается. Может быть статичным или зацикленным видео.
Слой 2. Текст меню. Названия, описания, цены. Живёт нативными элементами конструктора и правится прямо в браузере. Изменилась цена на латте — открыли, поправили, всё отобразилось на ТВ. Полминуты.
Слой 3. Оформление и информеры. Часы, погода, плашка с предложением дня, QR-код. Часы и погода — готовые виджеты, они показывают реальные данные, а не нарисованное время.
Схема работы
- Первичный дизайн. Просим нарисовать меню целиком — стилистика, гамма, кухня. Это способ увидеть направление, а не рабочий файл.
- Разбивка на составляющие. Тем же генератором и в той же стилистике вынимаем фон без текста, орнаменты и рамки, фото напитков и десертов. То есть, просим сгенерировать отдельным промптом — фон этой картинки, другими промптами: фото блюд, рамки и другие элементы оформления на прозрачном фоне.
- Анимация фона — по желанию. Видеофон через
seedance-2.0либо анимация элементов через HTML. Со статичным фоном меню тоже работает. - Сборка слайд-шоу. Загружаем фото и видео в конструктор, текст и цены с оформлением расставляет браузерный агент Claude. Хотя, двигать картинки быстрее самому.
Игра на втором слайде — отдельная история и не обязательная часть схемы: слайд вполне может быть один. Но если очередь в заведении не редкость, она не помешает.
Кейс 1. Меловая доска — основы
Задача: фон для среднестатистической точки кофе на вынос, который можно анимировать и зациклить.
Первый вариант нейросети — интерьер кофейни с панорамным окном. Красивый, но места под меню почти не осталось: полки, лампы и растения заняли кадр до самого верха. Перевернули пропорцию: вся предметная жизнь ушла в нижнюю ленту на 25–30% высоты, верх освободили под меню на грифельной доске.
Доска рисуется полностью пустой. Чистая тёмная поверхность в деревянной раме, с лёгкой текстурой меловой пыли и без единой буквы. Меню ложится поверх нативным текстом и правится в любой момент. Пустые верхние углы закрыли рамкой: гирлянда Эдисона по верху, плющ и эвкалипт по углам, тонкая латунная обводка по периметру.
Видеофон
Статичный фон оживили десятисекундной петлёй. Двигаются ровно три вещи: пар над чашкой, гирлянда с колебанием яркости около 5% и плющ с наклоном на один-два градуса. Разница между первым и последним кадром — 2,79 при цели меньше трёх, петля не заметна.
Этот же ролик в качестве 1080p — на YouTube: youtu.be/IeH5g6hIJYo
Одно ограничение выяснилось сразу, и его стоит запомнить: необратимое действие в петлю не укладывается. Бариста, наливающий кофе, не зацикливается — чашка не может одновременно наполняться и быть такой же, как в начале. Человека из кадра убрали, чашку поставили уже готовой, с паром.
Слайд-шоу работает вживую: prtv.pro/0012233 — это тот же короткий адрес, который вводят на телевизоре.
Игра
Мусанг ловит падающие кофейные зёрна. Четыре дорожки, три жизни в виде чашек. Обычное зерно — очко, золотая ягода — десять, испорченное — минус пять и минус жизнь. Каждые полминуты скорость растёт. Набрал 150 очков за три минуты — получаешь скидку 20% и промокод, который живёт пятнадцать минут.
Всё в одном HTML-файле, без установки, открывается в браузере телефона по QR. Дизайн игры повторяет меню: тот же грифельный фон, та же гирлянда, та же витрина с выпечкой внизу. Игра должна выглядеть продолжением экрана, а не посторонним баннером.
Игра открыта: propel.ru/prtv/mg.html — работает прямо в браузере телефона, ставить ничего не нужно.
QR-код со ссылкой на игру, размещается на втором слайде меню борда, вместе с рекламным предложением.
Кейс 2. Путь кофе — сюжет вместо декора
Второе меню хотел сделать поинтереснее, поэтому решил показать путь кофе от места, где он растёт, до кружки клиента. Страну взял Эфиопию.
Меню выглядит как разворот старинной книги. Внизу через весь кадр идёт маршрут зерна: плантация со сборщицами, грузовик, порт, корабль, фургон, кофейня. Позиции меню и цены — на страницах разворота.
Тематические информеры. Из Эфиопии же выросли и часы в центре меню — с эфиопскими цифрами вместо привычных. Это тот случай, когда информер работает не как служебный элемент, а как часть истории. В виджете часов настраиваем цвета стрелок и убираем цифры по умолчанию. А дальше, кладём эти стрелки на картинку стилизованного циферблата.
Этот же ролик в качестве 1080p — на YouTube: youtu.be/-yXQqEksxrw
Слайд-шоу вживую: prtv.pro/0012238.
Игра-ходилка.
Путь зерна из Эфиопии в Москву за 90 дней. Бросок кубика двигает по карте, каждая остановка открывает факт о месте: Аддис-Абеба, Джибути, острова Гифтун в Красном море, Ростов, Воронеж. Механика простая до очевидности, а фактура даёт повод задержаться у экрана.
Можно вставлять свои рекламные факты или другим образом интегрировать маркетинговые инструкменты в игру.
Ходилка открыта: propel.ru/prtv/put_kofe.html.
Кейс 3. Москва. Оригами — живое меню, не только за счёт видеофона
Здесь я отталкивался от ответа нейросети про тенденции: она рекомендовала натуральные материалы и белый цвет 2026 года по версии института Pantone — Cloud Dancer, «облачный танцор». Так пришла идея сделать фоном пейзаж Москвы в виде оригами: Кремль, башни Сити, река, кораблики — всё сложено из бумаги.
Анимация элементов через HTML
В конструкторе есть тип элемента «HTML-блок». Внутрь него кладётся обычная разметка со стилями — и всё, что умеет CSS и SVG, работает прямо на слайде. Никакого видео, никакого рендеринга, нулевой вес.
Так на бумажной Москве двигаются отдельные детали в видеофоне: облака дрейфуют, кораблики покачиваются на реке, немного меняется цвет небосклона. А вот пролетающий самолёт и анимация других видов воздушного транспорта — задаётся через HTML. Таким образом, текст за самолётом можно редактировать. Также, анимирован рекламный блок в правом нижнем углу. ПО чёрному фону бежит телевизионная рябь и проходят блики по тексту.
Этот же ролик в качестве 1080p — на YouTube: youtu.be/mssTgYBWXww
Слайд-шоу вживую: prtv.pro/0012246
Два ограничения, которые стоит знать заранее. Скрипты из HTML-блока вырезаются — работает только CSS и SVG-анимация, включая теги <animate>. И тяжёлые пиксельные фильтры вроде турбулентности лучше применять на небольшой площади, а не на весь экран, иначе телевизор начнёт задыхаться.
Самолёт с рекламной строкой
Самый интересный приём кейса, который хотел попробовать сделать. На втором слайде через экран летит бумажный самолётик и тянет за собой транспарант с бегущей строкой — туда идёт акция или объявление.
Сам я скомбинировать бегущую строку с анимацией самолёта не смог, а ИИ сделал это через HTML. При этом, он ещё добавил к тексту эффект развивающегося флага.
А дальше, данный текст редактируется в HTML-коде. Получилась красивая и легко редактируемая анимация.
Свой шрифт
В этом кейсе появился фирменный шрифт. Идея простая: сделать пару букв тематическими. Правило, которое выяснилось сразу: декорировать можно только внутренний просвет буквы, надстрочный знак или свободный кончик штриха. Внешний силуэт трогать нельзя — на четырёх метрах глаз читает пятна, а не детали.
Первым кандидатом на кофейное зерно была «О» — самая круглая, очевидный выбор. Оказался неверным, и вот почему.
Пересчёт по 59 типовым позициям кофейного меню: «О» встречается в 53% названий, и в трети из них дублируется внутри слова. В «МОЛОКО» три зерна подряд — это уже ребус, а не дизайн. А «Ф» встречается в 14% позиций, не дублируется ни разу и есть в слове «КОФЕ», которое стоит на ста процентах кофейных меню. Метка появится обязательно и ровно один раз.
И совпало приятное: «Ф» уже по строению кофейное зерно — овал, рассечённый вертикалью, это ровно зерно с его прорезью. Вторая тематическая буква — «Й», у неё вместо галочки дымок от горячего напитка. Она есть в слове «ЧАЙ» и тоже не дублируется.
Тематическую букву выбирают не по геометрии, а по частотности: она должна встречаться достаточно часто, чтобы попасться на глаза, но не настолько часто, чтобы дублироваться внутри слова.
Цифры не декорировали сознательно. Причина не эстетическая, а денежная: гранёный ноль ещё читается как ноль, а ноль с зерном внутри на дистанции путается с буквой «О», и «200 ₽» превращается в загадку.
Шрифт можно забрать. В архиве файлы .ttf и .woff2, образец начертания и готовый блок @font-face для сайта: скачать PRTV Origami Coffee (ZIP, 100 КБ). Использовать можно свободно, в том числе в коммерческих меню, вывесках и на упаковке — разрешения спрашивать не нужно, указывать авторство не обязательно.
Честно предупреждаю: это бета, и в ней две известные недоделки. Строчная «ё» показывает форму «Б» — заглавная «Ё» набирается верно, а шрифт капительный, так что на практике это встречается редко. И латинская «S» стоит примерно на десятую часть высоты выше базовой линии, в английском слове это заметно. В кириллице проблема не проявляется.
Что нужно знать про зацикливание
Собрал в одном месте всё, что сэкономит вам вечер.
Зацикливается хорошо: дым, пар, вода и рябь, облака, листва на ветру, мерцание света, жест на месте. Всё, что по природе циклично.
Не зацикливается: любое движение из точки А в точку Б. Кран с грузом, едущий транспорт, идущий человек, наливающийся кофе. Такие объекты зациклить сложно.
Палиндром — ловушка. Проиграть ролик вперёд и назад даёт идеальный стык, но ломает причинность: кран забирает груз обратно с корабля, дым уходит внутрь трубы. Годится только для симметричных эффектов вроде мерцания.
Рабочий приём — один ролик, где первый и последний кадр одинаковые. В seedance-2.0 есть поле для последнего кадра: кладёте туда тот же файл, что и в первое, и модель строит движение, которое возвращается в исходное состояние. Если сюжет длиннее одного цикла, ролики выстраиваются в цепочку: последний кадр предыдущего становится первым кадром следующего.
Формулировки, которые ломают результат:
- «Из стороны в сторону» для протяжённого объекта модель понимает как горизонтальное перемещение. Корабль у меня поехал вбок и врезался в берег. Правильно — «покачивание носа и кормы».
- «То ярче, то тусклее» понимается как «меняй яркость всего кадра». Правильно — «свечение остаётся локальным у каждой лампы и не подсвечивает кадр целиком». Свет описывают как состояние, а не как действие.
- «Дым никогда не поднимается высоко» убивает дым совсем. Движение дозируют, а не запрещают: «поднимается на небольшую высоту и тает».
Три практических ограничения. Больше трёх-четырёх движущихся элементов в кадре не ставьте. Скорость и амплитуду указывайте явно — «очень медленно», «около 5%», «на один-два градуса». Список того, что обязано остаться неподвижным, пишите длиннее списка того, что двигается.
Проверка. Сравните первый и последний кадр попиксельно: средняя разница меньше трёх — петля не видна, больше восьми — виден рывок. Заодно сравните первый кадр с серединой: дрейфующие облака дают отличный стык и провал в середине. Это делает браузерный агент, но лучше самому.
Очень часто анимируется весь кадр, могут появляться рывки или искажения объектов. Как правило, это один глюк на всё видео. Наверно, можно вырезать кадр в простеньком видеоредакторе или добивать промпт, чтобы не дёргался. Но одна генерация может не помочь.
Как правильно заказывать картинки
Отдельный совет, который сэкономит больше всего времени.
Когда вам нужен отдельный объект — фигурка, иконка, изображение блюда для карточки, — заказывайте его сразу в формате PNG с прозрачным фоном. У современных генераторов для этого есть отдельный параметр. Если попросить «объект на белом фоне» или получить картинку, где прозрачность нарисована шахматкой, вы потратите вечер на вырезание, а края всё равно останутся неопрятными.
Пример запроса на изолированный объект:
A single paper origami hot-air balloon, white folded paper with visible crease
lines and soft grey facet shadows, centered in frame, isolated object.
Transparent background, no backdrop, no checkerboard pattern, no shadow cast on
any surface, clean edges suitable for compositing.
Style: minimalist paper-craft, matte finish, soft diffused light from upper left.
NO TEXT, NO LOGOS, NO WATERMARK, NO BACKGROUND ELEMENTS.Параметры: формат PNG, фон — прозрачный, соотношение сторон 1:1, качество — максимальное. На среднем качестве фактура бумаги превращается в мыло.
Для фона правила обратные: соотношение 16:9, формат WebP, и обязательно описанная чистая зона под текст.
И ещё: рамки, разделители и подложки под карточки часто дешевле не генерировать, а собрать нативными фигурами прямо в конструкторе. Они изначально с прозрачностью, любого размера, и цвет у них меняется в один клик. Это тоже делает браузерный агент через HTML-код. Но много вензелей у него не получится.
Другие эксперименты
Приложение для ТВ.
Для использования сервиса как информационного канала в гостиничных номерах собралось приложение для телевизора со вшитым номером слайд-шоу отеля, его логотипом и названием — меньше тридцати килобайт, смена клиента сводится к правке одного файла с настройками.
То есть, можно создать приложение в фирменном стиле открывающим своё определённое слайд-шоу. Это делал в Claude.
Музыка.
Были и опыты со звуком. В конструкторе, при настройке звукового оформления слайд-шоу, можно выбрать радио «Кофейня» — там много треков под атмосферу кафе, с сортировкой по дням недели и времени суток. Такое оформление играет в меню Оригами.
Сколько это стоило
Только прямые расходы на генерацию.
| Что | Цена |
|---|---|
| Изображение, продакшн-качество | ~$0,03 |
| Изображение, черновая проверка композиции | ~$0,001 |
| Видео, 720p | ~$0,10 за секунду |
| Видео, 1080p | ~$0,45 за секунду |
Десятисекундный видеофон в 1080p — 4,5 доллара за прогон. Это самая дорогая позиция в смете.
Порядок, который снижает расход втрое: сначала черновая генерация композиции в дешёвой модели, и только после утверждения макета — финал в дорогой. Сначала вся статика, и лишь после приёмки — оживление. Фон никогда не генерируется видео с нуля, только из уже одобренной картинки. А там, где хватает CSS-анимации в HTML-блоке, видео не нужно вовсе — это ноль рублей.
Полный шаблон обошёлся в 11 долларов 72 цента, включая все неудачные прогоны и всю возню с зацикливанием. Из ста долларов на счёте осталось 88. Следующий шаблон по готовой схеме — 5–8 долларов. На одно меню в среднем уходит 20–30 генераций изображений и около десяти роликов.
Два предупреждения. Сервис генерации хранит результаты сутки — скачивайте сразу. И отключите автопополнение баланса: лимита трат в интерфейсе нет, единственный стоп-кран — предоплаченная сумма.
Подписка на ассистента Claude, через которого идёт работа с текстом, кодом и конструктором, — 100 долларов в месяц.
Частые вопросы
Нужен ли дизайнер?
Нет. Нужно понимание, что нейросеть делает плохо, и терпение на пять-шесть итераций промпта.
Сколько времени занимает одно меню?
Вечер на фон, ещё вечер на сборку и правки. Первое — дольше, пока не набьёте руку на зацикливании.
Какой телевизор нужен?
Любой со Smart TV. Слайд-шоу открывается по короткому адресу. Есть и приложения для Android TV, Tizen и WebOS.
Видеофон не посадит телевизор?
Десять секунд в петле — небольшой файл, который проигрывается из кэша. А если оживлять элементы через HTML, нагрузки нет вообще.
Можно ли обойтись без анимации?
Можно. Но именно движение отличает меню-борд от плаката, и на него первым делом реагируют посетители. Начните с HTML-анимации — она бесплатная.
Что делать, если цены меняются каждую неделю?
Ничего особенного. Текст и цены — отдельный слой, правятся в конструкторе за минуту. Фон и оформление остаются прежними.
Зачем меню-борду игра?
Она занимает клиента, пока готовится напиток, и даёт повод дать скидку и донести какое-либо рекламное объявление. Открывается по QR, ставить на телефон ничего не нужно.
Попробуйте сами
Не будучи ни дизайнером, ни программистом, можно собрать вполне рабочие цифровые меню, витрины и информационные каналы. Схема одна и от конкретного генератора не зависит: макет, разбор на слои, оживление, сборка.
Все три меню и обе игры
- Меловая доска — prtv.pro/0012233
- Путь кофе — prtv.pro/0012238
- Москва. Оригами — prtv.pro/0012246
- Игра «Мусанг ловит зёрна» — propel.ru/prtv/mg.html
- Игра-ходилка «Путь кофе» — propel.ru/prtv/put_kofe.html
Конструктор: prtv.pro