Principios de Motion Design para UI

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).