Маскот, который следит за курсором

Что показано

Дизайнер строит лендинг вымышленной кодинг-школы для подростков CodeCat: сердитый рыжий кот-маскот на синем фоне, хедер, заголовок «Stop just playing. Build your own worlds». Персонажа собирает по референсам из Pinterest в Nano Banana, вокруг него верстает интерфейс в Figma, а в финале открывает проект в Claude - там уже готовое видео кота (cat.mp4) вписывается в карточку сайта и настраивается так, чтобы кот двигал головой и взглядом вслед за курсором. Сам финальный prompt для Claude в ролике не звучит, только анонс телеграм-канала.

Почему это работает

Фокус ролика не на рисовании кота, а на том, как три разных инструмента складываются в один пайплайн: генератор изображений даёт статичного персонажа, Figma собирает вокруг него композицию сайта, а агентный кодер (в кадре явно видно интерфейс Claude - модели Sonnet 5 и Opus 5, проект назван «Котик») пишет код, который вписывает готовое видео персонажа в вёрстку и синхронизирует его с курсором. «Кот следит за курсором» почти наверняка сделан не тяжёлой 3D-анимацией в реальном времени, а дешёвым приёмом: короткий видео-луп, где голова и взгляд персонажа проходят диапазон положений, а JS просто сопоставляет координаты мыши с нужным моментом видео или CSS-трансформацией слоя. То есть старый трюк ещё из флеш-эпохи, только теперь движение рисует нейросеть, а код интерактива Claude пишет по диалогу, а не разработчик руками.

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

Как повторить

1. Соберите референсы персонажа в Pinterest - в кадре виден поиск по фразе mad cat cartoon с фильтрами Cute, Drawing, Black, Pfp.
2. Сгенерируйте персонажа в Nano Banana (это модель Gemini от Google; в ролике она открыта через сторонний AI-агрегатор с вкладками Агенты / Текст / Изображения / Видео / Аудио / Редактор, имя самого сервиса в кадре не читается). Загрузите 1-2 референса и подробный prompt:

A 3D character design of an adorable yet grumpy ginger Garfield-like Persian exotic shorthair cat standing, facing forward. The cat has puffy fluffy orange fur, big intense blue eyes, and an annoyed, grumpy facial expression, slightly sticking out its tiny pink tongue. It is wearing a cozy, premium-textured blue fleece hoodie with a front pocket and drawstrings. Plain solid blue studio background. High-end 3D rendering, Pixar and Disney character style, rich realistic fur texture, soft volumetric lighting, studio lighting, highly detailed, 8k resolution.

3. Соберите UI сайта в Figma вокруг персонажа: хедер, крупный заголовок, кнопки, карточки курсов - в кадре готовый макет 1920×1080 с шапкой codecat.com.
4. Экспортируйте фрейм с персонажем на фоне отдельно - здесь важна точность кропа, в диалоге с Claude автор потом отдельно поправляет масштаб, чтобы видео совпало с этим кадром один в один.
5. На этом шаге персонаж превращается в короткое видео с движением головы и взгляда (cat.mp4). Экран с интерфейсом в ролике не показан, только звук: whisper расслышал «иду в клинку, анимирую его» - похоже на Kling AI (klingai.com), сервис image-to-video, который как раз умеет оживлять голову и взгляд персонажа по референсу. Стопроцентной уверенности нет - в кадре этого шага нет вовсе, - но по звучанию и по результату это лучшая рабочая гипотеза: загрузите туда экспортированный кадр кота и текстом опишите нужное движение головой и глазами, как в промпте для Nano Banana.
6. Откройте Claude (в кадре - дэшборд с проектами, моделями Sonnet 5 / Opus 5 и статистикой сессии, похоже на Claude Code) и заведите отдельный проект под персонажа - в примере он назван «Котик».
7. Загрузите видео и референсный кадр, опишите эффект текстом («сделай, чтобы кот следил за курсором взглядом и головой») и правьте по диалогу - в кадре видна правка кропа: нужен плотный кадр почти без фона, а не голова с плечами и небом.
8. Проверяйте прямо в браузере (в кадре виден таб предпросмотра codecat-site) и просите Claude поправить style.css, пока крупность и положение видео не совпадут с референсом.

Проверочный прогон

Откройте собранную страницу и подвигайте мышью по области с персонажем. Правильно - голова и взгляд плавно смещаются следом за курсором без рывков и без выхода за рамки кадра из референса Figma. Персонаж дёргается, залипает на одном кадре видео или обрезан не как в макете - разбирайтесь в JS-обработчике позиции мыши и в CSS-кропе видео, ровно это в примере правили через диалог с Claude.

Где это пригодится

Если у вас лендинг или продуктовая страница, где первый экран держит статичная иллюстрация или мокап - интерактивный маскот вместо неё удерживает внимание на несколько секунд дольше, а это ровно та зона, где решается, останется человек или закроет вкладку. Пригодится и для демо-страниц продукта, где нужен живой персонаж без найма аниматора. У меня, кстати, в очереди тот же вопрос для SOND и evdokimov.ai, но сам пайплайн ещё не гонял.

Ссылки и ресурсы

• Pinterest, поиск референсов персонажа: https://pinterest.com. Работает, бесплатно.
• Nano Banana (Gemini 2.5 Flash Image) - в ролике открыта через неопознанный сторонний агрегатор, но официально доступна напрямую через https://aistudio.google.com (Google AI Studio) или приложение Gemini (https://gemini.google.com). Работает, бесплатный лимит на Google AI Studio есть, платно по API - около 0,039 $ за изображение.
• Figma, вёрстка макета сайта: https://figma.com. Работает, бесплатный тариф на 3 файла, дальше Professional от 12 $/мес за редактора (годовая оплата) или 16 $/мес помесячно.
• Kling AI, вероятный кандидат на роль «клинки» из звуковой дорожки - сервис image-to-video с управляемым движением головы и взгляда персонажа: https://klingai.com. Работает (проверено, отвечает), есть бесплатный базовый тариф, платные - от 8,80 $/мес после промо-цены первого месяца. Не подтверждено кадром - это гипотеза по звучанию слова и совпадению функции, а не факт с экрана.
• Claude Code: https://claude.com/product/claude-code. Работает, нужна подписка Claude - Pro от 20 $/мес, но по объёму сессии из примера (504 сообщения, 218k токенов за день) больше подходит Max-тариф (100-200 $/мес).
• Телеграм-канал автора, там боевой prompt для Claude: https://t.me/kutuzova_webdesign. Работает, канал живой, доступ к материалам бесплатный.

Оговорки

Ключевой шаг - как статичная картинка кота стала видео с движением головы и взгляда - в ролике не показан, экрана с интерфейсом в кадре нет вообще. Whisper расслышал «иду в клинку, анимирую его» - по звучанию и по тому, что умеет сервис (image-to-video с управляемым движением головы и взгляда, бесплатный лимит есть, платные тарифы от 8,80 $/мес), это похоже на Kling AI (klingai.com). Это рабочая гипотеза редактора, а не факт с кадра: сам интерфейс в ролике ни разу не мелькает, так что стопроцентно повторить этот шаг тем же инструментом нельзя - если Kling AI не даст нужного результата, ищите любой image-to-video сервис с управлением направлением взгляда. Боевой prompt для Claude, которым автор настраивала интерактив, в ролике не звучит - она отправляет за ним в свой телеграм-канал @kutuzova_webdesign, одним этим разбором пайплайн не закрыть. AI-агрегатор с вкладкой Nano Banana в кадре не подписан, какой это сервис - не установлено, повторить с точностью до интерфейса не выйдет, но саму модель, в общем, можно вызвать и через официальный Google AI Studio или приложение Gemini. Подпись в интерфейсе агрегатора «Нашумевшая нейросеть от Google: Gemini Flash 3.0 Banana» не совпадает ни с одним официальным названием - у Google есть Gemini 2.5 Flash Image (Nano Banana) и Gemini 3 Pro Image (Nano Banana Pro), а «Flash 3.0 Banana» похоже на путаницу самого агрегатора, не на факт от Google. Сессия в Claude на скрине - 504 сообщения и 218k токенов за один день на одну эту фичу, реальная цена по времени и токенам заметно выше полутора минут ролика.