Des yeux de chat qui suivent votre curseur, créés à partir d’une seule consigne.

Jusqu’où peut aller une instruction lorsque la cible est une page web interactive ? Le cas d’école ici était un chat espiègle nommé Catty, dont les yeux suivent le curseur du visiteur, créé dans un seul message adressé à GPT-6 Astra.

Des directives, pas des demandes

Beaucoup de créatifs tapent « créez-moi un site web avec un chat mignon » dans une intelligence artificielle, obtiennent quelque chose de terne et sans vie, puis en concluent que l’outil n’est pas prêt. Même outil, même modèle, résultats complètement différents lorsque quelqu’un d’autre l’utilise. Le problème n’a jamais résidé dans l’IA. L’un a simplement formulé un souhait ; l’autre a présenté un plan.

Un souhait définit le résultat escompté. Un plan décrit le comportement à adopter et précise chaque décision pour laquelle on a déjà une réponse. Le reste de cet article illustre concrètement cette différence.

La consigne qui a été envoyée

Ce n’était pas un paragraphe. Il s’agissait d’un brief créatif et technique structuré, présenté dans son intégralité ci-dessous. Pour le réutiliser, remplacez-le par votre propre image, coordonnées et texte, puis collez l’ensemble du brief dans le modèle en tant que message unique.

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.

Remarquez ce que la description évite. Elle ne demande jamais au modèle de deviner où se trouvent les yeux du chat. Le modèle doit plutôt les mesurer et rapporter les chiffres obtenus. C’est en remplaçant une supposition par une valeur précise que l’on distingue une démonstration vivante d’un effet JavaScript collé sur une photographie.

Les yeux apparaissent alors sous forme de superpositions basées sur des pourcentages, et non comme des pixels fixes, ce qui leur permet de rester attachés au visage quel que soit la taille de l’écran. Il s’agit d’images agrandies des yeux originaux, encadrées dans des orbites circulaires et déplaçées vers l’endroit où se trouve le pointeur.

Première couche : le regard

Lorsque vous bougez, le chat calcule l’angle entre chaque œil et votre curseur, se déplace légèrement dans cette direction de manière fluide, puis s’arrête. Trois règles garantissent ce réalisme :

1. Les yeux ne quittent jamais leurs orbites.
2. Le mouvement commence et s’arrête progressivement, sans saccades.
3. Après 2,5 secondes sans mouvement, les yeux reviennent au centre.

La troisième règle est plus importante qu’il n’y paraît. Sans elle, elle se fige au milieu de son regard dès que vous vous arrêtez, prisonnière d’un regard fixé sur le vide, comme une photo de chat plutôt que le chat lui-même. En revenant au centre, on lui offre une attention plus détendue. Des clignements aléatoires s’ajoutent à cela, et l’illusion persiste.

Deuxième niveau : le curseur devient une souris

Lorsque le regard fonctionne correctement, le curseur standard est remplacé par une petite souris grise. Elle vous suit, court lorsque vous vous déplacez, renifle lorsque vous vous arrêtez, saute lorsque vous cliquez, et grossit légèrement au-dessus de tout ce qui peut être cliqué. Un détail minuscule qui change tout : le curseur cesse d’être un outil de contrôle pour devenir un personnage, ce qui signifie que le chat ne vous regarde plus. Il regarde la souris.

Troisième niveau : la chasse

Vient ensuite un petit jeu. Un rat agité saute vers une nouvelle position à l’intérieur du cadre de démonstration tous les quelques secondes ; vous disposez de huit secondes, et le but est de l’attraper avant que le temps ne s’épuise. Son regard le suit en permanence, ce qui fait que ce jeu n’est pas une fonction ajoutée ultérieurement. C’est une interaction originale accompagnée d’enjeux.

C’est un modèle qui vaut la peine d’être adopté. Le curseur menait au rat, le rat menait au jeu, et le jeu donnait à la page une raison d’être ouverte deux fois. Rien n’a été ajouté simplement parce que c’était cool ; chaque élément a émergé du précédent. Les instructions du jeu ressemblaient à ceci :

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.

Cinquième étape : caresses

La dernière interaction est la plus légère et peut-être la meilleure. Un point chaud invisible se trouve sur le front du chat. En le frottant, ses yeux se ferment, des étincelles émergent de sa tête et un doux ronronnement se fait entendre à ses côtés. Cela fonctionne avec une souris, un doigt ou un clavier, et il existe un mode mouvement réduit pour ceux qui préfèrent éviter que des éléments ne volent à l’écran.

Chaque interaction provoque une émotion différente : fixer le chat suscite la curiosité, le poursuivre favorise le jeu, tandis que les caresses créent un sentiment proche de l’affection. La plupart des pages d’accueil ne parviennent même pas à en générer une seule.

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.

Ce que le modèle n’a pas pu décider

Le modèle a construit tout le système, mais il n’a pas pu effectuer les choix qui en feraient un bon système. Quelqu’un devait encore choisir la position du titre, décider de ce à quoi réagir, juger quand le mouvement semble naturel et quand il devient erratique, ce que fait la souris en période d’inactivité, pourquoi huit secondes et non quinze, ainsi que déterminer quelles interactions devaient rester et lesquelles constituaient du bruit.

L’IA produit le système, mais c’est le goût qui décide s’il semble intentionnel. La véritable compétence aujourd’hui réside dans la direction plutôt que dans la rédaction de prompts, ce qui commence par repérer ce qui est « trop » avant même qu’il n’existe. Le goût reste nécessaire. Ce dont on n’a plus besoin, c’est de trois jours et d’un développeur pour savoir si l’on avait raison.

Les huit blocs à copier

Si vous voulez créer quelque chose de similaire, n’écrivez pas une phrase. Écrivez huit blocs :

• Référence visuelle : l’image d’origine, ainsi que la palette de couleurs, la composition, le sujet et l’ambiance.
• Vue initiale : ce que montre l’écran d’accueil et quelle place occupe le texte.
• Interaction principale : ce que fait le visiteur et comment l’élément interactif y répond, décrit avec précision.
• Règles de mouvement : valeurs relatives à la vitesse, à la courbe d’animation, aux limites de déplacement, aux états inactifs et au timing.
• Interactions secondaires : seules celles qui découlent naturellement de l’idée principale.
• Comportement adaptatif : gestion des touches et des petits écrans, définie dès le début et non modifiée ultérieurement.
• Structure du contenu : sections, titres, boutons et le texte lui-même.
• Contraintes techniques : gestion des ressources, accessibilité, réduction des animations et mode de livraison de la page.

Lorsque les huit champs sont remplis, le modèle n’a plus besoin de deviner vos préférences : il les met simplement en œuvre. Omettez-en un, et c’est précisément là que le résultat vous décevra.

Le changement majeur

La partie essentielle n’a jamais été le code. C’était l’intervalle entre « J’ai une idée pour une interaction amusante entre personnages » et un produit fonctionnel sur lequel les gens peuvent cliquer. Auparavant, cet intervalle durait des jours ; aujourd’hui, il ne dure qu’un après-midi. Ainsi, expérimenter n’est plus coûteux, et vous pouvez évaluer l’efficacité d’une idée avant de vous y engager. Les prompts uniques ne permettent pas d’éviter à jamais les itérations, mais ils produisent une première version suffisamment bonne pour que les améliorations en valent finalement la peine.

Pourquoi un prompt unique suffisait

Un prompt unique ne signifie pas que le modèle comprend tout par magie. Il fonctionne lorsque le prompt possède suffisamment de structure pour que le modèle puisse faire de bons choix. Cinq éléments du brief ont eu le plus d’impact :

1. Un point de repère visuel clair. L’image du chat a défini la palette, la composition, l’ambiance et le caractère de la page, lui offrant ainsi un point de départ solide.
2. Règles d’interaction explicites. L’instruction « Faire en sorte que les yeux suivent le curseur » se traduit par des positions précises pour les yeux, des tailles définies pour leurs orbites, des limites de mouvement, une durée d’animation progressive, un délai de réinitialisation en cas d’inactivité et une fréquence de clignement. Plus le comportement est spécifique, moins le modèle a à interpréter.
3. Une hiérarchie des interactions. La page a été construite en couches : composition statique, suivi des yeux, personnalité du curseur, mini-jeu, puis caresses. Cela a permis de maintenir la cohérence, car chaque élément s’est construit à partir du précédent.
4. Un public défini. La page s’adresse aux designers et aux développeurs front-end qui consultent un portfolio ; elle doit donc être mémorable tout en étant facile à comprendre. Un visiteur doit savoir quoi faire sans avoir besoin de lire de la documentation.

Exigences de réactivité. Le comportement tactile était requis dès le début, ce qui empêche la page de devenir un prototype uniquement destiné aux ordinateurs de bureau et qui ne fonctionne pas sur les appareils mobiles.

Où cela s’inscrit également

• Chatbots et assistants : une mascotte qui surveille le curseur, s’anime lorsque un visiteur s’approche du bouton de chat et jette un coup d’œil à chaque nouvelle réponse.
• Marques spécialisées dans les animaux de compagnie, les jouets et les enfants : des personnages qui réagissent aux produits, aux friandises ou à un curseur ludique. C’est là que Catty trouve naturellement sa place.
• Portefeuilles et studios : un visage illustré qui suit le visiteur prouve en quelques secondes les capacités d’interaction du site.
• Jeu vidéo : un personnage qui fixe un curseur devenu quelque chose à poursuivre, à esquiver ou à collecter.
• Lancements de produits : une image de robot, de créature ou de produit qui regarde le titre, puis guide le visiteur vers l’appel à l’action principal.

Intégration et apprentissage : un guide dont le regard se porte sur le champ ou le contrôle suivant, montrant aux utilisateurs ce qu’il faut faire sans manuel.

Musées et narration : des portraits qui semblent remarquer qui les regarde, donnant ainsi l’impression qu’une page d’exposition est habitée.

Mode, beauté et lunettes : un mannequin dont l’apparence suit le pointeur ou se dirige vers les articles en vedette, à condition que cela reste très subtil.

Campagnes de confidentialité et de sécurité : un observateur peut exprimer un suivi et une vigilance, à condition que cela paraisse intentionnel et non inquiétant.

Microsites d’événements : un héros interactif mémorable qui incite à l’exploration et aux partages lorsque la nouveauté fait partie de la proposition.

La version la plus utile sur le plan commercial n’est pas simplement des yeux qui vous suivent. Ce sont des yeux qui vous guident. Imaginez Catty qui ouvre les yeux en regardant le titre, suit le visiteur un instant, puis dirige son regard vers le bouton « Essayer la démo » dès que le curseur s’approche. Cela relie l’effet au parcours que vous souhaitez faire emprunter aux utilisateurs. Une séquence sonore se déroule en quatre étapes :

1. Attention : Catty cligne des yeux ou remarque qu’il y a quelqu’un.
2. Direction : ses yeux glissent vers le titre ou le bouton principal.
3. Réaction : un survol ou un clic provoque une réaction visible.
4. Récompense : une petite animation clôt le cycle une fois l’action terminée.

Évitez son utilisation sur les pages bancaires, juridiques, médicales, de logiciels d’entreprise ou de paiement, sauf s’il remplit une fonction claire. Sur les pages sérieuses ou complexes, un visage qui surveille constamment le curseur peut éroder la confiance ou distraire les utilisateurs de leur tâche.

En dehors des démos ludiques, un regard qui suit le curseur peut faire d’un assistant IA un guide réactif, attirer l’attention sur une action à entreprendre, conférer un caractère pédagogique ou offrir à une marque de jeux ou de divertissement une interaction immédiatement reconnaissable. Il ne s’agit pas de faire bouger les yeux, mais de déterminer ce que le regard communique : de l’attention, une direction, de la curiosité, un avertissement ou une invitation.

Un squelette de prompt que vous pouvez réutiliser

Réutiliser la structure

Prenez ces huit blocs identiques et remplissez-les pour votre propre projet, dans cet ordre, avant d’envoyer quoi que ce soit. Les écrire vous oblige à considérer la page comme une expérience cohérente plutôt que comme un ensemble d’effets isolés, et le modèle en tient compte. Si vous ne pouvez pas répondre à un bloc, c’est la partie que vous n’avez pas encore conçue ; résolvez-la en premier.