Move o cursor para perto do botão da lista de espera na página de destino e o Mr. Grummel, desenhado ao lado, fica satisfeito. Afasta-te e ele esfria — carrancudo, depois irritado, e depois, suficientemente longe, visivelmente furioso, com fumo e tudo. Parece uma personagem a reparar em ti. Por baixo, é uma simples fórmula de distância executada dentro de um callback de requestAnimationFrame a cada movimento do rato: satisfeito abaixo de 180 pixels do centro do botão, carrancudo abaixo de 420, irritado abaixo de 700, furioso a partir daí. Sem aprendizagem automática, sem deteção de intenção — toda a gama emocional de um professor, reduzida a quatro limiares numéricos.
Uma regra que se sobrepõe à distância
O cálculo de distância tem uma cláusula de escape: pousa o cursor diretamente sobre o botão e ele deixa de avaliar a distância por completo e passa a celebrar, e esse estado mantém-se até saíres. Tem de se sobrepor a tudo o resto, porque o momento em que estás sobre o botão é o momento em que a opinião dele sobre ti deixa de ser relevante. Uma personagem que continuasse a deitar fumo enquanto estás a meio de um clique estaria a ler o sinal errado precisamente no instante em que o sinal deixou de importar.
O quiz da página tem um sistema de humor relacionado mas separado, baseado nas respostas em vez da posição do cursor. Uma sequência de duas respostas certas garante "satisfeito"; uma resposta errada faz subir em um um contador de escalada, com um limite de três, e cada resposta errada também repõe a sequência a zero. Três erradas seguidas e ele fica "furioso", com uma folha a tremer e uma tonalidade de ecrã que seguem ambas o mesmo contador. Acerta uma depois disso e o contador desce um degrau em vez de ser reposto de imediato — uma má sequência custa-te gradualmente, e uma boa sequência recupera-se da mesma forma.
A parte que tem de ficar desligada
Seguir cada movimento do rato para alimentar uma animação continuamente atualizada é exatamente o tipo de movimento que prefers-reduced-motion: reduce existe para desligar, por isso o listener que segue o cursor verifica essa definição uma vez, logo no início, e nunca chega a ser associado se ela estiver ativa. É um compromisso real, não gratuito: quem tem essa preferência ativada continua a ter os humores discretos — hover, foco, uma resposta errada no quiz continuam todos a acontecer — apenas perde a versão contínua de "ele está a ver-te aproximares". Escolhemos a versão que respeita a definição por completo em vez de uma que dilui o movimento e ainda assim entrega parte dele, porque uma definição respeitada "na maior parte" é uma definição que não é respeitada.
Do que ainda não temos a certeza
Uma metáfora de distância-a-um-botão para "envolvimento" é um palpite razoável e nada mais — alguém a ler a página com atenção, com o cursor estacionado num canto, não está desligado, só não está a ser corretamente seguido por uma fórmula que só percebe de pixels. Não medimos se o sistema de humor empurra alguém em direção à lista de espera ou se apenas é notado e recebe um sorriso uma vez. São resultados diferentes, e neste momento só temos provas do segundo.
Nada disto é currículo — é uma nota sobre como esta página de marketing foi construída, não algo sobre o qual a app faça perguntas. Se fórmulas de distância e event listeners são o tipo de coisa sobre a qual preferirias ser testado em vez de apenas ler, a disciplina de Informática da app cobre os blocos de construção mais simples por trás disto, a começar por Programação.