Ojos de gato que siguen el cursor, hechos con un solo prompt

¿Hasta dónde llega un solo prompt cuando el objetivo es una página web interactiva? El caso de prueba fue una gata juguetona llamada Catty, cuyos ojos siguen el cursor del visitante, creada con un único mensaje a GPT-6 Astra.

Indicaciones, no peticiones

Mucha gente creativa escribe «hazme una web de gatos mona» en una IA, recibe algo beige y sin vida y concluye que la herramienta no está lista. Misma herramienta, mismo modelo, resultados totalmente distintos cuando la usa otra persona. La diferencia nunca estuvo en la IA. Una escribió un deseo; la otra entregó un plan.

Un deseo nombra el resultado que esperas. Un plan describe el comportamiento y fija cada decisión para la que ya tienes respuesta. El resto de este artículo es esa diferencia llevada a lo concreto.

El brief que se envió

No era un párrafo. Era un brief creativo y técnico estructurado, que aparece completo más abajo. Para reutilizarlo, pon tu propia imagen, tus textos y tus coordenadas, y pega el brief entero en el modelo como un único mensaje.

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.

Fíjate en lo que el brief evita. Nunca le pide al modelo que adivine dónde están los ojos de la gata. Le pide que los mida y devuelva las cifras. Cambiar una suposición por un número es lo que separa una demo que parece viva de un efecto de JavaScript grapado a una foto.

Después, los ojos se colocan como superposiciones en porcentajes, no en píxeles fijos, para que sigan pegados a la cara en cualquier tamaño de pantalla. Son recortes ampliados de los ojos originales, recortados dentro de cuencas circulares y desplazándose hacia donde esté el puntero.

Capa uno: la mirada

Al mover el ratón, la gata calcula el ángulo de cada ojo hacia tu cursor, desplaza la mirada un poco en esa dirección con suavidad y se detiene. Tres reglas lo hacen creíble:

1. Los ojos nunca salen de sus cuencas.
2. El movimiento acelera y frena con suavidad y nunca da saltos.
3. Tras 2,5 segundos sin movimiento, los ojos vuelven poco a poco al centro.

La tercera regla importa más de lo que parece. Sin ella, la gata se congela a media mirada en cuanto te paras, clavada mirando a la nada: una foto de una gata en lugar de una gata. Volver al centro le da una atención en reposo. Encima se añaden parpadeos aleatorios, y la ilusión se mantiene.

Capa dos: el cursor se convierte en ratón

Con la mirada funcionando, el cursor estándar se sustituyó por un pequeño ratón gris. Te sigue, corretea mientras te mueves, olisquea cuando te detienes, da un salto al hacer clic y crece un poco sobre cualquier cosa clicable. Un detalle diminuto que cambia la historia. El cursor deja de ser un control y pasa a ser un personaje, lo que significa que la gata ya no te mira a ti. Mira al ratón.

Capa tres: la persecución

Luego llega un pequeño juego. Un ratón inquieto salta a una posición nueva dentro del marco de la demo cada par de segundos, tienes ocho segundos y el objetivo es atraparlo antes de que se acabe el tiempo. La mirada de la gata lo sigue en todo momento, así que el juego no es una función pegada a posteriori. Es la interacción original con algo en juego.

Es un patrón que vale la pena copiar. El cursor llevó al ratón, el ratón al juego y el juego le dio a la página un motivo para abrirla dos veces. Nada se añadió porque quedara chulo; cada pieza surgió de la anterior. Las instrucciones del juego eran así:

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.

Capa cuatro: las caricias

La última interacción es la más pequeña y quizá la mejor. Sobre la frente de la gata hay una zona activa invisible. Pásale el cursor por encima y cierra los ojos, salen chispitas flotando de su cabeza y aparece un suave ronroneo a su lado. Funciona con ratón, con el dedo o con el teclado, y hay una alternativa con movimiento reducido para quien prefiere que no vuelen cosas por la pantalla.

Cada interacción despierta su propia emoción: la mirada provoca curiosidad, la persecución trae juego y las caricias generan algo parecido al cariño. La mayoría de las landing pages no consiguen ni una.

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.

Lo que el modelo no podía decidir

El modelo construyó todo el sistema, pero no podía tomar las decisiones que lo hicieron bueno. Alguien tuvo que elegir la posición del titular, decidir a qué reacciona la gata y juzgar cuándo el movimiento parece vivo y cuándo parece un fallo, qué hace el ratón cuando no haces nada, por qué ocho segundos y no quince, y qué interacciones iban juntas y cuáles se descartaron por ruido.

La IA produce el sistema, y el gusto decide si parece intencionado. La verdadera habilidad ahora es dirigir en lugar de teclear prompts, y empieza por detectar el «demasiado» antes de que exista. El gusto sigue siendo necesario. Lo que ya no necesitas son tres días y un desarrollador para saber si tenías razón.

Los ocho bloques para copiar

Si quieres construir algo parecido, no escribas una frase. Escribe ocho bloques:

• Referencia visual: la imagen de partida, además de paleta, composición, sujeto y ambiente.
• Primera pantalla: qué muestra la pantalla inicial y en qué lado va el texto.
• Interacción principal: qué hace el visitante y cómo responde el objeto, explicado con precisión.
• Reglas de movimiento: cifras para velocidad, easing, límites de desplazamiento, estados de reposo y tiempos.
• Interacciones secundarias: solo las que nacen de forma natural de la idea principal.
• Comportamiento responsive: táctil y pantallas pequeñas, decidido desde el principio y no parcheado después.
• Estructura del contenido: secciones, titulares, botones y los textos reales.
• Restricciones técnicas: gestión de recursos, accesibilidad, movimiento reducido y cómo se publica la página.

Con los ocho completos, el modelo ya no tiene que adivinar tu gusto. Simplemente lo ejecuta. Sáltate uno y justo ahí te fallará el resultado.

El cambio de fondo

Lo valioso nunca fue el código. Era el tramo entre «tengo una idea para una interacción juguetona con un personaje» y algo que funciona y en lo que la gente puede hacer clic. Ese tramo antes eran días. Ahora es una tarde, así que experimentar deja de ser caro y puedes ver cómo se siente una idea antes de comprometerte con ella. El prompt de un solo intento no es una forma de evitar la iteración para siempre. Consigue una primera versión lo bastante buena como para que iterar por fin merezca la pena.

Por qué bastó un intento

Un prompt de un solo intento no significa que el modelo lo entienda todo por arte de magia. Funciona cuando el prompt lleva estructura suficiente para que el modelo elija bien. Cinco partes del brief fueron las que más aportaron:

1. Un ancla visual clara. La imagen de la gata fijó la paleta, la composición, el ambiente y la personalidad, lo que dio a la página un punto de partida sólido.
2. Reglas de interacción explícitas. En lugar de «haz que los ojos sigan el cursor», hay posiciones de los ojos definidas, tamaños de las cuencas, límites de movimiento, duración del easing, tiempo de vuelta al reposo y frecuencia de parpadeo. Cuanto más concreto es el comportamiento, menos tiene que interpretar el modelo.
3. Una jerarquía de interacciones. La página se construyó por capas: composición estática, seguimiento con los ojos, personalidad del cursor, el minijuego y después las caricias. Eso mantuvo la coherencia, porque cada añadido surgía del anterior.
4. Un público definido. La página está pensada para diseñadores y desarrolladores front-end que navegan por un portfolio, así que tenía que ser memorable y también fácil de entender al instante. El visitante debe saber qué hacer sin leer documentación.
5. Requisitos responsive. El comportamiento táctil estaba en el prompt desde el principio, lo que evitó que la página acabara siendo un experimento solo para escritorio que se rompe en el móvil.

Dónde más encaja

• Chatbots y asistentes: una mascota que observa el puntero, se anima cuando el visitante se acerca al botón del chat y echa un vistazo a cada nueva respuesta.
• Marcas de mascotas, juguetes e infancia: personajes que reaccionan a productos, golosinas o un cursor juguetón. Es el hogar evidente de Catty.
• Portfolios y estudios: una cara ilustrada que sigue al visitante demuestra dominio de la interacción en segundos.
• Juegos: un personaje mira fijamente un cursor que se ha convertido en algo que perseguir, esquivar o recoger.
• Lanzamientos: un robot, una criatura o una foto de producto que mira el titular y luego acompaña al visitante hasta la llamada a la acción principal.
• Onboarding y aprendizaje: una guía cuya mirada se posa en el siguiente campo o control y enseña qué hacer sin manual.
• Museos y narrativa: retratos que parecen darse cuenta de quién los mira, para que la página de una exposición se sienta habitada.
• Moda, belleza y gafas: una modelo cuya mirada sigue el puntero o se desliza hacia los artículos destacados, siempre que sea muy sutil.
• Campañas de privacidad y seguridad: un observador puede transmitir vigilancia y conciencia, siempre que resulte deliberado y no inquietante.
• Micrositios de eventos: una portada interactiva memorable que invita a explorar y compartir cuando la novedad forma parte del mensaje.

La versión más útil comercialmente no son simplemente unos ojos que te siguen. Son unos ojos que te guían. Imagina que Catty empieza mirando el titular, sigue al visitante un momento y luego desvía la mirada hacia el botón «Try the demo» («Prueba la demo») cuando el cursor se acerca. Así el efecto queda ligado al camino que quieres que siga la gente. Una secuencia sólida tiene cuatro pasos:

1. Atención: Catty parpadea o se da cuenta de que alguien ha llegado.
2. Dirección: sus ojos se deslizan hacia el titular o el botón principal.
3. Respuesta: pasar el cursor o hacer clic encima provoca una reacción visible.
4. Recompensa: una pequeña animación cierra el ciclo cuando se completa la acción.

Evítalo en páginas de banca, legales, médicas, software empresarial o de pago, salvo que cumpla una función clara. En páginas serias o centradas en tareas, una cara que no deja de mirar el cursor puede minar la confianza o distraer a la gente de terminar lo que vino a hacer.

Más allá de las demos juguetonas, una mirada que sigue el cursor puede hacer que un asistente de IA parezca un guía atento, dirigir la atención hacia una llamada a la acción, dar presencia a un personaje educativo o regalar a una marca de juegos o entretenimiento una interacción reconocible al instante. La clave no es que los ojos se muevan. Es decidir qué comunica la mirada: atención, dirección, curiosidad, advertencia o invitación.

Un esqueleto de prompt reutilizable

Reutilizar la estructura

Toma los mismos ocho bloques y rellénalos para tu propio proyecto, en ese orden, antes de enviar nada. Escribirlos te obliga a pensar la página como una experiencia conectada y no como un montón de efectos, y el modelo lo capta. Si no puedes responder a un bloque, esa es la parte que aún no has diseñado, así que resuélvela primero.