Откуда идея

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

Тогда я поняла, что этот спор вечный. Чай и кофе давно делят людей на два лагеря, и у каждого есть ответ на вопрос «А что выберешь ты?».

Посмотреть проект можно здесь: Тык

Задача

Это личный проект, я хотела попрактиковаться в вайбкодинге и генерации изображений и проверить, можно ли с ИИ собрать живой интерактивный сайт.

Концепция

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

1. Знакомство: библиотека, где начинается история.

2. Истоки: легенда о пастухе Калди и чайные плантации Китая.

3. Торговые пути: корабли, караваны и порт Моха.

4. Кофейня: место, где люди встречались, читали газеты и спорили.

5. Чайные ритуалы: как один и тот же лист стал частью разных культур.

6. Дома: чай и кофе становятся привычными предметами кухни.

Визуальный стиль

Я давно играю в Stardew Valley и Dave the Diver, и мне очень нравится атмосфера, которую создают пиксели и теплые цвета этих игр. Тема чая и кофе тоже уютная и всеми любимая, поэтому пиксель-арт подошел ей естественно. Интерфейс я тоже сделала пиксельным: серые плашки, стрелки и крестик в стиле игровых меню.

Процесс

В проекте я выступала арт-директором: ставила задачи ИИ, отбирала результаты, собирала сцены и правила детали.

• Генерация: сены, персонажей и предметы я генерировала в ChatGPT.

• Ручная доработка: пиксели, которые ИИ рисовал неточно, я дорисовывала вручную.

• Анимация: персонажей я собирала в покадровые гифки: эфиопец с танцующими барашками, сборщики чая, посетители кофейни, девушка с книгой.

• Вайбкодинг: сайт, переходы между сценами и все интерактивы собраны вместе с ИИ.

Самое сложное: когда просишь ИИ нарисовать то же самое, но с другим движением или чуть сдвинутым объектом, он все равно меняет всю картинку. Пусть немного, но в анимации это сразу видно: персонаж прыгает в размере, меняются пропорции и детали. Поэтому кадры приходилось выравнивать вручную, подгонять масштаб по неизменным деталям и не раз перегенерировать.

Интерактив

Мне хотелось, чтобы в каждой сцене было на что нажать:

• Истоки: если тряхнуть кофейное дерево, с него падают ягоды, а с сакуры сыплются лепестки. Чаши с чайным листом покачиваются.

• Кофейня: фонари раскачиваются, из мешков по одному высыпаются зерна, цветы колышутся от касания.

• Чайные ритуалы и Дома: кубики сахара, лед и печенье падают на стол, растения шевелятся, чайник кипит.

Финал: выбери сторону

В Stardew Valley все построено на бафах от блюд и зелий. Действие чая и кофе знакомо каждому, поэтому финал я сделала в той же игровой логике. На последнем экране сайт спрашивает «А что выберешь ты?» и выдает «характеристики» напитка:

Кофе: +3 к бодрости, +2 к концентрации
Побочный эффект: если выпить после 16:00, −3 к качеству сна

Чай: +2 к бодрости, +2 к спокойствию
Побочный эффект: чашка позже 18:00 всё ещё может дать −1 к качеству сна

К выбору подключен опрос, и сайт собирает статистику, кто за чай, а кто за кофе.

Результат

• 6 сцен-островков с историей двух напитков

• 15 анимированных персонажей

• около 30 интерактивных объектов

• 17 исторических заметок

• финальный выбор с опросом

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

Знакомый, который первым посмотрел сайт перед запуском

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