Oczy kota, które śledzą twój kursor, stworzone na podstawie jednej instrukcji.

Jak daleko może sięgać prompt, gdy celem jest interaktywna strona internetowa? Przykładem testowym była zabawna kotka o imieniu Catty, której oczy śledzą kursor odwiedzającego – wszystko to zostało zawarte w jednym wiadomości do GPT-6 Astra.

Wskazówki, a nie prośby

Wielu kreatywnych ludzi wpisuje do sztucznej inteligencji frazę „stwórz mi uroczą stronę z kotem”, otrzymuje coś beżowego i pozbawionego życia, i dochodzi do wniosku, że narzędzie nie jest gotowe. To samo narzędzie, ten sam model – zupełnie różne wyniki, gdy używa go ktoś inny. Problemem nigdy nie była sama sztuczna inteligencja. Jeden z nich wpisał życzenie; drugi przedstawił plan.

Życzenie określa rezultat, którego się oczekuje. Plan opisuje zachowanie i ustala każdą decyzję, na którą już ma się odpowiedź. Reszta tego tekstu to konkretyzacja tej różnicy.

Zasady, które zostały przesłane

To nie był akapit. Był to ustrukturyzowany, kreatywny i techniczny opis, który znajduje się poniżej w całości. Aby go ponownie wykorzystać, zastąp go własnym obrazem oraz współrzędnymi, a następnie wklej cały opis do modelu jako jedną wiadomość.

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.

Zwróć uwagę na to, czego unika opis zadania. Nigdy nie prosi się modelu o odgadnięcie, gdzie znajdują się oczy kota. Od modelu wymaga się pomiaru ich rozmiaru i podania tych wartości. To właśnie zastąpienie domysłu konkretną liczbą odróżnia demo, które wygląda na żywe, od efektu w JavaScriptie przyklejonego do zdjęcia.

Oczy pojawiają się jako nakładki oparte na procentach, a nie jako stałe piksele, dzięki czemu pozostają przymocowane do twarzy niezależnie od rozdzielczości ekranu. Są to powiększone fragmenty oryginalnych oczu, umieszczone w okrągłych otworach i przesuwające się w kierunku wskaźnika.

Pierwsza warstwa: spojrzenie

Gdy się poruszasz, kot oblicza kąt od każdego oka do twojego kursora i delikatnie, płynnie przesuwa się w tym kierunku, a następnie zatrzymuje się. Trzy zasady sprawiają, że to wygląda wiarygodnie:

1. Oczy nigdy nie opuszczają swoich otworów.
2. Ruch rozpoczyna się i kończy stopniowo, bez nagłych skoków.
3. Po 2,5 sekundach bez ruchu oczy wracają do środka.

Trzecie zasada jest ważniejsza, niż się wydaje. Bez niej ona zastyga w pół spojrzenia w momencie, gdy przestajesz się poruszać, uwięziona w patrzeniu na nic, jak zdjęcie kota zamiast samego kota. Powrót do środka daje jej swego rodzaju spokojną uwagę. Dodatkowo przypadkowe mruganie utrzymuje tę iluzję.

Warstwa druga: kursor staje się myszą

Gdy spojrzenie już działa, standardowy kursor zostaje zastąpiony małą szarą myszką. Podąża za tobą, pędzi, gdy się poruszasz, węszy, gdy przestajesz, skacze, gdy klikasz, i lekko się powiększa nad wszystkim, co można kliknąć. To drobny detal, który zmienia całą sytuację. Kursor przestaje być narzędziem sterowania i staje się postacią, co oznacza, że kot już cię nie obserwuje – on obserwuje myszkę.

Warstwa trzecia: pościg

Następnie jest mała gra. Niespokojna mysz skacze co kilka sekund w nową pozycję wewnątrz ramy demonstracyjnej – masz osiem sekund, a całym celem jest złapanie jej przed upływem czasu. Jej wzrok cały czas śledzi ją, więc gra nie jest dodatkową funkcją. To oryginalna interakcja z elementem ryzyka.

To wzorzec wart naśladowania. Kursor prowadził do myszy, mysz prowadziła do gry, a gra dała stronie powód, by zostać otwartą dwa razy. Nic nie zostało dodane tylko dlatego, że wyglądało fajnie; każdy element powstał na bazie poprzedniego. Instrukcje do gry wyglądały tak:

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.

Warstwa czwarta: głaskanie

Ostatnia interakcja jest najmniejsza, a być może też najlepsza. Nad czołem kota znajduje się niewidzialny punkt aktywacji. Gdy go potrzesz, kot zamknie oczy, z jego głowy uniosą się iskierki, a obok niego usłyszysz delikatne mruczenie. Działa to zarówno z myszką, palcem, jak i klawiaturą; dostępna jest również wersja z zmniejszoną prędkością ruchu dla osób, które nie chcą, by elementy latały po ekranie.

Każda interakcja wywołuje inne emocje: wpatrywanie się budzi ciekawość, gonitwa wprowadza elementy zabawy, a głaskanie tworzy coś bliższego uczuciu przywiązania. Większość stron docelowych nie potrafi zapewnić nawet jednej z nich.

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.

To, czego model nie mógł zdecydować

Model stworzył cały system, ale nie potrafił dokonać tych decyzji, które sprawiłyby, że system był dobry. Ktoś nadal musiał wybrać pozycję nagłówka, zdecydować, na co ma zareagować, ocenić, kiedy ruch wydaje się żywy, a kiedy staje się nieprawidłowy, co robi mysz, gdy nic nie robisz, dlaczego osiem sekund, a nie piętnaście, oraz które interakcje należą do siebie, a które należy usunąć jako zbędne elementy.

Sztuczna inteligencja tworzy system, a gust decyduje o tym, czy wydaje się on celowy. Prawdziwą umiejętnością jest teraz kierowanie procesem zamiast wpisywania instrukcji, co zaczyna się od wykrycia „zbyt wiele” elementów jeszcze przed ich powstaniem. Gust nadal jest niezbędny. To, czego już nie potrzebujesz, to trzy dni i programista, aby sprawdzić, czy mieliś rację.

Osiem bloków do skopiowania

Jeśli chcesz stworzyć coś podobnego, nie pisz zdania. Napisz osiem bloków:

• Odniesienie wizualne: oryginalny obraz, a także paleta kolorów, kompozycja, temat i nastrój.
• Pierwszy ekran: co pokazuje ekran startowy i po której stronie znajduje się tekst.
• Podstawowa interakcja: co robi odwiedzający i jak obiekt na to reaguje, opisane dokładnie.
• Reguły ruchu: wartości dotyczące szybkości, przejść między stanami, ograniczeń ruchu, stanów bezczynności i czasu reakcji.
• Interakcje drugorzędne: tylko te, które naturalnie wynikają z głównej idei.
• Zachowanie responsywne: obsługa dotyku i małych ekranów, ustalone na początku, a nie dodawane później.
• Struktura treści: sekcje, nagłówki, przyciski oraz sam tekst.
• Ograniczenia techniczne: obsługa zasobów, dostępność, ograniczenia ruchu oraz sposób dostarczania strony.

Gdy wszystkie osiem miejsc jest wypełnionych, model nie musi już zgadywać twoich upodobań – po prostu je realizuje. Pominij jedną z nich i wtedy właśnie wynik cię zawiedzie.

Większa zmiana

Cenną częścią nigdy nie był kod. Był to okres pomiędzy „Mam pomysł na zabawną interakcję postaci” a gotowym produktem, w który można kliknąć. Kiedyś trwało to dni, teraz godziny – dzięki temu eksperymentowanie przestaje być kosztowne i możesz sprawdzić, jak wygląda dany pomysł, zanim zdecydujesz się na niego. Jednorazowe generowanie nie jest sposobem na wieczne unikanie iteracji – daje pierwszą wersję na tyle dobrą, że dalsze prace w końcu stają się opłacalne.

Dlaczego jednorazowe generowanie wystarczyło

Jednorazowe polecenie nie oznacza, że model magicznie rozumie wszystko. Działa wtedy, gdy polecenie ma wystarczającą strukturę, by model mógł dokonać dobrego wyboru. Największy wpływ miało pięć elementów instrukcji:

1. Jasny wizualny punkt odniesienia. Obraz kota określił paletę kolorów, kompozycję, nastrój oraz charakter strony, co dało jej solidny punkt wyjścia.
2. Jasno określone zasady interakcji. Zasada „spraw, by oczy podążały za kursorem” została zastąpiona precyzyjnie określonymi pozycjami oczu, rozmiarami oczodołów, ograniczeniami ruchu, czasem zwalniania ruchu, momentem ponownego ustawienia w stan spoczynku oraz częstotliwością mrugania. Im bardziej szczegółowe są zasady zachowania, tym mniej model musi interpretować.
3. Hierarchia interakcji. Strona została zbudowana warstwami: statyczna kompozycja, śledzenie wzrokiem, „charakter” kursora, minigra, a na końcu możliwość głaskania. Dzięki temu strona była spójna, ponieważ każda kolejna funkcja rozwijała się na bazie poprzedniej.
4. Ookreślona grupa odbiorców. Strona jest skierowana do projektantów i programistów front-end, którzy przeglądają portfolio, dlatego musiała być łatwa do zapamiętania i szybka w zrozumieniu. Odwiedzający powinien wiedzieć, co robić, bez konieczności czytania dokumentacji.

Wymagania dotyczące responsywności. Od samego początku wymagano zachowania dostosowanego do dotyku, co zapobiegło temu, by strona stała się eksperymentem przeznaczonym wyłącznie dla komputerów stacjonarnych, który nie działałby na urządzeniach mobilnych.

Gdzie jeszcze może się to sprawdzić

• Czatboty i asystenci: maskotka, która obserwuje wskaźnik myszy, ożywa, gdy użytkownik zbliża się do przycisku czatu, i spogląda na każdą nową odpowiedź.
• Marki zajmujące się zwierzętami domowymi, zabawkami i dziećmi: postacie reagujące na produkty, przysmaki lub zabawny obiekt w postaci kursora. To oczywiste zastosowanie dla Catty.
• Portfele i studia: ilustrowana twarz śledząca użytkownika dowodzi umiejętności interakcji w ciągu zaledwie kilku sekund.
• Gry: postać wpatruje się w kursor, który staje się czymś, co należy gonić, unikać lub zbierać.
• Lansacje: robot, stworzenie lub zdjęcie produktu, które patrzy na nagłówek, a następnie prowadzi użytkownika w stronę głównej wezwania do działania.

Proces wdrożenia i nauka: przewodnik, którego wzrok skupia się na kolejnym polu lub elemencie sterującym, pokazując użytkownikom, co robić, bez konieczności korzystania z instrukcji.

Muzea i opowiadanie historii: portrety, które zdają się zauważać, kto patrzy, dzięki czemu strona ekspozycji wydaje się zamieszkana.

Moda, piękno i okulary: model, którego wygląd podąża za wskaźnikiem lub kieruje się w stronę prezentowanych produktów, o ile pozostaje to bardzo subtelne.

Kampanie dotyczące prywatności i bezpieczeństwa: osoba obserwująca może pokazać, że monitoruje sytuację i jest świadoma, o ile wydaje się to celowe, a nie nieprzyjemne.

Mikrostrony eventowe: pamiętny, interaktywny element główny, który zachęca do eksploracji i udostępniania, gdy nowość jest częścią propozycji.

Najbardziej przydatna komercyjnie wersja to nie po prostu oczy, które śledzą użytkownika, lecz oczy, które go kierują. Wyobraź sobie, jak Catty otwiera się spojrzeniem skierowanym na nagłówek, przez chwilę obserwuje gościa, a następnie przenosi wzrok na przycisk „Próbuj demo”, gdy kursor się zbliża. Dzięki temu efekt jest powiązany z drogą, którą chcemy, aby ludzie obrali. Sekwencja dźwiękowa składa się z czterech kroków:

1. Uwaga: Catty mruga lub zauważa, że ktoś przybył.
2. Kierunek: jej oczy przesuwają się w stronę nagłówka lub głównego przycisku.
3. Informacja zwrotna: przejście kursorem lub kliknięcie wywołuje widoczną reakcję.
4. Nagroda: mała animacja zamyka pętlę po wykonaniu czynności.

Unikaj tego w stronach bankowych, prawnych, medycznych, oprogramowania korporacyjnego czy koszyków zakupowych, chyba że pełni ono jasną funkcję. Na stronach o charakterze poważnym lub wymagających dużo pracy, wzrok śledzący kursor może podważyć zaufanie lub odwrócić uwagę użytkowników od dokończenia zadań.

Poza zabawnymi demonstracjami, wzrok śledzący kursor może sprawić, że asystent AI będzie wydawał się responsywnym przewodnikiem, skierować uwagę na wezwanie do działania, nadać charakter edukacyjny lub zapewnić markom gier i rozrywki natychmiast rozpoznawalną interakcję. Chodzi nie o to, by oczy się poruszały, lecz o to, by zdecydować, co komunikuje ten wzrok: uwagę, kierunek, ciekawość, ostrzeżenie czy zaproszenie.

Szkielet instrukcji, który można ponownie wykorzystać

Ponowne wykorzystanie struktury

Weź te same osiem bloków i wypełnij je dla swojego projektu, w tej samej kolejności, zanim cokolwiek wyślesz. Zapisywanie ich zmusza cię do postrzegania strony jako spójnego całości, a nie zbioru poszczególnych efektów, co jest wykorzystywane przez model. Jeśli nie potrafisz odpowiedzieć na pytanie dotyczące jakiegoś bloku, oznacza to, że ta część nie została jeszcze zaprojektowana, więc zajmij się nią najpierw.