motion-graphics

Gráficos en Movimiento

Eres el director, el diseñador y el editor. El trabajo es un cortometraje que se ve intencional: un estilo, una historia clara, movimiento que significa algo y un archivo que se reproduce en todas partes.

Todo se maneja con una herramienta, scripts/mg.py, y un pequeño tiempo de ejecución, assets/mg.js. Una película es una página HTML de escenas; cada fotograma se calcula únicamente a partir del tiempo, por lo que un render es idéntico en cada ejecución.

Requiere Python 3.8+, pip install playwright pillow, python -m playwright install chromium y ffmpeg. Verifica esto primero; pregunta antes de instalar cualquier cosa.

El flujo de trabajo

Sigue los pasos en orden. Los pasos 1 y 2 son una conversación; no renderices antes de que el estilo y el storyboard estén acordados, a menos que el usuario diga «solo hazlo».

1. Briefing: pregunta solo lo que falte

Decisión	Valor predeterminado si no se indica
Mensaje: lo único que el espectador debe recordar	preguntar; nunca adivinar esto
Dónde se reproduce → formato	16:9 para YouTube/web/diapositivas · 9:16 para Reels/Shorts/TikTok · 1:1 o 4:5 para feeds
Duración	15–30 s redes sociales · 30–60 s lanzamiento · 60–90 s explicativo
Marca: colores, fuentes, logotipo	elegir un estilo, luego modificar su acento
Sonido: música, locución, silencio	borrador en silencio primero; debe funcionar sin sonido de todas formas

2. Estilo: deja que el usuario elija

python scripts/mg.py styles                          # los 16 estilos, con su personalidad de movimiento
python scripts/mg.py pick styles.png --format 9:16 --title "Su titular"

pick renderiza el propio titular del usuario en todos los estilos en una sola hoja. Muéstrala y pregunta cuál quiere. Si no tiene opinión, recomienda uno de esta tabla y di por qué en una frase.

La película es…	Comienza con
Lanzamiento de producto o función, interfaz	saas-glass, clean-minimal, sunset-gradient
Clip social basado en gancho, hype, palabras grandes	bold-kinetic, neo-brutal, sunset-gradient
Números, informe, resumen del año	data-story, corporate
Historia, ensayo, cita, documental	editorial, cinematic-dark, paper-craft
Herramienta para desarrolladores, CLI, arquitectura	mono-terminal, blueprint, neon-cyber
Marca premium, invitación, propiedad	luxury, cinematic-dark
Infantil, educativo, celebración	playful, paper-craft
Retro, videojuegos, música	retro-vhs, neon-cyber

Un estilo es color + tipografía + cómo se mueven las cosas (entrada, easing, velocidad, transición). Mezclar dos estilos en una misma película parece un error. Para una apariencia de marca, escribe un pequeño JSON que extienda un estilo; consulta references/styles.md.

3. Storyboard: escríbelo antes de cualquier HTML

Escribe storyboard.json: una lista ordenada de escenas. Una idea por escena, 12 palabras o menos en pantalla, la primera escena es el gancho.

{"scenes": [
  {"type": "title",   "kicker": "Semana de lanzamiento", "title": "Despliega más rápido con *Orbit*", "subtitle": "Despliegues que a tu equipo le gustarán"},
  {"type": "bullets", "title": "Tres cosas cambian", "items": ["Un comando", "Rollbacks de 4 segundos", "Previsualizaciones por rama"]},
  {"type": "stat",    "kicker": "Despliegue mediano", "value": 4.2, "suffix": " s", "label": "bajó de 3 minutos"},
  {"type": "bars",    "title": "Despliegues por semana", "items": [{"label": "Antes", "value": 12}, {"label": "Después", "value": 58}]},
  {"type": "cards",   "title": "Construido para equipos", "items": [{"title": "Seguro", "text": "SSO y registro de auditoría"}]},
  {"type": "quote",   "text": "Dejamos de temer los *viernes*. ", "by": "Jefe de Plataforma"},
  {"type": "end",     "title": "Prueba *Orbit* hoy", "cta": "orbit.example"}
]}

*palabra* marca la palabra acentuada. La duración de la escena se calcula a partir de las palabras a menos que indiques "dur". Cualquier escena puede ser {"type": "html", "html": "…", "dur": 4} para marcado personalizado. Muestra el storyboard al usuario como una tabla breve (escena · en pantalla · segundos) y obtén una confirmación.

4. Construir

python scripts/mg.py new film --style saas-glass --format 16:9 --storyboard storyboard.json --accent "#ff5a1f"

Esto escribe film/index.html, film/theme.css y film/mg.js. Abre index.html en un navegador para una vista previa en vivo con un secuenciador. Luego edita el HTML manualmente para dirigirlo: reordena beats, cambia una entrada, agrega un gráfico o SVG. La referencia de atributos — animaciones, easings, transiciones, movimientos de cámara, bucles, código de canvas personalizado — está en references/authoring.md. Léeala antes de editar a mano.

Reglas que mantienen un render exacto (el linter las aplica):

• El movimiento proviene solo de atributos data-* o callbacks MG.frame(t) / MG.scene(). Sin transition/animation CSS, sin temporizadores, sin Date.now(), sin Math.random() — usa MG.rand(seed).
• Las fuentes, imágenes y scripts residen en la carpeta del proyecto. Un render que necesita la red no es repetible.
• El metraje no se renderiza aquí. Renderiza gráficos con --alpha y superponlos sobre el clip (paso 6).

5. Mira antes de renderizar

python scripts/mg.py lint film                 # determinismo, nombres desconocidos, tiempo de lectura, pausas largas
python scripts/mg.py sheet film sheet.png      # hoja de contacto + informe de texto fuera de cuadro / recortado / superpuesto

Abre la hoja y mírala. Compárala con references/motion-craft.md (jerarquía, áreas seguras, un foco por fotograma). Corrige, vuelve a ejecutar, repite. Renderizar es el paso lento; la hoja toma segundos.

6. Renderizar

python scripts/mg.py render film draft.mp4 --scale 0.5            # borrador rápido para juzgar el ritmo
python scripts/mg.py render film draft.mp4 --scale 0.5 --range 4-9  # solo la parte que cambiaste
python scripts/mg.py render film final.mp4 --audio music.mp3      # calidad completa, música con fade out al final
python scripts/mg.py render film lower-third.mov --alpha          # ProRes 4444 transparente (o .webm)
python scripts/mg.py render film loop.gif --scale 0.4             # GIF para chat y documentación

Muestra el borrador, toma notas, cambia, vuelve a renderizar el rango modificado. Un solo render de calidad completa al final. Para poner gráficos transparentes sobre metraje:

ffmpeg -i clip.mp4 -i lower-third.mov -filter_complex "[0][1]overlay=0:0:enable='between(t,2,7)'" -c:v libx264 -crf 18 -pix_fmt yuv420p -c:a copy out.mp4

Sonido, sincronización de locución y subtítulos: python scripts/mg.py cues film cues.json lista cada escena y tiempo de inicio de animación; úsalo para colocar efectos de sonido y subtítulos con precisión. Consulta references/sound-and-captions.md.

7. Verificar, luego entregar

python scripts/mg.py check final.mp4 --project film

Confirma el tamaño, la velocidad de fotogramas, la duración, el códec y el formato de píxeles según el proyecto, y advierte sobre pausas muertas (sin movimiento), fotogramas negros, recortes o audio casi silencioso. Entrega solo después de que aparezca OK. Dale al usuario el archivo, una línea de datos (duración, tamaño, estilo) y qué puede pedir cambiar.

Nivel de calidad: verifica cada película con esto

1. Gancho en los primeros 2 segundos. Algo legible y en movimiento antes del fotograma 15.
2. Un foco por fotograma. Si dos cosas entran juntas, son un solo grupo.
3. Legible sin sonido, en un teléfono. El texto del cuerpo ≥ 4% del lado corto; mantenerse ≈ 0.4 s + 0.16 s por palabra después de la última entrada.
4. Nada permanece completamente inmóvil durante más de ~2.5 s — las escenas llevan un movimiento de cámara lento por defecto; consérvalo.
5. Las entradas son rápidas, las salidas más rápidas, las pausas honestas. Entrar 0.3–0.8 s, salir aproximadamente el 70% de eso.
6. Escalonar, no estampida. 0.04–0.1 s entre elementos hermanos; escalonamiento total por debajo de ~0.8 s.
7. Un lenguaje de transición por película; un segundo solo para el gran momento.
8. Áreas seguras. 5% desde cada borde; en 9:16 mantener el 20% inferior y el 12% superior libres de texto.
9. Termina en la acción — el fotograma final nombra qué hacer a continuación y se mantiene ≥ 1.5 s.

Cuando otro motor se adapta mejor

mg.py cubre tipografía, diseño, gráficos, estilo de interfaz y superposiciones transparentes sin paso de compilación. Cambia cuando el trabajo sea otra cosa: references/engines.md tiene los comandos, licencias y compensaciones:

Necesidad	Usa
Componentes React, lotes basados en datos, un proyecto Remotion existente	Remotion (ten en cuenta su licencia de empresa)
Líneas de tiempo GSAP, clips de video/audio dentro de la composición, HTML orientado a agentes	HyperFrames (Apache-2.0)
Matemáticas, ecuaciones, geometría, visualizaciones algorítmicas	Manim Community
Animación TypeScript creada a mano con un editor	Motion Canvas
Animación que se integra dentro de una app o sitio	Lottie / CSS / GSAP — no un video
Escenas 3D, shaders	Three.js controlado desde MG.frame(t), o Blender
Cortar metraje, presentaciones, subtítulos en un clip	la habilidad video-making

Nunca migres un proyecto funcional a otro motor sin que te lo pidan.

Archivos de referencia: carga solo lo que la tarea necesite

Archivo	Léelo cuando
references/authoring.md	editar escenas a mano; cualquier atributo, easing o nombre de transición; código de canvas/SVG personalizado
references/styles.md	elegir, mezclar o crear un estilo; colores y fuentes de marca
references/motion-craft.md	juzgar una hoja de contacto o borrador; ritmo, jerarquía, tipografía, errores comunes
references/sound-and-captions.md	música, efectos de sonido, sincronización de locución, subtítulos, volumen
references/engines.md	Remotion, HyperFrames, Manim, Motion Canvas, Lottie, 3D
references/recipes.md	patrones listos: tercio inferior, secuencia de logotipo, línea de letras cinética, carrera de gráficos, maqueta de interfaz, cuenta atrás, tarjeta final

Límites honestos

• Las fuentes recurren a lo que tenga la máquina. Para una coincidencia exacta, coloca los archivos de la fuente en el proyecto y declara @font-face (verifica primero la licencia de la fuente).
• Un borrador a --scale 0.5 juzga el ritmo, no la nitidez.
• Las comprobaciones detectan fallos mecánicos; el gusto aún necesita ojos. Mira siempre la hoja y el borrador tú mismo y di lo que viste, no lo que supones.
• Usa solo recursos que el usuario posea o que estén licenciados para su uso; anota la fuente y la licencia de todo lo que incorpores.