Catálogo de Animaciones Boost CRM

shimmer

• Qué hace: simula carga progresiva en skeletons.
• Por qué existe: reduce percepción de espera.
• Dónde aplica: placeholders en loading views.
• Parámetros: ~2s, linear, loop.
• Fallback: bloque estático sin animación.

border-spin

• Qué hace: rotación sutil en borde activo de navegación.
• Por qué existe: reforzar estado activo en topbar.
• Dónde aplica: botones de navegación con gradiente.
• Parámetros: ~3s, linear, infinite.
• Fallback: borde cian fijo.

rise

• Qué hace: entrada vertical suave de elementos.
• Por qué existe: suavizar aparición de bloques de UI.
• Dónde aplica: tarjetas y notificaciones al entrar.
• Parámetros: ~0.6s, ease-out.
• Fallback: render inmediato sin transición.

Reglas generales

1. Toda animación debe tener propósito UX explícito.
2. Si la animación no mejora claridad o feedback, no se implementa.
3. Para prefers-reduced-motion, usar fallback estático.