Котячі очі, що стежать за курсором: зроблено одним промптом

Як далеко може зайти один промпт, якщо мета — інтерактивна вебсторінка? Піддослідною стала грайлива кішка на ім'я Кетті, чиї очі стежать за курсором відвідувача. Її зібрали одним повідомленням у 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-асистента на чуйного провідника, спрямувати увагу на заклик до дії, надати присутності навчальному персонажу або дати ігровому чи розважальному бренду миттєво впізнавану інтеракцію. Сенс не в тому, щоб очі рухалися. Сенс у тому, щоб вирішити, що погляд повідомляє: увагу, напрямок, цікавість, застереження чи запрошення.

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

Як повторно використати структуру

Візьміть ті самі вісім блоків і заповніть їх для свого проєкту, саме в такому порядку, перш ніж щось надсилати. Розписуючи їх, ви змушені думати про сторінку як про єдиний зв'язний досвід, а не купу ефектів, і модель це вловлює. Якщо на якийсь блок у вас немає відповіді, отже, цю частину ви ще не спроєктували — вирішіть її спершу.