Cat Eyes That Follow Your Cursor, Built From One Prompt

How far can one prompt go when the target is an interactive web page? The test case here was a playful cat named Catty, whose eyes track the visitor's cursor, built in a single message to GPT-6 Astra.

Directions, not requests

Plenty of creative people type "make me a cute cat website" into an AI, get something beige and lifeless back, and conclude the tool isn't ready. Same tool, same model, wildly different results when someone else uses it. The gap was never the AI. One of them typed a wish; the other handed over a plan.

A wish names the outcome you're hoping for. A plan describes behavior and locks in every decision you already have an answer to. The rest of this piece is that difference made concrete.

The brief that was sent

It wasn't a paragraph. It was a structured creative and technical brief, shown in full below. To reuse it, swap in your own image, copy and coordinates, then paste the whole brief into the model as a single message.

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.

Notice what the brief avoids. It never asks the model to guess where the cat's eyes are. The model is asked to measure them and report the numbers back. Replacing a guess with a figure is what separates a demo that feels alive from a JavaScript effect stapled onto a photograph.

The eyes then sit as percentage-based overlays, not fixed pixels, so they stay attached to the face at any screen size. They're enlarged crops of the original eyes, clipped inside circular sockets and sliding toward wherever the pointer is.

Layer one: the stare

As you move, the cat works out the angle from each eye to your cursor and shifts that way a little, smoothly, then stops. Three rules make it believable:

1. The eyes never leave their sockets.
2. Motion eases in and out and never snaps.
3. After 2.5 seconds without movement, the eyes drift back to center.

The third rule matters more than it seems. Without it she freezes mid-glance the moment you stop, locked in a stare at nothing, a photo of a cat instead of a cat. Returning to center gives her a resting kind of attention. Random blinks land on top of that, and the illusion holds.

Layer two: the cursor becomes a mouse

With the stare working, the standard cursor gets replaced by a small grey mouse. It follows you, scurries while you move, sniffs when you stop, hops when you click and grows slightly over anything clickable. A tiny detail, and it changes the story. The cursor stops being a control and turns into a character, which means the cat is no longer watching you. She's watching the mouse.

Layer three: the chase

Next comes a small game. A restless mouse jumps to a fresh position inside the demo frame every couple of seconds, you've got eight seconds, and catching it before the clock runs out is the whole goal. Her gaze follows it throughout, so the game isn't a bolt-on feature. It's the original interaction with stakes attached.

That's a pattern worth borrowing. The cursor led to the mouse, the mouse led to the game, and the game gave the page a reason to be opened twice. Nothing got added because it looked cool; each piece grew out of the one before. The game's instructions looked like this:

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.

Layer four: petting

The last interaction is the smallest and perhaps the best. An invisible hotspot sits over the cat's forehead. Rub across it and her eyes close, sparkles float up from her head and a soft purr appears beside her. It works with a mouse, a finger or a keyboard, and there's a reduced-motion fallback for people who'd rather not have things flying across the screen.

Each interaction produces its own emotion: staring sparks curiosity, chasing brings play, and petting builds something closer to affection. Most landing pages don't manage even one.

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.

What the model couldn't decide

The model built the whole system, yet it couldn't make the calls that made the system good. Somebody still had to pick the headline's position, decide what she reacts to, and judge when movement feels alive and when it turns glitchy, what the mouse does when you idle, why eight seconds and not fifteen, and which interactions belonged together versus which were cut as noise.

AI produces the system, and taste decides whether it feels intentional. The real skill now is directing instead of typing prompts, which starts with spotting "too much" before it exists. Taste is still required. What you no longer need is three days and a developer to find out whether you were right.

The eight blocks to copy

If you want to build something similar, don't write a sentence. Write eight blocks:

• Visual reference: the source image, plus palette, composition, subject and mood.
• First viewport: what the opening screen shows and which side the copy takes.
• Core interaction: what a visitor does and how the object answers, spelled out precisely.
• Motion rules: numbers for speed, easing, travel limits, idle states and timing.
• Secondary interactions: only those that branch naturally from the main idea.
• Responsive behavior: touch and small-screen handling, decided at the start and not patched in later.
• Content structure: sections, headings, buttons and the actual copy.
• Technical constraints: asset handling, accessibility, reduced motion and the way the page ships.

With all eight filled, the model no longer has to guess your taste. It just executes it. Skip one and that's exactly where the result will let you down.

The bigger shift

The valuable part was never the code. It was the span between "I have an idea for a playful character interaction" and a working thing people can click. That span used to be days. Now it's an afternoon, so experimenting stops being expensive and you can see how an idea feels before committing to it. One-shot prompting isn't a way to avoid iteration forever. It gets a first version good enough that iterating is finally worth the effort.

Why one shot was enough

A one-shot prompt doesn't mean the model understands everything by magic. It works when the prompt carries enough structure for the model to choose well. Five parts of the brief did the most:

1. A clear visual anchor. The cat image fixed the palette, composition, mood and personality, which gave the page a strong starting point.
2. Explicit interaction rules. "Make the eyes follow the cursor" gives way to defined eye positions, socket sizes, movement limits, easing duration, idle reset timing and blink frequency. The more specific the behavior, the less the model has to interpret.
3. A hierarchy of interactions. The page was built in layers: static composition, eye tracking, cursor personality, the mini-game, then petting. That kept it coherent, since each addition grew from the previous one.
4. A defined audience. The page targets designers and front-end developers browsing a portfolio, so it had to be memorable and also quick to understand. A visitor should know what to do without reading documentation.
5. Responsive requirements. Touch behavior was in the prompt from the start, which kept the page from becoming a desktop-only experiment that breaks on mobile.

Where else this fits

• Chatbots and assistants: a mascot that watches the pointer, perks up as a visitor nears the chat button and glances at each new reply.
• Brands for pets, toys and kids: characters that respond to products, treats or a playful cursor object. This is the obvious home for Catty.
• Portfolios and studios: an illustrated face tracking the visitor proves interaction chops in seconds.
• Games: a character stares at a cursor that has become something to chase, dodge or collect.
• Launches: a robot, creature or product shot that looks at the headline, then escorts the visitor toward the main call to action.
• Onboarding and learning: a guide whose gaze lands on the next field or control, showing people what to do without a manual.
• Museums and storytelling: portraits that seem to notice who's looking, so an exhibit page feels inhabited.
• Fashion, beauty and eyewear: a model whose look follows the pointer or drifts toward featured items, as long as it stays very subtle.
• Privacy and security campaigns: a watcher can express monitoring and awareness, as long as it feels deliberate and not creepy.
• Event microsites: a memorable interactive hero that earns exploration and shares when novelty is part of the pitch.

The most commercially useful version isn't simply eyes that follow you. It's eyes that guide you. Picture Catty opening with a look at the headline, tracking the visitor for a moment, then flicking her eyes to the "Try the demo" button as the cursor closes in. That ties the effect to the path you want people to take. A sound sequence runs in four steps:

1. Attention: Catty blinks, or notices someone arrived.
2. Direction: her eyes slide to the headline or the main button.
3. Feedback: hovering or clicking over it gets a visible reaction.
4. Reward: a little animation closes the loop once the action is done.

Avoid it on banking, legal, medical, enterprise software or checkout pages unless it serves a clear function. On serious or task-heavy pages, a face that keeps watching the cursor can erode trust or distract people from finishing.

Beyond playful demos, a cursor-following gaze can make an AI assistant feel like a responsive guide, point attention at a call to action, give an educational character presence, or hand a game or entertainment brand an instantly recognizable interaction. The point isn't making the eyes move. It's deciding what the gaze communicates: attention, direction, curiosity, warning or invitation.

A prompt skeleton you can reuse

Reusing the structure

Take the same eight blocks and fill them in for your own project, in that order, before you send anything. Writing them out forces you to think of the page as one connected experience instead of a pile of effects, and the model picks up on that. If you can't answer a block, that's the part you haven't designed yet, so settle it first.