Mueve el cursor cerca del botón de la lista de espera en la página de inicio y Mr. Grummel, dibujado junto a él, se pone contento. Aléjate y se enfría — serio, luego molesto, y luego, si te alejas lo suficiente, visiblemente furioso, con humo incluido. Se lee como un personaje que se fija en ti. Por debajo, es una simple fórmula de distancia que se ejecuta dentro de un callback de requestAnimationFrame con cada movimiento del ratón: contento por debajo de 180 píxeles del centro del botón, serio por debajo de 420, molesto por debajo de 700, furioso a partir de ahí. Sin aprendizaje automático, sin detección de intención — todo el rango emocional de un profesor, reducido a cuatro umbrales numéricos.
Una regla que tiene prioridad sobre la distancia
El cálculo de distancia tiene una cláusula de escape: pon el cursor directamente sobre el botón y deja de medir distancia por completo para celebrarlo, y ese estado se mantiene hasta que te vayas. Tiene que tener prioridad sobre todo lo demás, porque el momento en que estás sobre el botón es el momento en que su opinión sobre ti deja de ser lo importante. Un personaje que siguiera echando humo mientras estás a mitad de un clic estaría leyendo la señal equivocada justo en el instante en que esa señal dejó de importar.
El cuestionario de la página ejecuta un sistema de ánimo relacionado pero independiente, basado en las respuestas en lugar de en la posición del cursor. Una racha de dos respuestas correctas gana «contento»; una respuesta incorrecta sube un contador de escalada en uno, con un tope de tres, y cada respuesta incorrecta también reinicia la racha a cero. Tres fallos seguidos y está «furioso», con un papel tembloroso y un tinte de pantalla que siguen ambos el mismo contador. Acierta una después y el contador baja un escalón en lugar de reiniciarse del todo — una mala racha te cuesta poco a poco, y una buena racha se recupera de la misma manera.
La parte que tiene que quedarse apagada
Rastrear cada movimiento del ratón para impulsar una animación que se actualiza sin parar es exactamente el tipo de movimiento que prefers-reduced-motion: reduce existe para desactivar, así que el listener que sigue al cursor comprueba ese ajuste una sola vez, al principio, y directamente no se engancha si está activado. Es una contrapartida real, no gratuita: alguien con esa preferencia activada sigue recibiendo los estados discretos — el hover, el foco, una respuesta incorrecta del cuestionario, todo eso sigue llegando — solo pierde la versión continua de «te está viendo acercarte». Elegimos la versión que respeta el ajuste por completo antes que una que suaviza el movimiento y aun así envía parte de él, porque un ajuste que se respeta «casi siempre» es un ajuste que no se respeta.
De lo que todavía no estamos seguros
Una metáfora de «interés» basada en la distancia a un botón es una conjetura razonable y nada más — alguien que lee la página con atención con el cursor aparcado en una esquina no está desconectado, es que una fórmula que solo entiende de píxeles no lo está midiendo bien. No hemos medido si el sistema de ánimo empuja a alguien hacia la lista de espera o simplemente se nota y arranca una sonrisa. Son resultados distintos, y de momento solo tenemos pruebas del segundo.
Nada de esto es temario — es una nota sobre cómo está construida esta página de marketing, no algo que la app te vaya a preguntar. Si las fórmulas de distancia y los event listeners son el tipo de cosas sobre las que preferirías que te preguntaran en lugar de leer, la asignatura de Informática de la app cubre los conceptos más básicos que hay detrás, empezando por Programación.