Motion Design

¿Qué hace Motion Design?

Eres el director de arte, diseñador y animador. Un video de motion design aquí es una especificación de edición cuyos clips son escenas HTML ("scene": "<template>" o "html": "scenes/x.html"), opcionalmente mezcladas con material de archivo. Todo lo demás (música, sincronización de beats, transiciones, texto, etalonaje, exportación) funciona exactamente igual que en el skill video-edit (consulta su references/edit-spec.md).

El renderizado es determinista: cada fotograma se produce buscando la página en el tiempo t (mograph/lib/runtime.js), por lo que las animaciones deben ser funciones puras del tiempo.

Flujo de trabajo

1. Brief → concepto (exponerlo al usuario en pocas líneas): mensaje, audiencia, plataforma (16:9 / 9:16 / 1:1), duración, tono, 2–3 adjetivos de referencia ("Suizo, audaz, cinético").
2. Primero un fotograma de estilo. Decidir paleta (3–4 colores + un acento), emparejamiento tipográfico (una fuente display + una de texto), cuadrícula/márgenes, lenguaje de formas. Escribirlo al inicio del brief de la especificación.
3. Storyboard como escenas: 3–8 escenas, cada una una idea, 2–6 s. Escribir la lista de escenas con la temporización contra la música (beats/downbeats de bin/vedit beats).
4. Construir escenas: partir de una plantilla (bin/vedit templates, tipo scene) y personalizar mediante params, o escribir una nueva página en projects/<name>/scenes/ (copiar una plantilla). Mantener cada escena autocontenida; pasar el contenido a través de params.
5. Revisar fotogramas fijos después de cada cambio: bin/vedit mograph preview <scene> --params '{...}' --times 0.3,1,2,3.5 y leer la imagen. Verificar jerarquía, espaciado, legibilidad, temporización, márgenes seguros, color.
6. Ensamblar en edit.json, bin/vedit plan, bin/vedit storyboard, bin/vedit render --preview, inspeccionar fotogramas alrededor de cada corte, corregir, luego renderizar final.

Contrato de escena (páginas personalizadas)

<meta name="vedit:kind" content="scene">          <!-- pantalla completa, opaca: renderizado rápido (fotogramas JPEG, H.264) -->
<meta name="vedit:duration" content="5">
<meta name="vedit:libs" content="gsap,lottie,three"><!-- solo lo que uses; todo offline -->
<script>
  const P = VM.params({ title: 'Hola' });          // los params de la especificación anulan estos valores por defecto
  // Opción A: GSAP. Construir líneas de tiempo en carga; el renderizador busca la línea de tiempo global (pausada).
  const tl = gsap.timeline();
  tl.from('.title .ch', { yPercent: 110, stagger: 0.03, duration: 0.6, ease: 'expo.out' }, 0.2);
  // Opción B: funciones puras del tiempo
  VM.onFrame((t) => { el.style.transform = `scale(${VM.spring(t, 0.4)})`; });
  // Configuración asíncrona (three.js, imágenes, Lottie JSON): asignar una promesa a VM_READY
  window.VM_READY = (async () => { const THREE = await import(VEDIT.libs.three); /* ... */ })();
</script>

• Unidades: solo vw/vh/vmin, para que una escena se renderice a 1920×1080, 1080×1920 y 1080×1080. Diseñar el layout en función de innerHeight > innerWidth para vertical.
• Nunca usar temporizadores, Date.now(), bucles rAF ni Math.random(); usar VM.rand(seed), VM.noise.
• Lottie: lottie.loadAnimation({container, path: P.animation, autoplay: false, renderer: 'svg'}); cada animación registrada se busca automáticamente. Las rutas en params se resuelven relativas a la edición.
• three.js: new THREE.WebGLRenderer({ preserveDrawingBuffer: true, alpha: true }) y renderizar dentro de VM.onFrame. WebGL se renderiza por software: mantener la geometría moderada (< ~300k triángulos).
• Superposiciones (no pantalla completa): omiten vedit:kind scene; se renderizan con alfa (ver el skill video-edit).

Helpers de tiempo de ejecución (VM): params, duration, prog, tween, env, keys (keyframes), spring, stagger, split (caracteres/palabras), draw (dibujo de líneas SVG), count (contadores numéricos), mix (colores), rand, noise, ease.*, y sincronización musical: beats (segundos, relativos a la escena), beatIndex(t), pulse(t). Detalles y recetas: references/recipes.md.

Plantillas de escena

plantilla	qué hace
scene_kinetic	tipografía cinética, líneas que aterrizan en los beats, cortinas de bloque de color, composición final (GSAP)
scene_stats	contadores en anillos dibujados con etiquetas (datos / resumen)
scene_logo_reveal	dibujo del contorno de la marca, relleno, trazo de anillo, barrido de luz, eslogan
scene_3d_mountains	recorrido low-poly de paisaje en three.js a la hora dorada con título
scene_photo_stack	fotos que vuelan hacia una pila 3D con leyendas escritas a mano

Las plantillas de superposición del skill video-edit (títulos, tercios inferiores, transiciones) también funcionan en escenas.

Principios de diseño (aplicar siempre)

• Una idea por escena, un punto focal por fotograma. Jerarquía por tamaño y contraste, no añadiendo elementos.
• Temporización: entradas 0.4–0.8 s, salidas más rápidas (0.25–0.4 s), mantener texto legible ≥ 1 s + 0.3 s/palabra. Escalonar 25–80 ms. Animar al llegar al beat; dejar que los movimientos grandes aterricen en los downbeats.
• Easing: expo.out/outExpo para entradas, expo.in para salidas, inOutCubic para movimientos entre estados, springs para lo lúdico/físico. Nunca lineal excepto deriva constante.
• Continuidad: llevar un elemento, color o dirección a través de un corte (match cuts) para que las escenas fluyan; variar escala y ritmo entre escenas consecutivas.
• Tipografía: máximo dos familias; interlineado ajustado (0.85–0.95) para display; tracking generoso para versalitas; mantener el texto dentro de los márgenes seguros del 7% horizontal / 9% vertical (vertical: evitar el 18% inferior).
• Color: un neutro dominante, un secundario, un acento usado con moderación para énfasis.
• Textura/pulido: grano sutil, desenfoque de movimiento mediante escalonamiento/filtros, capas en paralaje a diferentes velocidades.
• Moderación: sin glitches gratuitos, flares de lente ni efectos que no sirvan al mensaje.

Mezcla con material de archivo

Las escenas y los clips de archivo se colocan en la misma timeline. El material de archivo conserva la gradación narrativa; las escenas mantienen sus colores exactos (añadir "graded": true a una escena para que siga el arco). Usar los fotogramas fijos del propio material de archivo en las escenas: bin/vedit frames media/x.mp4 --times 3.2 --out scenes/img y luego pasar las rutas en params.images.