Microinteracciones

El criterio: causa y efecto, nunca decoración

Cada pieza de esta página responde a algo que hizo el visitante: pasar el cursor, hacer clic, llegar con el scroll. Esa es la línea que separa la microinteracción del adorno — el movimiento que responde comunica («te oí, esto es pulsable, esto cambió»); el movimiento porque sí distrae. Si una animación no responde a nada, esta página no la incluye.

Cómo usarlas

1. Las tres primeras son CSS puro: copia y listo. Las demás llevan su fragmento de JS al lado — vanilla, corto y sin dependencias.
2. No las apiles: una tarjeta que se eleva o se inclina o brilla. Dos efectos a la vez ya son ruido.
3. Respeta lo que ya viene puesto: todas comprueban prefers-reduced-motion y se apagan para quien pidió calma. No lo quites al adaptar.

Por qué el modal es un <dialog> y no un div

El elemento <dialog> con showModal() trae resuelto lo que los modales caseros llevan una década haciendo mal: atrapa el foco dentro, se cierra con Escape, oscurece el fondo con ::backdrop y devuelve el foco al botón que lo abrió. El JS de la receta son ocho líneas porque el navegador hace el trabajo pesado — comparado con las cien líneas del modal artesanal, no hay debate.

Dónde encajan

• Galerías y portafolios: elevación o tilt en las piezas, luz de cursor en la destacada.
• Cifras de negocio: el contador animado en la sección de logros — una vez, al entrar en pantalla.
• Confirmaciones y avisos: el modal nativo para decisiones que merecen foco completo.
• Botones principales: el ripple da confirmación táctil del clic, especialmente en pantallas táctiles.

Las demás categorías

La familia completa, cada una con sus piezas y su código: formas y recortes, vidrio y neón, bento grid, botones y controles, tarjetas, formularios y datos y métricas. Y si buscas generadores en vez de piezas hechas, están en Código web.

Preguntas frecuentes

¿Qué es exactamente prefers-reduced-motion y por qué importa?

Es una preferencia del sistema operativo donde una persona pide menos movimiento, a menudo por mareo o trastornos vestibulares. Todas estas recetas la comprueban y desactivan la animación cuando está activa. Ignorarla no es un detalle estético: es dejar fuera a gente real.

¿Las interacciones con JS funcionan en móvil?

El ripple y el modal, perfectamente. El tilt y la luz de cursor dependen del puntero, así que en táctil simplemente no se activan — la pieza se ve como una tarjeta normal, que es la degradación correcta.

¿El tilt 3D afecta al rendimiento?

Es barato porque solo anima transform, que el navegador compone en la GPU sin recalcular el layout. La receta añade will-change: transform como pista. Evita aplicarlo a decenas de elementos a la vez: uno o dos protagonistas.

¿Por qué el contador usa IntersectionObserver?

Para animarse cuando el elemento entra en pantalla y solo una vez. Sin el observador, el contador correría al cargar la página aunque estuviera tres pantallas más abajo, y nadie lo vería subir.

¿Puedo cambiar la duración de las animaciones?

Sí, y hay una guía corta: las respuestas al hover funcionan entre 150 y 300 ms; los volteos y transiciones grandes, hasta 600 ms. Por encima de eso la interfaz empieza a sentirse lenta en vez de fluida.

¿El dialog nativo funciona en todos los navegadores?

En todos los modernos desde 2022, con foco atrapado, Escape y ::backdrop incluidos. Es hoy la forma recomendada de hacer modales, y la razón de que el JS de la receta sea tan corto.