Rover54/Videocut

Principios de Movimiento

Decide cómo debe moverse algo para que se sienta correcto, independientemente de la herramienta utilizada para construirlo. Esta habilidad responde a cuestiones de timing, easing, espaciado, peso y ritmo. No elige un stack tecnológico; produce números concretos (duraciones, curvas cubic-bezier, desfases de escalonamiento, configuraciones de resorte) listos para ser entregados a cualquier implementación.

Cuándo usarlo

• El movimiento se siente rígido, flotante, mecánico, robótico o barato y necesita diagnóstico.
• Elegir la duración, la curva de easing y el desfase de escalonamiento de un clip o transición.
• Revisar si el movimiento respeta la intuición física (peso, seguimiento, arcos).
• Sincronizar fotogramas clave con un ritmo musical o un acento de edición.

Tres pilares: resuelve estos antes de cualquier número

Cada pieza de movimiento debe responder tres preguntas antes de elegir una duración o curva. Si las omitas, obtienes un movimiento técnicamente correcto pero que no se siente como nada. Estos son el vocabulario compartido al que el resto de la colección se refiere.

Pilar	La pregunta	Lo que impulsa
Intención emocional	¿Qué debería sentir el espectador? (alegría, calma, urgencia, confianza, elegancia)	Easing, duración, amplitud/overshoot
Narrativa visual	¿Cuál es la micro-historia? Planteamiento → acción → resolución	Secuenciación, puesta en escena, qué entra y cuándo
Arte del movimiento	¿Cómo lo hacemos creíble?	Física, movimiento secundario, arcos, seguimiento

Tres capas de movimiento: profundidad, no planitud

Movimiento plano = solo lo principal se mueve. El movimiento creíble ejecuta tres capas a la vez:

• Primario — la acción principal que sigue el ojo (el movimiento héroe).
• Secundario — riqueza de apoyo que reacciona al primario (una sombra que se desplaza, un icono que se ajusta, una etiqueta que se asienta tarde).
• Ambiental — vida de fondo que nunca exige atención (deriva lenta de degradado, un pulso de bajo contraste).

La capa de juicio (motion-art-direction) llama a estos Héroe / Apoyo / Textura — las mismas tres capas, clasificadas por lo que merece movimiento. Primario≈Héroe, Secundario≈Apoyo, Ambiental≈Textura.

Principios básicos

Easing es la palanca más importante

El movimiento lineal se lee como robótico. Reserva linear solo para bucles continuos (spinners, marquesinas, desplazamiento infinito). Todo lo que el ojo perciba como un evento discreto necesita aceleración.

Empareja la curva con la acción:

• Entrar / aparecer -> ease-out (inicio rápido, asentamiento suave). El objeto llega con energía y desacelera hasta su lugar. cubic-bezier(0.16, 1, 0.3, 1).
• Salir / desaparecer -> ease-in (inicio suave, final rápido). El objeto se acelera para irse. cubic-bezier(0.7, 0, 0.84, 0).
• Mover / reposicionar (permanece en pantalla) -> ease-in-out (simétrico). cubic-bezier(0.65, 0, 0.35, 1).
• Juguetón / de marca -> ligero overshoot. cubic-bezier(0.34, 1.56, 0.64, 1) (el 1.56 supera el 1.0, creando un overshoot y asentamiento que se lee como "peso").

Regla general: el ojo perdona un inicio lento mucho menos que un final lento. En caso de duda, desacelera hasta el reposo.

Dar forma manual al easing (After Effects). Al animar por fotogramas clave en lugar de proporcionar una curva, los mismos principios se aplican al Editor de Gráficos: da forma al Gráfico de Velocidad para que los extremos se aplanen hacia cero y empuja la influencia de desaceleración al 80-90% para un lanzamiento rápido y un asentamiento suave. F9 (Easy Ease) es solo un punto de partida simétrico del 33% — hazlo asimétrico. Consulta references/easing-graph-editor.md para leer el Editor de Gráficos, técnicas de manejo e influencia, y recetas paso a paso de overshoot, anticipación y rebote (incluyendo una expresión de rebote decreciente).

El timing comunica peso e importancia

Elemento	Duración
Microinteracción (hover, toggle, feedback táctil)	100-200ms
Transición de interfaz (panel, modal, región de página)	200-400ms
Elemento héroe / grande / pantalla completa	400-800ms
Movimiento de cámara cinematográfico	800-2000ms

La distancia y el tamaño escalan la duración. Un icono pequeño que se mueve 20px y un panel a sangre que se mueve 800px NO deben compartir una duración: el panel necesita más tiempo o parecerá ingrávido. Una escala práctica: mantén la velocidad percibida aproximadamente constante añadiendo un ~30-50% de duración cuando la distancia o el área se dupliquen aproximadamente. Los objetos pesados comienzan lentamente y overshootean menos; los objetos ligeros se mueven rápido y pueden rebotar.

El espaciado y el escalonamiento crean ritmo

Nunca reveles una lista, cuadrícula o grupo de una sola vez: se lee como un evento único y plano. Escalona el inicio de cada elemento hijo.

• Listas / elementos secuenciales: 40-80ms entre elementos.
• Cuadrículas densas: 20-40ms (más elementos, menos retardo por elemento, o la cola se arrastra).
• Limita la revelación total a aproximadamente 600-800ms para un grupo; si recuento * desfase supera eso, reduce el desfase o cambia a un escalonamiento basado en distancia (los elementos más alejados de un punto de origen comienzan más tarde).
• La dirección del escalonamiento debe seguir al ojo: de arriba a abajo, o radiando desde un punto focal.

La regla del 1/3 (dos formas, ambas universales):

• Distancia — ningún elemento recorre más de ~1/3 de la pantalla sin un fotograma clave intermedio o un cambio de escala/opacidad. Los deslizamientos largos e ininterrumpidos se leen como "la plantilla se movió", no como "algo sucedió".
• Simultaneidad — con 3+ elementos, mantén no más de ~1/3 en movimiento activo a la vez. El resto se mantiene o se mueve como ambiental. Todo moviéndose junto = ruido sin punto focal.

Anticipación y seguimiento venden el movimiento físico

• Anticipación: un pequeño contramovimiento antes de la acción principal (un botón baja scale 0.95 antes de reventar, un personaje se agacha antes de saltar). 60-120ms es suficiente.
• Seguimiento / acción superpuesta: las partes traseras continúan moviéndose después de que el cuerpo principal se detiene (una tarjeta héroe aterriza, luego su sombra y etiqueta se asientan 40-80ms después). Escalona el asentamiento de los elementos adjuntos en lugar de detener todo en el mismo fotograma.
• Arcos: curvas de movimiento naturales; la traducción en línea recta pura de un objeto orgánico parece mecánica. Añade un ligero arco a x/y o anima una trayectoria.

Sincronización con el ritmo y ritmo

Cuando el movimiento acompaña al audio, coloca los fotogramas clave de impacto (un golpe, un corte, una revelación) en el tiempo fuerte, no entre tiempos. A 120 BPM, un tiempo fuerte es de 500ms; una cuadrícula de corchea es de 250ms. Cuantiza los momentos clave a esa cuadrícula. Para ediciones sin música, establece un pulso visual (por ejemplo, un evento importante cada ~500-800ms) para que la pieza respire de manera consistente.

Movimiento basado en resorte vs. basado en duración

Los resortes (masa / rigidez / amortiguación) autodeterminan la duración y se sienten más físicos para movimientos interactivos e interrumpibles (arrastrar-soltar, gestos). Duración+easing es mejor para secuencias coreografiadas y bloqueadas en la línea de tiempo (video, revelaciones vinculadas al desplazamiento) donde la sincronización exacta importa. Un resorte rápido predeterminado: stiffness 300, damping 30, mass 1. Consulta references/easing-curves.md para una tabla completa de resortes.

Diagnóstico de fallos comunes

• Se siente rígido/robótico -> usando linear o easing simétrico en una entrada; cambia a ease-out.
• Se siente flotante/lento -> duración demasiado larga o ease-out demasiado suave; reduce la duración un 30%, afila la curva.
• Se siente barato/entrecortado -> todo aparece a la vez (sin escalonamiento), o todos los elementos comparten una duración independientemente del tamaño.
• Se siente mecánico a pesar del easing -> sin anticipación, sin seguimiento, trayectorias en línea recta; añade arcos y superposición.

Referencia rápida

Necesidad	Usar
Entrada	cubic-bezier(0.16, 1, 0.3, 1), 300-500ms
Salida	cubic-bezier(0.7, 0, 0.84, 0), 200-300ms
Movimiento	cubic-bezier(0.65, 0, 0.35, 1), 300-400ms
Pop de marca	cubic-bezier(0.34, 1.56, 0.64, 1), 400-600ms
Escalonamiento de lista	40-80ms por elemento, tope ~700ms total
Solo bucle	linear

Archivos de referencia

• references/easing-curves.md — biblioteca de cubic-bezier nombrada con valores exactos, configuraciones de resorte (Framer/react-spring/iOS) y guía de duración por tipo de elemento.
• references/easing-graph-editor.md — arte del Editor de Gráficos de After Effects: gráfico de velocidad vs gráfico de valor, manejadores de easing y números de influencia/velocidad, y recetas paso a paso de snappy, overshoot, anticipación y rebote.
• references/twelve-principles.md — los 12 principios de Disney, cada uno con un ejemplo numérico concreto de gráficos en movimiento.