Mattttfb/ingeniería-de-animación

Ingeniería de Animación y Creación de Movimiento

Esta habilidad dota al agente de prácticas estándar de la industria, patrones listos para producción y modelos de física matemática para diseñar y codificar animaciones fluidas y de alto rendimiento en interfaces web y de aplicaciones.

---

1. Reglas de Oro del Rendimiento de Movimiento

1. Animar SOLO Propiedades Compuestas:
   • Siempre prefiere transform (translate3d, scale, rotate) y opacity.
   • NUNCA animes propiedades de geometría (width, height, top, left, margin, padding) a menos que uses la técnica FLIP (First, Last, Invert, Play). Animar geometría desencadena costosos recálculos de diseño (Reflow) y pintura en la CPU.
2. Promover a la GPU de Forma Responsable:
   • Usa will-change: transform, opacity; solo en elementos que se están animando activamente, y elimínalo después de que la animación se complete si la memoria es limitada.
   • Fuerza la composición de capas en la GPU con transform: translateZ(0) o backface-visibility: hidden cuando sea necesario.
3. Respetar la Accesibilidad del Usuario:
   • Siempre soporta @media (prefers-reduced-motion: reduce):

     @media (prefers-reduced-motion: reduce) {
       *, *::before, *::after {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
       }
     }
     

4. Tiempos y Duraciones Naturales:
   • Micro-interacciones (presión de botón, alternar, tooltip): 100ms - 200ms
   • Transiciones estándar (desplegables, diálogos, cajones, tarjetas): 200ms - 350ms
   • Transiciones de escena complejas / transiciones de página: 350ms - 500ms
   • Las animaciones más largas de 500ms se sienten lentas a menos que sean bucles de fondo atmosféricos continuos o narración de historias.

---

2. Matriz de Selección de Tecnologías

Escenario / Necesidad	Herramienta Recomendada	¿Por qué?
Estados simples de hover, focus, active, fundido/deslizamiento	Transiciones CSS & @keyframes o Tailwind CSS	Sin sobrecarga de JavaScript, aceleración por hardware a 120 FPS.
UI de React / Next.js, Modales, Transiciones de Diseño Compartido	Framer Motion (motion)	API declarativa, física de resorte, FLIP automático (layoutId), AnimatePresence.
Líneas de tiempo complejas, Morfismo SVG, UI impulsada por scroll	GSAP (GreenSock) + ScrollTrigger	Control de coreografía inigualable, depuración precisa, consistencia entre navegadores.
Experiencias 3D, Redes de Partículas, Shaders	Three.js / React Three Fiber / Canvas 2D	Renderizado directo con WebGL en GPU para cientos de miles de partículas.
Gráficos vectoriales animados e Ilustraciones de personajes	Lottie / dotLottie / Rive	Cargas útiles pequeñas en JSON/binario, fidelidad vectorial escalable, máquinas de estado interactivas.

---

3. Curvas de Movimiento (Tokens de Easing)

Nunca uses linear para movimiento en la UI a menos que simules una cinta transportadora de velocidad constante o un cargador giratorio infinito. El movimiento natural acelera y desacelera:

• Entrada rápida (Apertura/pop estándar de UI): cubic-bezier(0.16, 1, 0.3, 1) (Expo Out - ráfaga inicial rápida, desaceleración suave)
• Salida suave (Descartar/cerrar): cubic-bezier(0.7, 0, 0.84, 0) (Expo In - acelera fuera de la pantalla)
• Dinámico natural / Enfatizado: cubic-bezier(0.34, 1.56, 0.64, 1) (Rebote de sobrepaso sutil)
• Física de resorte (Preferida para toque y arrastre):
  • Rigidez (Stiffness): 300 - 400
  • Amortiguación (Damping): 25 - 35
  • Masa (Mass): 0.8 - 1.0

---

4. Guías Profundas y Referencias

Para patrones de código completos y tutoriales detallados, consulta las referencias:

• Referencia de Animaciones CSS & Tailwind
• Patrones de Framer Motion & Motion One
• Dominio de GSAP & ScrollTrigger
• Movimiento con Three.js & Canvas
• Principios de Movimiento UI y Accesibilidad

---

5. Lista de Verificación

Al construir componentes animados:

• ¿Las animaciones son suaves (60-120 FPS) sin tartamudeo ni caídas de fotogramas?
• ¿Se evitan los cambios de diseño (CLS) durante la animación?
• ¿Las animaciones de salida se esperan correctamente antes de desmontar el elemento?
• ¿La UI maneja clics/toques rápidos sin fallos (animaciones interrumpibles)?
• ¿Está implementado prefers-reduced-motion?