Вочы кота, якія стежыць за вашым курсорам, створаныя на адной інструкцыі.
Кот, які стежыць за курсорам, з гэмайнем у падобе пагоні і пестунам, створаны на адной структураванай інструкцыі. Паглядзіце восьмы блакіты інструкцый, чаму падходзіў адзін варыянт і дзе ён паслужыў.
Як далеко може зайти людина, коли метою є інтерактивна веб-сторінка? У цьому тестовому випадку мова йшла про грайливу кішку на ім’я Catty, чиї очі стежать за курсором відвідувача — все це було описано в одному повідомленні для GPT-6 Astra.
Інструкції, а не запити
Багато творчих людей вводять у штучний інтелект фразу „створи мені гарний веб-сайт про кішку“, отримують щось бежеве та безжиттєве у відповідь і роблять висновок, що інструмент ще не готовий. Той самий інструмент, та сама модель — але зовсім різні результати, коли ним користується хтось інший. Проблема ніколи не була в самому ШІ. Один з них просто сформулював бажання; інший — надав план.
Бажання — це назва бажаного результату. План — це опис поведінки та фіксація кожного рішення, на яке вже є відповідь. Решта — це конкретизація тієї різниці.
Надіслана інструкція
Это не быў абзац. Це была структураваная творчая та тэхнічная інструкцыя, якая паказана ў всій сваёй меры нижэй. Чырагаваць яе можна, заменіўшы на сваее зображэнне, координаты, а пасля вставіўшы всю інструкцыю ў модель як адна паведамленне.
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, прыкрепленага да фота.
Вочы тады з’яўляюцца як надпісы, заснованыя на процэнтah, а не як фіксаваныя пікселі, таму яны застаюцца на месцы на будзь-якай велічыне экрана. Це збольшаны фрагменты первісных вочэй, адрэзаваныя ў круглыя отворы і перасуваюцыяся туды, куды знаходзіцца курсор.
Першы шар: пагляд
Калі вы рухаецеся, каць вырахоўвае кут ад кожнай вочы да вашага курсора і павольна, плавна перасуваецца ў тым напрамку, а потым зупініцца. Тры правілы робяць гэта правдападобным:
- Вочы ніколі не пакідаюць своіх отвораў.
- Рух павольна пачынаецца і заканчваецца, і ніколі не ўскорваецца раптам.
- Пасля 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.
Што модэль не могла выявіць
Модэль створыла весь систему, але не могла здзейсніць тыя дзеяння, якія зробілі б ёй калітэтную. Хтось усё рава мусіў выбраць пазицыю заголовка, адначыць, на шта ёй рэагаваць, а таксама адначыць, калі рух здаецца жывым, а калі стае нестабільным, што робіць мышы, калі вы не актыўныя, чаму вось секунды, а не пятнаццаць, і якія взаімадзеянні належаць разам, а якія трэба выключыць як шум.
Штучны інтэлект стварае систему, а смак вяршыць, чы робіцца гэта намеравана. Справжняя майстэрнасць зараз — гледзець у напрамку, а не пісаць заповеды, што почынаецца з выяўлення «занадта многа» ўсё раней, чым гэта стане рэальнасцю. Смак заўсёды неабходны. Тое, чаго вам больш не трэба — це тры дні і разработчык, каб з’ясавіць, чы правы вы.
Вось восем блакоў для копіювання
Якщо вы хочаце стварыць ўсё схожае, не пішыце адзін рэчэнак. Пішыце вось восем блакоў:
- Візуальна референція: вихідне зображення, палітра кольорів, композиція, тема та настрій.
- Перший вигляд: що показує початковий екран та з якої сторони відбувається копіювання.
- Основна взаємодія: що робить відвідувач та як об’єкт реагує, з точним описом.
- Правила руху: цифри для швидкості, ефекту пом’якшення, обмежень руху, станів бездіяльності та часу.
- Вторинні взаємодії: лише ті, які природно випливають з основної ідеї.
- Реактивна поведінка: обробка дотику та маленьких екранів, визначена на початку та не змінювана пізніше.
- Структура контенту: розділи, заголовки, кнопки та сам текст.
- Технічні обмеження: робота з ресурсами, доступність, скорочений рух та спосіб доставки сторінки.
Калі всі вісім позицій заповнені, модель більше не мусить здогадуватися про ваш смак. Вона просто втілює його у життя. Якщо пропустити одну позицію, саме тут результат може вас розчарувати.
Більша зміна
Цінним було не сам код, а проміжок між „У мене є ідея для веселої взаємодії персонажів“ та готовим продуктом, який люди можуть скористатися. Раніше цей процес займав дні, тепер — лише півдня, тож експериментування стає недорогим, і можна перевірити ідею перед тим, як присвятити їй час. Одноразове запрошення — це не спосіб уникнути постійних ітерацій. Це дає достатньо хорошу першу версію, щоб ітерації нарешті виправдали зусилля.
Чому достатньо було одного запрошення
Одноразове запрошення не означає, що модель магічним чином розуміє все. Воно працює тоді, коли запрошення містить достатньо структури, щоб модель могла зробити правильний вибір. Найбільший ефект давали п’ять частин інструкції:
- Чыстая візуальная анкора. Адпрацоўка зображэння катка задала палітру, композыцыю, настроў і характер, што створыла моцную вачэйку для старонкі.
- Чыткія правілы взаімадзеяння. Указ «Нехай вочы следуюць за курсорам» прыводзіць да визначэння пазычных положэнняў вачэй, размера ўтвароў для іх розташавання, меры ўзроўнення руху, трываласці плавных пераходаў, часу адкалікання пад час спакою і частоты мерцання. Чым болей конкрэтныя правілы, тым менш модэлю трэба інтэрпретаваць.
- Іерархія взаімадзеяння. Старонка была створана па шарах: статычная композыцыя, слежэнне за вачамі, «характер» курсора, міні-гэма, а потым пестунне. Гэта спрабавало заставіць структуру цяплую, адколі кожны наступны элемент выраставаў з пярэднего.
- Визначаная аудытарыя. Старонка нацэлена на дзеячых дизайнероў і разрабоў фронт-энду, якія пераглядаюць портфолія, таму яна мусела быць запамятнаю і адночасна простай у розумэнні. Візітар мусіць знаты, што робіць, не чытаючы дакументацыю.
Дзе ўсё гэта можа быць прыменена
- Чатботы і асистэнты: маскот, які стежыць за курсорам, ажываецца, калі візітар набліжаецца да кнопкі чата, і раз на раз паглядае на кожны новы адказ.
- Брэнды для дзяўлётак, іграшакоў і дзецей: персонажы, якія адказваюць на продукты, ласоўкі або ігровы об’екты-курсары. Гэта яўнае месца для Catty.
- Портфалі і студыі: ілюстраванае абоўязковае адображэнне выразу нацэленае на візітара паказвае ўмеласці ў інтэракцыі за кальканы секунды.
- Ігры: персонаж, які старыцца на курсар, які стае об’ектам для пераганяння, адхілення або збору.
- Запускі: робот, стварэнне або фота продукту, які паглядае на заголовак, а потым супакоўвае візітара да главнага заклекання да дзеяння.
Найбільш корисна з комерційної точки зору версія — це не просто очі, які стежать за вами. Це очі, які направляють вас. Уявіть собі, як Catty відкривається з погляду на заголовок, на мить фіксуючись на відвідувачі, а потім переводить погляд на кнопку „Спробувати демо“. Це пов’язує ефект із шляхом, яким ви хочете, щоб люди рухалися. Серія звукових ефектів виконується у чотирьох кроках:
- Увага: Catty кліпає або помічає, що хтось прийшов.
- Напрямок: її погляд переміщується на заголовок або основну кнопку.
- Зворотний зв’язок: плавання курсором або клік по ньому викликає видиму реакцію.
- Нагорода: після виконання дії з’являється невелика анімація, яка завершує цикл.
Ўжоўваце гэтае на сторонкі банкавых служб, правовых абмованняў, медычных паслуг, програмнага забавства для підпрыемстваў чы на сторонкі адплаты, якщо толькі гэта не служыць чыстаю функцыі. На серьёзных чы занятых задачамі сторонках вочы, якія сталкуюцься з курсарам, могуць разрушыць довер'е чы адвярнуць увагу корыстнікаў ад завершэння задачы.
Па-за розважальнымі дэманстрацыямі, пазірк, які следзі за курсарам, можа зробіць AI-асистента сэрцам адпаведнага наставніка, прывернуць увагу да акцыі, стварыць атмосферу навчання чы дастаць брэнду гэму чы разважальнага кантэнту мгновенна адгуклівыя формы взаімадзея. Галоўная мета — не рух вачэй, а выбір таго, што пазірк перадае: увагу, напрамак, цікавасць, адзявленне чы запрошэнне.
Шаблон запиту, які можна перыскорыць
Перыскорыць структуру
Возьміце тыя ж восьмыя блокі і заполніце іх для свага проекта, у тым самым порядку, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, прытым, пр