Как за вечер собрать первый экран с живым персонажем: щенок поворачивает голову за мышкой, буквы подпрыгивают, кнопка зовёт в магазин. Без монтажа руками и без готовых шаблонов.
Первый экран — это хук и удержание. Всё остальное на сайте человек увидит, только если не ушёл с первого.
Представь: заказчик открыл десять магазинов с товарами для животных. Все с корма́ми, все с доставкой, все с кнопкой «Каталог». Почему он останется именно в твоём? На этот вопрос и отвечает первый экран — за две секунды, до того как человек прочитал хоть слово.
Живой персонаж на экране — это не одна нейросеть, а цепочка из четырёх, и у каждой одна работа.
| Кто | Что делает |
|---|---|
| Нейросеть для картинок (у меня Nano Banana в Gemini) | рисует персонажа один раз — это референс, «паспорт» щенка: как он выглядит, на каком фоне |
| Видео-нейросеть (Google Flow / Omni Flash) | по референсу делает короткий ролик: персонаж плавно поворачивает голову слева направо. Фон однотонный, камера неподвижна |
| FFmpeg (стоит в паке) | режет ролик на кадры — у меня получилось 55 картинок в лёгком формате webp |
| Claude Code | собирает страницу: положение курсора по горизонтали → номер кадра. Мышка левее — щенок смотрит левее. Плюс подпрыгивающие буквы и кнопка |
| Дизайн-скилы из пака | шрифт, сетка, цвет, чтобы вокруг щенка не было «как у всех» |
Ключевая мысль: щенок «следит за курсором» не магией. Это 55 кадров поворота головы, и страница просто показывает нужный кадр под положение мышки, плавно догоняя. Дёшево, быстро, работает на телефоне.
Просишь нейросеть для картинок нарисовать персонажа на однотонном фоне, анфас, по центру. Однотонный фон обязателен — потом страница дорисует его вокруг кадра, и шва не будет видно. Сохраняешь лучший вариант: это референс.
Загружаешь референс в видео-нейросеть с промптом вроде: «персонаж медленно поворачивает голову слева направо, камера неподвижна, фон без изменений, 10 секунд». Проверь: голова должна дойти от крайнего левого до крайнего правого положения, тело не дёргается.
Говоришь помощнику: «нарежь этот ролик на 55 кадров в webp, ширина 1600». FFmpeg сделает это за секунды. Webp — чтобы 55 картинок весили меньше мегабайта.
Промпт — в следующем разделе. Помощник собирает страницу на холсте (canvas): при движении мыши считает, какой кадр показать, и плавно к нему подходит. На телефоне то же самое работает от касания.
Заголовок, подзаголовок, три цифры (у меня «1000+ товаров · 24/7 доставка · 100% виляния») и одна кнопка. По клику на кнопку персонаж смотрит прямо в камеру — маленькая вещь, на которую все обращают внимание.
Открой на телефоне. Подвигай пальцем. Выключи анимации в настройках системы — страница должна показать персонажа неподвижно, а не сломаться.
Промпт, с которого собралась моя страница. Подставь своего персонажа и свой текст.
После первого результата почти всегда нужна одна правка: «убавь движение» или «щенок слишком быстро крутит головой». Одной фразы хватает.
Первый экран — самая заметная часть сайта, и именно на нём видно, есть у страницы характер или нет. Если застрял на любом шаге — референс не получается, ролик дёргается, страница не собирается — напиши мне в Telegram, оформим консультацию: покажу вживую на твоём проекте. Не хочешь разбираться сам — соберу под тебя.
Гайд бесплатный. Живая страница со щенком — на сайте, по ссылке из материала: подвигай курсором.