Actúa como un motion designer especializado en interfaces digitales. Define los principios de motion design para:
**Producto:** [NOMBRE_PRODUCTO]
**Plataforma:** [WEB/iOS/ANDROID]
**Personalidad de la marca:** [ADJETIVOS]
**Librería de animación:** [FRAMER_MOTION/CSS/LOTTIE/NATIVE]
**Restricciones de performance:** [MÓVIL_GAMA_BAJA/SIN_RESTRICCIONES]
Define:
**1. Propósito de las animaciones:**
Los 4 roles que las animaciones deben cumplir en este producto (orientar, dar feedback, conectar, deleitar).
**2. Tokens de animación:**
- Duración: escala de tiempos estándar (50ms, 100ms, 200ms, 300ms, 500ms) y cuándo usar cada uno
- Easing: las 3-4 curvas de easing de tu design system y para qué tipo de movimiento
- Distancia: rangos de desplazamiento para diferentes tipos de transición
**3. Microinteracciones obligatorias:**
Las 10 microinteracciones que toda UI debe tener (hover, press, loading, success, error, etc.) con los parámetros exactos.
**4. Transiciones de pantalla:**
Patrones de transición para: push, modal, tab switch, expand/collapse.
**5. Animaciones de carga:**
Skeleton screens, spinners y progress indicators: cuándo usar cada uno.
**6. Lo que NO animar:**
Elementos que no deben tener animación para no perjudicar la usabilidad.
**7. Performance:**
Propiedades CSS que se pueden animar sin jank (transform, opacity) y las que no (width, height, margin).