O scroll monta a cena; o ponteiro adiciona resposta local.
Técnica da Aula 22 Ainda não homologado
Efeitos que respondem à posição do mouse, não ao scroll: um cursor customizado que cresce sobre elementos clicáveis, um botão que "gruda" levemente no ponteiro, e um cartão que se inclina em 3D seguindo o movimento do mouse.
Ainda não faz parte dos dois arquivos que você instala. O código abaixo mostra a lógica real usada — para usar hoje, copie também o comportamento, não só o HTML.
Um cursor redondo segue o ponteiro e cresce ao passar por cima de algo clicável. O cartão se inclina seguindo a posição do mouse, como se tivesse profundidade real.
O scroll monta a cena; o ponteiro adiciona resposta local.
As três interações seguem a mesma lógica: medir a posição do ponteiro em relação ao centro do elemento, e transformar essa distância em movimento ou rotação pequenos.
const x = ponteiroX - centroX;
const y = ponteiroY - centroY;
botao.style.transform = `translate(${x * .28}px, ${y * .28}px)`;
// ao sair do botão: botao.style.transform = "";cartao.style.transform = `perspective(700px)
rotateX(${(1 - progresso) * -18}deg)
rotateY(${lateral * 12}deg)`;Movimente pouco. A regra da aula original: teste com teclado, toque e movimento reduzido antes de publicar — em celulares, cursor customizado e magnetismo simplesmente não fazem sentido (não existe "mouse pairando"), então o botão precisa continuar funcionando normalmente sem eles.