Movimiento
El movimiento explica un cambio de estado. Si no explica nada, sobra.
Reglas
- Hover: solo transiciones de color. Las tarjetas clickeables pasan de
shadow-smashadow-md; los botones bajan 1 px al presionarse. - Indicador de tabs, check de guardado y entrada direccional de popovers con
motion/react, siempre conuseReducedMotion. - Diálogos y sheets usan las transiciones CSS de Base UI (
data-starting-style/data-ending-style). - Nada de loops decorativos, marquesinas ni cursores personalizados.
- Cargas con skeletons que tienen la forma del contenido final; spinners solo dentro de botones.
Momentos pixel
La única excepción. Personajes pixelados chiquitos en estados vacíos, éxito del formulario, alertas, niebla y Nubi. Un solo momento por pantalla, nunca en tablas, gráficos o toasts. Se pausan fuera de pantalla y con prefers-reduced-motion muestran el cuadro final.