Katzenaugen, die dem Cursor folgen – gebaut mit einem einzigen Prompt

Wie weit kommt man mit einem einzigen Prompt, wenn das Ziel eine interaktive Webseite ist? Testobjekt war eine verspielte Katze namens Catty, deren Augen dem Cursor der Besucher folgen, gebaut mit einer einzigen Nachricht an GPT-6 Astra.

Anweisungen statt Bitten

Viele Kreative tippen „mach mir eine süße Katzen-Website“ in eine KI, bekommen etwas Beiges und Lebloses zurück und schließen daraus, dass das Tool noch nicht so weit ist. Gleiches Tool, gleiches Modell, völlig andere Ergebnisse, wenn jemand anderes es benutzt. Der Unterschied lag nie bei der KI. Die eine Person hat einen Wunsch eingetippt, die andere einen Plan übergeben.

Ein Wunsch benennt das Ergebnis, auf das man hofft. Ein Plan beschreibt Verhalten und legt jede Entscheidung fest, auf die man schon eine Antwort hat. Der Rest dieses Artikels macht diesen Unterschied konkret.

Das Briefing, das verschickt wurde

Es war kein Absatz, sondern ein strukturiertes kreatives und technisches Briefing, das unten vollständig steht. Um es wiederzuverwenden, setzt du dein eigenes Bild, deine Texte und Koordinaten ein und fügst das ganze Briefing als eine einzige Nachricht ins Modell ein.

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.

Achte darauf, was das Briefing vermeidet. Es bittet das Modell nie, zu raten, wo die Augen der Katze sind. Das Modell soll sie messen und die Zahlen zurückmelden. Eine Vermutung durch eine Zahl zu ersetzen, ist genau das, was eine lebendig wirkende Demo von einem JavaScript-Effekt unterscheidet, der an ein Foto getackert wurde.

Die Augen liegen danach als prozentbasierte Overlays statt in festen Pixeln, damit sie bei jeder Bildschirmgröße am Gesicht bleiben. Es sind vergrößerte Ausschnitte der echten Augen, in runde Augenhöhlen geschnitten und in Richtung des Mauszeigers verschoben.

Ebene eins: der Blick

Während du die Maus bewegst, berechnet die Katze den Winkel von jedem Auge zu deinem Cursor, verschiebt den Blick sanft ein Stück in diese Richtung und hält dann an. Drei Regeln machen das glaubwürdig:

1. Die Augen verlassen nie ihre Höhlen.
2. Die Bewegung beschleunigt und bremst weich und springt nie.
3. Nach 2,5 Sekunden ohne Bewegung wandern die Augen zurück zur Mitte.

Die dritte Regel ist wichtiger, als sie aussieht. Ohne sie erstarrt die Katze mitten im Blick, sobald du anhältst, und starrt ins Leere – ein Foto einer Katze statt einer Katze. Die Rückkehr zur Mitte gibt ihr eine ruhende Aufmerksamkeit. Zufälliges Blinzeln kommt obendrauf, und die Illusion hält.

Ebene zwei: Der Cursor wird zur Maus

Als der Blick funktionierte, wurde der Standardcursor durch eine kleine graue Maus ersetzt. Sie folgt dir, huscht, während du dich bewegst, schnuppert, wenn du anhältst, hüpft beim Klicken und wird über allem Klickbaren etwas größer. Ein winziges Detail, das die Geschichte verändert. Der Cursor ist kein Steuerelement mehr, sondern eine Figur – die Katze beobachtet also nicht mehr dich. Sie beobachtet die Maus.

Ebene drei: die Jagd

Dann kommt ein kleines Spiel. Eine unruhige Maus springt alle paar Sekunden an eine neue Stelle im Demo-Rahmen, du hast acht Sekunden, und das ganze Ziel ist, sie zu fangen, bevor die Zeit abläuft. Der Blick der Katze folgt ihr die ganze Zeit, das Spiel ist also kein angeflanschtes Feature. Es ist die ursprüngliche Interaktion, nur mit Einsatz.

Dieses Muster lohnt sich zum Abschauen. Der Cursor führte zur Maus, die Maus zum Spiel, und das Spiel gab der Seite einen Grund, ein zweites Mal geöffnet zu werden. Nichts kam dazu, weil es cool aussah; jedes Teil wuchs aus dem vorherigen. Die Anweisungen für das Spiel sahen so aus:

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.

Ebene vier: Streicheln

Die letzte Interaktion ist die kleinste und vielleicht die beste. Über der Stirn der Katze liegt ein unsichtbarer Hotspot. Streichst du darüber, schließen sich ihre Augen, Funken steigen von ihrem Kopf auf, und neben ihr erscheint ein leises Schnurren. Das funktioniert mit Maus, Finger oder Tastatur, und für alle, die nicht wollen, dass etwas über den Bildschirm fliegt, gibt es eine Variante mit reduzierter Bewegung.

Jede Interaktion erzeugt ihr eigenes Gefühl: Der Blick weckt Neugier, die Jagd Spieltrieb, und das Streicheln etwas, das Zuneigung nahekommt. Die meisten Landingpages schaffen nicht einmal eins davon.

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.

Was das Modell nicht entscheiden konnte

Das Modell hat das ganze System gebaut, konnte aber nicht die Entscheidungen treffen, die es gut gemacht haben. Jemand musste immer noch die Position der Überschrift festlegen, entscheiden, worauf die Katze reagiert, und beurteilen, wann Bewegung lebendig wirkt und wann sie nach Glitch aussieht, was die Maus tut, wenn du nichts machst, warum acht Sekunden und nicht fünfzehn und welche Interaktionen zusammengehören und welche als Rauschen gestrichen werden.

Die KI erzeugt das System, der Geschmack entscheidet, ob es durchdacht wirkt. Die eigentliche Fähigkeit ist jetzt, Regie zu führen statt Prompts zu tippen, und das beginnt damit, ein „zu viel“ zu erkennen, bevor es existiert. Geschmack braucht es weiterhin. Was man nicht mehr braucht, sind drei Tage und ein Entwickler, um herauszufinden, ob man richtig lag.

Die acht Blöcke zum Kopieren

Wenn du etwas Ähnliches bauen willst, schreib keinen Satz. Schreib acht Blöcke:

• Visuelle Referenz: das Ausgangsbild plus Farbpalette, Komposition, Motiv und Stimmung.
• Erster Viewport: was der Startbildschirm zeigt und auf welcher Seite der Text steht.
• Kerninteraktion: was Besucher tun und wie das Objekt antwortet, präzise ausformuliert.
• Bewegungsregeln: Zahlen für Geschwindigkeit, Easing, Bewegungsgrenzen, Ruhezustände und Timing.
• Sekundäre Interaktionen: nur solche, die sich natürlich aus der Hauptidee ergeben.
• Responsives Verhalten: Touch und kleine Bildschirme, von Anfang an entschieden und nicht später nachgeflickt.
• Inhaltsstruktur: Abschnitte, Überschriften, Buttons und die eigentlichen Texte.
• Technische Vorgaben: Umgang mit Assets, Barrierefreiheit, reduzierte Bewegung und wie die Seite ausgeliefert wird.

Sind alle acht ausgefüllt, muss das Modell deinen Geschmack nicht mehr erraten. Es setzt ihn einfach um. Lässt du einen weg, enttäuscht dich das Ergebnis genau an dieser Stelle.

Die größere Verschiebung

Das Wertvolle war nie der Code. Es war die Strecke zwischen „Ich habe eine Idee für eine verspielte Figuren-Interaktion“ und einem funktionierenden Ding, das man anklicken kann. Früher dauerte diese Strecke Tage. Heute ist es ein Nachmittag, also wird Experimentieren billig, und man kann spüren, wie sich eine Idee anfühlt, bevor man sich festlegt. One-Shot-Prompting ist kein Weg, Iteration für immer zu vermeiden. Es liefert eine erste Version, die gut genug ist, dass sich Iterieren endlich lohnt.

Warum ein Versuch reichte

Ein One-Shot-Prompt heißt nicht, dass das Modell wie von Zauberhand alles versteht. Er funktioniert, wenn der Prompt genug Struktur mitbringt, damit das Modell gut wählen kann. Fünf Teile des Briefings haben am meisten bewirkt:

1. Ein klarer visueller Anker. Das Katzenbild legte Palette, Komposition, Stimmung und Persönlichkeit fest und gab der Seite einen starken Ausgangspunkt.
2. Explizite Interaktionsregeln. Statt „lass die Augen dem Cursor folgen“ gibt es definierte Augenpositionen, Höhlengrößen, Bewegungsgrenzen, Easing-Dauer, Timing für die Rückkehr in den Ruhezustand und Blinzelfrequenz. Je konkreter das Verhalten, desto weniger muss das Modell interpretieren.
3. Eine Hierarchie der Interaktionen. Die Seite entstand in Ebenen: statische Komposition, Augenverfolgung, Cursor-Persönlichkeit, Minispiel, dann Streicheln. Das hielt sie stimmig, weil jede Ergänzung aus der vorherigen wuchs.
4. Eine definierte Zielgruppe. Die Seite richtet sich an Designer und Frontend-Entwickler, die durch ein Portfolio klicken, also musste sie einprägsam und zugleich schnell verständlich sein. Besucher sollen ohne Doku wissen, was zu tun ist.
5. Responsive Anforderungen. Touch-Verhalten stand von Anfang an im Prompt, sodass die Seite kein reines Desktop-Experiment wurde, das auf dem Handy zerbricht.

Wo das sonst passt

• Chatbots und Assistenten: ein Maskottchen, das dem Zeiger folgt, aufmerksam wird, wenn sich Besucher dem Chat-Button nähern, und zu jeder neuen Antwort hinschaut.
• Marken für Haustiere, Spielzeug und Kinder: Figuren, die auf Produkte, Leckerlis oder ein verspieltes Cursor-Objekt reagieren. Hier ist Catty ganz offensichtlich zu Hause.
• Portfolios und Studios: Ein gezeichnetes Gesicht, das den Besuchern folgt, beweist Interaktionskönnen in Sekunden.
• Spiele: Eine Figur starrt auf einen Cursor, der zu etwas geworden ist, das man jagen, ausweichen oder einsammeln muss.
• Produktlaunches: ein Roboter, ein Wesen oder ein Produktfoto, das auf die Überschrift schaut und die Besucher dann zum wichtigsten Call to Action begleitet.
• Onboarding und Lernen: ein Guide, dessen Blick auf das nächste Feld oder Bedienelement fällt und ohne Handbuch zeigt, was zu tun ist.
• Museen und Storytelling: Porträts, die zu bemerken scheinen, wer hinsieht, sodass sich eine Ausstellungsseite bewohnt anfühlt.
• Mode, Beauty und Brillen: ein Model, dessen Blick dem Zeiger folgt oder zu hervorgehobenen Artikeln wandert, solange es sehr dezent bleibt.
• Kampagnen zu Datenschutz und Sicherheit: Ein Beobachter kann Überwachung und Wachsamkeit ausdrücken, solange es bewusst und nicht gruselig wirkt.
• Event-Microsites: ein einprägsamer interaktiver Hero-Bereich, der zum Erkunden und Teilen anregt, wenn Neuheit Teil der Botschaft ist.

Die kommerziell nützlichste Version sind nicht einfach Augen, die dir folgen. Es sind Augen, die dich führen. Stell dir vor, Catty schaut zuerst auf die Überschrift, folgt kurz den Besuchern und wirft dann einen Blick auf den Button „Try the demo“ („Demo ausprobieren“), sobald sich der Cursor nähert. So ist der Effekt an den Weg gekoppelt, den die Leute gehen sollen. Eine sinnvolle Abfolge hat vier Schritte:

1. Aufmerksamkeit: Catty blinzelt oder bemerkt, dass jemand da ist.
2. Richtung: Ihre Augen gleiten zur Überschrift oder zum Haupt-Button.
3. Feedback: Hover oder Klick darauf lösen eine sichtbare Reaktion aus.
4. Belohnung: Eine kleine Animation schließt den Kreis, sobald die Aktion erledigt ist.

Verzichte darauf bei Banken, Rechts- und Gesundheitsthemen, Unternehmenssoftware oder im Checkout, es sei denn, der Effekt erfüllt eine klare Funktion. Auf ernsten oder aufgabenlastigen Seiten kann ein Gesicht, das ständig dem Cursor folgt, Vertrauen untergraben oder Menschen vom Abschluss ablenken.

Jenseits verspielter Demos kann ein Blick, der dem Cursor folgt, einen KI-Assistenten wie einen aufmerksamen Guide wirken lassen, die Aufmerksamkeit auf einen Call to Action lenken, einer Lernfigur Präsenz geben oder einer Spiele- oder Unterhaltungsmarke eine sofort wiedererkennbare Interaktion verschaffen. Es geht nicht darum, dass sich die Augen bewegen. Es geht darum zu entscheiden, was der Blick mitteilt: Aufmerksamkeit, Richtung, Neugier, Warnung oder Einladung.

Ein wiederverwendbares Prompt-Gerüst

Die Struktur wiederverwenden

Nimm dieselben acht Blöcke und füll sie für dein eigenes Projekt aus, in genau dieser Reihenfolge, bevor du irgendetwas abschickst. Wer sie ausschreibt, muss die Seite als ein zusammenhängendes Erlebnis denken statt als Haufen Effekte, und das Modell greift das auf. Wenn du einen Block nicht beantworten kannst, hast du genau diesen Teil noch nicht gestaltet – kläre ihn zuerst.