Las microinteracciones son el alma de una interfaz. En el portal de miembros de Astral, cada tarjeta tiene un hover sutil: la sombra se expande, el borde se ilumina en un tono lavanda, los números de stats hacen un conteo animado.
Pequeños gestos, gran impacto
No se trata de llamar la atención a gritos, sino de recompensar la curiosidad del usuario. Cuando alguien interactúa con tu diseño, debe sentir que el sistema le responde.
Reglas para microinteracciones mágicas:
- Duración: 300ms — ni tan rápido que pase desapercibido, ni tan lento que frustre
- Easing:
cubic-bezier(0.4, 0, 0.2, 1)— movimientos orgánicos, no robóticos - Propósito: cada animación debe comunicar algo (éxito, carga, disponibilidad)
Usa transiciones CSS suaves y evita el !important en animaciones. La magia está en la sutileza: como una estrella que parpadea, no como un fogonazo.