Efectos con el ratón

Mueve el cursor por los paneles · todo con getBoundingClientRect y variables CSS

🖐️ Estás en un dispositivo táctil o tienes activado "reducir movimiento": los efectos se muestran en estático.

Inclinación 3DrotateX(--rx) rotateY(--ry)
🪐

Perspectiva

perspective en el padre crea el espacio 3D

🧊

Profundidad

translateZ separa cada capa

✨

Brillo

un radial-gradient sigue al cursor

Spotlight--x / --y

Ilumina lo que importa

Un radial-gradient y una máscara que siguen al ratón.

Borde con brillomask-composite: exclude
⚡

Sin librerías

Unas líneas de JS escriben variables CSS. El navegador pinta el resto.

🎯

Coordenadas relativas

clientX − rect.left: la posición del cursor dentro de cada tarjeta.

🧩

Una vez por frame

Leemos y escribimos el DOM dentro de requestAnimationFrame.

Botones magnéticostranslate