← Volver al inicioZimplia Suite · Fase 1.4

Movimiento

La capa de animaciones y microinteracciones: transiciones, entradas escalonadas, contadores, carga premium y feedback táctil. Fluida, a 60fps y respetuosa con prefers-reduced-motion.

01 · Tacto

Microinteracciones

Hover/press con resplandor neón y leve escala. Los botones ya lo traen; la primitiva Pressable lo aporta a cualquier elemento.

02 · Métricas

Contadores animados

AnimatedNumber cuenta de forma ascendente al entrar en pantalla, con formato de moneda colombiana. Datos de demostración.

Ventas de hoy
$ 0
Demostración · cuenta al cargar
Pedidos
0
Demostración · cuenta al cargar
Clientes nuevos
0
Demostración · cuenta al cargar
03 · Secuencia

Entrada escalonada

Las listas y grids aparecen en cascada con fade + deslizamiento. Pulsa Repetir para reproducir la animación.

Catálogo
Inventario
Pedidos
Clientes
Reportes
Ajustes
04 · Carga

Skeletons y overlay con glow

Esqueletos con shimmer mientras llegan los datos y un overlay de carga con halo cian discreto.

Contenedor con overlay de carga. Pulsa “Simular carga”.

05 · Overlays

Diálogos, paneles y toasts

Aparición y desaparición coordinadas con Radix (Dialog, Sheet) y notificaciones (Sonner) con entrada/salida suave.

06 · Vacío

Estado vacío con vida

Patrón reutilizable: entra con fade + deslizamiento y un halo neón que late alrededor del icono.

Sin movimientos todavía

Cuando registres pagos, aparecerán aquí con todo su detalle.

07 · Rutas

Transición de página

Cada sección del shell entra con un fade + deslizamiento sutil. Navega por la app para verlo en vivo.

Reveal al hacer scroll
Entrar a la app