Первый экран, который следит за курсором: щенок, буквы и одна кнопка

Открыть живую страницу — подвигай курсором →

Собрал страницу зоомагазина, где щенок следит за курсором: мышка левее — он смотрит левее, нажал кнопку — смотрит прямо в камеру. И ролик, и сам сайт сделаны в Claude Code, руками я не монтировал вообще.

Но честно: нейросети тут не главное. Решает человек — визуал и насмотренность. Вдохновение я ищу в Pinterest и похожих местах, а дизайн-скилы из пака делают половину работы.

Почему именно первый экран

Это хук и удержание. Заказчик открыл десять магазинов с товарами для животных — все с кормами, все с доставкой, все с кнопкой «Каталог». Почему он останется в твоём? На этот вопрос отвечает первая страница, за две секунды, до того как человек прочитал хоть слово.

Как это сделано на самом деле

Щенок «следит за курсором» не магией. Это цепочка из четырёх инструментов, у каждого одна работа:

• нейросеть для картинок (Nano Banana) — рисует персонажа один раз, на однотонном фоне: это референс
• видео-нейросеть (Google Flow) — по референсу делает ролик: щенок плавно поворачивает голову слева направо
• FFmpeg из пака — режет ролик на 55 лёгких кадров
• Claude Code — собирает страницу: положение мышки по горизонтали выбирает кадр и плавно к нему подходит; плюс подпрыгивающие буквы, круглая кнопка и курсор-кольцо

На телефоне то же самое работает от касания. А если у человека в настройках отключены анимации — щенок стоит неподвижно, страница не ломается.

Что сказать помощнику

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

Что стоит знать

Фон у персонажа должен быть однотонным — иначе на широких экранах виден стык. Кадры — в webp, чтобы 55 картинок весили меньше мегабайта. И одна кнопка, а не пять: первый экран — не каталог.

Живая страница лежит на сайте — кнопка «Посмотреть вживую» ниже. Подвигай курсором.

Если не разобрался

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

Впервые вышло в канале @alex_aicontent.