Кошачьи глаза, которые следят за курсором: сделано одним промптом

Как далеко может зайти один промпт, если цель — интерактивная веб-страница? Подопытной стала игривая кошка по имени Кэтти, чьи глаза следят за курсором посетителя. Её собрали одним сообщением в GPT-6 Astra.

Указания, а не просьбы

Многие творческие люди пишут AI «сделай мне милый сайт с котиком», получают в ответ что-то бежевое и безжизненное и решают, что инструмент ещё сырой. Тот же инструмент, та же модель — и совершенно другой результат, когда за дело берётся кто-то другой. Разница никогда не была в AI. Один написал пожелание, другой передал план.

Пожелание называет результат, на который вы надеетесь. План описывает поведение и фиксирует каждое решение, на которое у вас уже есть ответ. Всё остальное в этой статье — эта разница на конкретном примере.

Бриф, который был отправлен

Это был не абзац, а структурированный творческий и технический бриф, он приведён ниже полностью. Чтобы использовать его повторно, подставьте своё изображение, тексты и координаты, а потом вставьте весь бриф в модель одним сообщением.

Build a polished one-page interactive portfolio demo called “Catty”
using the attached cat image as the primary visual reference and hero asset.

The audience is designers and front-end developers browsing a portfolio. The experience should feel like a small, charming interactive art experiment: soft, editorial, playful, and responsive. Preserve the image's fluffy white cat, dusty pink background, dreamy lighting, and gentle pastel mood. Use the image as a real responsive box with a fixed aspect ratio, not as a CSS background, so interactive overlays remain aligned when the page scales.
HERO
- Make the cat image fill the first viewport with cover-like behavior while remaining a real aspect-ratio image box.
- Place the headline "It sees you." on the emptiest side of the image.
- Add a primary button labeled "Try the stare →" linking to #demo.
- Add a small brand label "catty" and minimal navigation to the section below.
- Keep the copy readable on desktop and mobile. Do not cover the cat's face.

EYE-TRACKING EFFECT
- For each eye, create an invisible circular socket positioned in percentages of the original image dimensions so it scales correctly.
- Inside each socket, use the matching crop from the same image, enlarged 1.4× and clipped to the circle.
- On mousemove, calculate the angle from each eye center to the pointer and translate the enlarged eye toward it.
- Cap the translation at 14% of the socket width.
- Use a 120ms ease-out transition.
- On touchmove and touchstart, use the touch position in the same way.
- After 2.5 seconds without movement, ease both eyes back to center.
- Add a random blink every 3–6 seconds. Use a fur/skin-colored lid scaling over each socket.
- Respect prefers-reduced-motion.

CUSTOM CURSOR
- Replace the native desktop cursor with a small, cute grey mouse character.
- The mouse should wiggle or scurry while moving, sniff gently when idle, and hop when clicked.
PAGE CONTENT
- Add a "What's inside" section with three items:
  1. Cursor-locked gaze
  2. Soft blinks on idle
  3. Touch-friendly tracking
- Add the line "Free demo · open source vibe".
- Add a simple footer.
RESPONSIVE AND ACCESSIBLE BEHAVIOR
- Make the page work on desktop, tablet, and mobile without horizontal scrolling.
- Preserve the image aspect ratio and keep all interactive hotspots aligned as the image scales.
- Ensure buttons and hotspots have visible keyboard focus states.
- Use aria-labels and aria-live status text where appropriate.
- Add reduced-motion behavior that removes or minimizes moving effects.
DELIVERY
- Build the complete working page, not a mockup.
- Keep the implementation self-contained with HTML, CSS, and vanilla JavaScript.
- Use the attached image as the local asset.
- Check the interactions, touch behavior, and mobile layout.
- Report the eye coordinates used, what was implemented, and any limitations.

Обратите внимание, чего в брифе нет. Модель ни разу не просят угадать, где у кошки глаза. Её просят измерить их и сообщить цифры. Замена догадки числом — вот что отличает живое демо от JavaScript-эффекта, прилепленного к фотографии.

Дальше глаза размещаются как оверлеи в процентах, а не в фиксированных пикселях, поэтому на любом размере экрана они остаются на морде. Это увеличенные фрагменты настоящих глаз, обрезанные внутри круглых глазниц и смещающиеся туда, где находится указатель.

Слой первый: взгляд

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

1. Глаза никогда не выходят из глазниц.
2. Движение плавно ускоряется и замедляется, без рывков.
3. Через 2,5 секунды без движения глаза медленно возвращаются в центр.

Третье правило важнее, чем кажется. Без него кошка застывает на полувзгляде, как только вы останавливаетесь, и уставляется в пустоту — получается фото кошки, а не кошка. Возврат в центр даёт ей спокойное внимание. Сверху добавляются случайные моргания, и иллюзия держится.

Слой второй: курсор становится мышкой

Когда взгляд заработал, стандартный курсор заменили маленькой серой мышкой. Она следует за вами, семенит, пока вы двигаетесь, принюхивается, когда останавливаетесь, подпрыгивает при клике и немного увеличивается над всем кликабельным. Крошечная деталь, но она меняет историю. Курсор перестаёт быть элементом управления и становится персонажем, а значит, кошка смотрит уже не на вас. Она смотрит на мышку.

Слой третий: погоня

Дальше — маленькая игра. Беспокойная мышка каждые пару секунд прыгает на новое место внутри рамки демо, у вас восемь секунд, и вся цель — поймать её, пока время не вышло. Взгляд кошки всё это время следует за ней, так что игра — не прикрученная сбоку фича, а та же исходная интеракция, только со ставками.

Этот приём стоит позаимствовать. Курсор привёл к мышке, мышка — к игре, а игра дала повод открыть страницу второй раз. Ничего не добавляли просто потому, что это круто выглядит: каждая часть выросла из предыдущей. Инструкции для игры выглядели так:

CATCH-THE-MOUSE MINI-GAME
- Add a section below the stare demo called “Catch the mouse.”
- Include a “Start the chase →” button and an eight-second countdown.
- When the game starts, show a grey mouse inside the demo frame.
- Make it move to a new random position every 850–1500ms, staying within safe bounds.
- Catty’s gaze should follow the mouse during the game.
- Let visitors catch the mouse by clicking, tapping, or pressing Enter while it has focus.
- When caught, show a playful success message such as “Got you!” and allow replay.
- If eight seconds pass, show that the mouse escaped and offer replay.
- Include an accessible live status message and an Escape/Stop control.
- Pause or stop the game when the page becomes hidden.

Слой четвёртый: поглаживание

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

Каждая интеракция вызывает свою эмоцию: взгляд пробуждает любопытство, погоня — азарт, а поглаживание — что-то близкое к нежности. Большинству лендингов не удаётся вызвать даже одну.

PET THE CAT
- Add an invisible, keyboard-focusable forehead hotspot over the cat’s forehead.
- When a visitor rubs across the hotspot with a mouse or finger, make Catty close its eyes, show a few floating sparkles, and display “prrr… ♡”.
- Keep the reaction gentle and short, then return to the normal state.
- Support click/tap and keyboard activation as well as rubbing.
- Do not trigger petting while the mini-game is active.

Что модель не могла решить

Модель собрала всю систему, но не могла принять решения, которые сделали эту систему хорошей. Кому-то всё равно нужно было выбрать положение заголовка, решить, на что кошка реагирует, и оценить, когда движение кажется живым, а когда превращается в глюк, что делает мышка, пока вы бездействуете, почему восемь секунд, а не пятнадцать, и какие интеракции уместны вместе, а какие стоит выкинуть как шум.

AI создаёт систему, а вкус решает, будет ли она ощущаться продуманной. Настоящий навык теперь — режиссировать, а не набирать промпты, и начинается он с умения заметить «слишком много» ещё до того, как оно появилось. Вкус по-прежнему нужен. Чего больше не нужно — так это трёх дней и разработчика, чтобы узнать, были ли вы правы.

Восемь блоков, которые можно скопировать

Если хотите собрать что-то подобное, не пишите одно предложение. Напишите восемь блоков:

• Визуальный референс: исходное изображение, а также палитра, композиция, объект и настроение.
• Первый экран: что показывает стартовый экран и с какой стороны стоит текст.
• Основная интеракция: что делает посетитель и как объект отвечает, описанное точно.
• Правила движения: числа для скорости, плавности, пределов смещения, состояний покоя и таймингов.
• Второстепенные интеракции: только те, что естественно вытекают из главной идеи.
• Адаптивность: поведение на тач-экранах и маленьких экранах, продуманное с самого начала, а не прилепленное потом.
• Структура контента: разделы, заголовки, кнопки и сами тексты.
• Технические ограничения: работа с ассетами, доступность, уменьшенная анимация и способ выкладки страницы.

Когда заполнены все восемь, модели больше не нужно угадывать ваш вкус. Она просто его воплощает. Пропустите один — и именно там результат вас подведёт.

Большой сдвиг

Ценность никогда не была в коде. Она была в отрезке между «у меня есть идея игривой интеракции с персонажем» и работающей штукой, по которой можно кликать. Раньше этот отрезок занимал дни. Теперь — полдня, поэтому эксперименты перестают быть дорогими, и можно почувствовать идею до того, как на неё подписаться. Промпт с одной попытки — не способ навсегда избежать итераций. Он даёт первую версию, достаточно хорошую, чтобы итерации наконец стоили усилий.

Почему хватило одного запроса

Промпт с одной попытки не значит, что модель волшебным образом всё понимает. Он работает, когда в промпте достаточно структуры, чтобы модель сделала хороший выбор. Больше всего дали пять частей брифа:

1. Чёткий визуальный якорь. Изображение кошки задало палитру, композицию, настроение и характер, и у страницы появилась сильная отправная точка.
2. Явные правила интеракции. Вместо «сделай, чтобы глаза следили за курсором» — заданные положения глаз, размеры глазниц, пределы движения, длительность сглаживания, время возврата в покой и частота морганий. Чем конкретнее поведение, тем меньше модели приходится додумывать.
3. Иерархия интеракций. Страница строилась слоями: статичная композиция, слежение глазами, характер курсора, мини-игра, затем поглаживание. Это сохранило цельность, потому что каждое дополнение вырастало из предыдущего.
4. Определённая аудитория. Страница рассчитана на дизайнеров и фронтенд-разработчиков, листающих портфолио, поэтому она должна была запоминаться и при этом быстро считываться. Посетитель должен понимать, что делать, без документации.
5. Требования к адаптивности. Поведение на тач-устройствах было в промпте с самого начала, и страница не превратилась в эксперимент только для десктопа, который ломается на телефоне.

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

• Чат-боты и ассистенты: маскот, который следит за указателем, оживляется, когда посетитель приближается к кнопке чата, и поглядывает на каждый новый ответ.
• Бренды товаров для животных, игрушек и детских товаров: персонажи, реагирующие на продукты, лакомства или игривый курсор. Это очевидный дом для Кэтти.
• Портфолио и студии: нарисованное лицо, следящее за посетителем, за секунды доказывает умение делать интерактив.
• Игры: персонаж смотрит на курсор, который стал тем, что надо догнать, обойти или собрать.
• Запуски продуктов: робот, существо или фото продукта, которые смотрят на заголовок, а потом провожают посетителя к главному призыву к действию.
• Онбординг и обучение: проводник, чей взгляд падает на следующее поле или элемент управления и показывает, что делать, без инструкции.
• Музеи и сторителлинг: портреты, которые будто замечают, кто на них смотрит, и страница выставки кажется обитаемой.
• Мода, бьюти и очки: модель, чей взгляд следует за указателем или скользит к выделенным товарам, если всё очень ненавязчиво.
• Кампании о приватности и безопасности: наблюдатель может передать идею мониторинга и бдительности, если это выглядит продуманно, а не жутко.
• Микросайты мероприятий: запоминающийся интерактивный первый экран, который побуждает исследовать и делиться, когда новизна — часть посыла.

Самая полезная с коммерческой точки зрения версия — не просто глаза, которые следят за вами. Это глаза, которые вас ведут. Представьте: Кэтти сначала смотрит на заголовок, мгновение следит за посетителем, а когда курсор приближается, переводит взгляд на кнопку «Try the demo» («Попробовать демо»). Так эффект привязывается к пути, по которому вы хотите провести людей. Удачная последовательность состоит из четырёх шагов:

1. Внимание: Кэтти моргает или замечает, что кто-то пришёл.
2. Направление: её глаза скользят к заголовку или главной кнопке.
3. Отклик: наведение или клик вызывают заметную реакцию.
4. Награда: маленькая анимация замыкает цикл, когда действие выполнено.

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

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

Каркас промпта для повторного использования

Как переиспользовать структуру

Возьмите те же восемь блоков и заполните их для своего проекта, именно в таком порядке, прежде чем что-то отправлять. Расписывая их, вы вынуждены думать о странице как о едином связном опыте, а не о куче эффектов, и модель это улавливает. Если на какой-то блок у вас нет ответа, значит, эту часть вы ещё не спроектировали — решите её сначала.