Gráficos en movimiento y títulos

Recetas para piezas construidas a partir de formas, imágenes fijas y texto. Se insertan en el bucle de montagent en el paso de construcción; carga montagent primero si aún no lo has hecho.

Abre el archivo de referencia para el tipo de pieza antes de planificarla:

La pieza	Abrir
Anuncio de lanzamiento, anuncio de producto o social, intro, outro	la estructura de anuncio de lanzamiento
Revelación de logotipo, ráfaga de logotipo, cualquier cosa que haga bucle	el bucle de logotipo
Tráiler, o cualquier efecto impactante, con glitch, intermitente o HUD	efectos de tráiler

Para una pieza nueva o un rediseño, lee dirección creativa antes de elegir la disposición. Cubre conceptos visuales, composición y coreografía en Montagent nativo. Para una edición específica, lee solo la receta relevante y conserva la dirección existente.

Planifica en una hoja de ritmos

Antes de escribir un elemento, escribe la hoja de ritmos: cada entrada, cambio de color, corte y salida en una tabla, cada uno en un ritmo de la cuadrícula que proporciona montagent-craft (su tempo, tiempo fuerte, ajuste de fotogramas y qué eventos van en los ritmos).

Construye el proyecto con un script generador a partir de la hoja de ritmos, de modo que un cambio de tiempo sea una edición de una línea.

Recetas

Cada receta proporciona rangos iniciales, no respuestas. Cada una termina con un paso de revisión: carga montagent-craft, luego mira donde dice el paso antes de continuar.

Pop

Una entrada con un pequeño rebasamiento que se estabiliza. El rebasamiento es la curva: un par de fotogramas clave con una bezier cuyo y supera 1, no tres fotogramas clave.

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 2000, "output": "out/pop.mp4",
  "tracks": [
    {"name": "badge", "layer": 10, "elements": [
      {"id": "badge", "type": "ellipse", "start": 500, "end": 2000, "x": 960, "y": [{"t": 500, "v": 580}, {"t": 900, "v": 540, "ease": [0.34, 1.56, 0.64, 1]}], "origin": "center", "width": 240, "height": 240, "fill": "#FF5A36", "scale": [{"t": 500, "v": [0.5, 0.5]}, {"t": 900, "v": [1.0, 1.0], "ease": [0.34, 1.56, 0.64, 1]}]}
    ]}
  ]
}

Duración: 300–450 ms. Los snaps son más cortos, los flotadores más largos.
Escala inicial: 0.5–0.7 para texto y tarjetas; 0 para formas pequeñas y distintivos.
Rebasamiento: [0.34, 1.56, 0.64, 1] alcanza un pico aproximadamente un 10 % por encima. Aumenta su segundo número a 1.8 para algo divertido, o bájalo a 1.3 para algo corporativo. Mantén una curva para cada pop en una pieza.
Elevación: 20–60 px de desplazamiento en y con la misma curva añade peso. Omítelo en pops que se sientan en una fila.
Escalonamiento: un ritmo cuando cada elemento aterrice en su propio ritmo; 60–120 ms entre elementos dentro de un mismo ritmo.
Revisión: frame al inicio más el 40 % de la duración, donde alcanza el pico el rebasamiento, y comprueba que nada corte el borde del fotograma o un vecino. Luego preview un tramo desde justo antes del primer pop hasta justo después del último.

Mantener, luego limpiar

El último fotograma clave de una entrada ya se mantiene, por lo que un mantener no cuesta nada. Una salida comienza con un fotograma clave en el valor mantenido, en el momento en que comienza la salida. validate reporta ese fotograma clave como R-EASE-INERT, y la guía de hallazgos explica por qué es esperado.

Duración de salida: 200–350 ms, ease-in. Las salidas son más rápidas que las entradas.
Movimiento de salida: un fundido más 20–40 px de desplazamiento, o escalado hacia abajo a 0.9. Para un corte duro, usa un solo fotograma clave step para el nuevo valor (consulta el proyecto de inicio de título).
Duración de mantenimiento: el tiempo de lectura que da montagent-craft.
Agrupar salidas: todo el grupo se va junto, o escalonado 30–60 ms en orden de lectura.
Revisión: frame en el último fotograma dibujado antes de la salida, y comprueba que todo el grupo esté completamente dentro y en reposo.

Cambio de color en una palabra

Vuelve a colorear una palabra dentro de su línea con un highlight en la ejecución de esa palabra, comenzando en el ritmo. Esto mantiene un elemento: no hay una segunda copia para fundir, y el color propio del elemento sigue siendo el color de la línea.

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 3000, "output": "out/accent.mp4",
  "fonts": {"title": [{"file": "fonts/Inter-Bold.ttf"}]},
  "fontVendor": {"fonts/Inter-Bold.ttf": {"licence": "OFL-1.1", "source": "https://github.com/rsms/inter", "sha256": "288316099b1e0a47a4716d159098005eef7c0066921f34e3200393dbdb01947f"}},
  "tracks": [
    {"name": "line", "layer": 20, "elements": [
      {"id": "line", "type": "text", "start": 0, "end": 3000, "x": 960, "y": 540, "origin": "center", "width": 1600, "height": 140, "font": "title", "size": 110, "color": "#F5F0E6", "align": "center", "runs": [{"text": "Video que tu agente puede "}, {"text": "leer.", "highlight": {"start": 2000, "end": 3000, "color": "#FF5A36"}}], "caption": false}
    ]}
  ]
}

Temporización: el cambio aterriza en un ritmo, nunca en la entrada de la palabra. Dale al ojo al menos medio ritmo para leer la palabra primero.
Énfasis: cuando la palabra es su propio elemento, un pequeño aumento de escala en el mismo ritmo (1.0 a 1.06–1.1 y de vuelta en 200–300 ms) hace que el cambio se asiente.
Revisión: frame un fotograma antes y un fotograma después del cambio, y comprueba que solo la palabra cambió.

Texto cinético y mecanografiado

Cuando cada letra, palabra o línea comparte una curva de movimiento en un paso regular (every ms), mantén un solo elemento text y escalónalo con units (by: letter, word o line; order: forward, reverse, center_out o edges_in). Aquí un titular se evapora hacia el foco desde su centro hacia afuera:

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 2000, "output": "out/evaporate.mp4",
  "fonts": {"title": [{"file": "fonts/Inter-Bold.ttf"}]},
  "fontVendor": {"fonts/Inter-Bold.ttf": {"licence": "OFL-1.1", "source": "https://github.com/rsms/inter", "sha256": "288316099b1e0a47a4716d159098005eef7c0066921f34e3200393dbdb01947f"}},
  "tracks": [
    {"name": "title", "layer": 20, "elements": [
      {"id": "evaporate", "type": "text", "start": 0, "end": 2000, "x": 960, "y": 540, "origin": "center", "width": 1400, "height": 160, "font": "title", "size": 108, "color": "#F5F0E6", "align": "center", "runs": [{"text": "ENFOQUE NÍTIDO"}], "units": {"by": "letter", "order": "center_out", "every": 45, "y": [{"t": 0, "v": 20}, {"t": 360, "v": 0, "ease": "ease-out"}], "opacity": [{"t": 0, "v": 0}, {"t": 360, "v": 1, "ease": "ease-out"}], "blur": [{"t": 0, "v": 24}, {"t": 360, "v": 0, "ease": "ease-out"}]}, "caption": false}
    ]}
  ]
}

Evaporar / enfoque óptico (blur): anima blur dentro de units desde 16–32 px hasta 0 en 300–450 ms (ease-out), emparejado con opacity (0 -> 1) y una pequeña elevación en y (16–28 px -> 0) o scale ([1.08, 1.08] -> [1.0, 1.0]). Una vez que blur alcanza 0 y opacity alcanza 1, el renderizador toma la ruta rápida sin costo adicional de capa.
Órdenes simétricas (center_out, edges_in): center_out comienza en la unidad central (o par central cuando el conteo es par) y avanza hacia afuera hasta ambos extremos; edges_in comienza en la primera y última unidades juntas y converge en el medio.
Ola viajera (A -> pico -> A): en lugar de un Selector de Rango de After Effects (triangle, round o smooth), escribe una curva de retorno de tres fotogramas clave en units (por ejemplo, "y": [{"t": 0, "v": 0}, {"t": 180, "v": -28, "ease": "ease-out"}, {"t": 360, "v": 0, "ease": "ease-in-out"}] (o un pulso de scale/blur)) y deja que every ondula el pico a través de la línea. Para singularizar una palabra o letra con temporización personalizada, divídela en su propia ejecución con unit.
Mantén los glifos como text (nunca conviertas glifos a path): los elementos path tienen un contorno (points sin holes), por lo que convertir glifos de múltiples contornos (O, A, B, 8, i, ?, %) a path llena los contadores internos de sólido o elimina las islas (ADR-0224). Mantén el texto como text y estilízalo o anímalo con stroke, units, path y effects.
Tiempos de ritmo irregulares o cursor de escritura (scripts/type_on.py): cuando las palabras aterrizan en marcas de tiempo de ritmo irregulares o las letras necesitan un cursor escalonado, ejecuta python3 scripts/type_on.py <project> <spec> (--help para la especificación). Mide la línea con measure y emite un elemento text por unidad ("by": "word" con "enter": "pop" y times/highlights, o "by": "letter" a 60–150 ms con un cursor intermitente), marcando cada uno caption: false.
Títulos espaciados: no dividas el título en letras. Escribe un elemento text con letter_spacing, en milésimas de em (tamaño × letter_spacing / 1000 px después de cada letra; negativo aprieta). Anímalo para separar un título: "letter_spacing": [{"t": 0, "v": 0}, {"t": 800, "v": 120, "ease": [0.65, 0, 0.35, 1]}]. Cualquier valor distinto de cero desactiva las ligaduras opcionales, y una escritura con uniones como el árabe no toma espaciado.
Columnas verticales y lomos laterales: Montagent no tiene una propiedad writing_mode (ADR-0224). Para una columna apilada vertical (copia vertical CJK o un marquee apilado), une grafemas con \n ("text": "東\n京\n都") dentro de un cuadro de text estrecho con "align": "center" y "line_height": 1.0 o 1.1; mantiene 2–3 dígitos horizontales o iniciales latinos en una línea ("text": "第\n25\n回", Tate-chu-yoko) y escalónalos con "by": "line" para que el número horizontal se mueva como una unidad. Para un lomo latino lateral, establece un elemento text horizontal y gíralo con "rotation": -90 (se lee de abajo a arriba) o "rotation": 90 (se lee de arriba a abajo).
Revisión: preview el tramo de la línea que entra. Luego frame en reposo, y comprueba que el espaciado se lea como una línea, sin espacio más ancho en un límite de palabra o letra.

Revelar por cortinilla

Una cortinilla descubre algo deslizando un borde a través de él. Coloca un ocluidor encima de la cosa: un rectángulo relleno exactamente con lo que está detrás de la cosa. Luego encoge el oclusor alrededor de su borde lejano, para que su borde cercano barra a través. Una barra de acento que cabalga ese borde hace que la cortinilla se lea como deliberada.

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 2000, "output": "out/wipe.mp4",
  "tracks": [
    {"name": "mark", "layer": 10, "elements": [
      {"id": "mark", "type": "image", "start": 0, "end": 2000, "source": "media/still.png", "x": 960, "y": 540, "origin": "center", "width": 360, "height": 360, "fit": "contain"}
    ]},
    {"name": "occluder", "layer": 11, "elements": [
      {"id": "occluder", "type": "rect", "start": 0, "end": 1000, "x": 1160, "y": 540, "origin": "center-right", "width": 400, "height": 400, "fill": "#101418", "scale": [{"t": 400, "v": [1.0, 1.0]}, {"t": 900, "v": [0.0, 1.0], "ease": [0.65, 0, 0.35, 1]}]}
    ]},
    {"name": "edge", "layer": 12, "elements": [
      {"id": "edge", "type": "rect", "start": 400, "end": 1000, "x": [{"t": 400, "v": 760}, {"t": 900, "v": 1160, "ease": [0.65, 0, 0.35, 1]}], "y": 540, "origin": "center", "width": 16, "height": 420, "fill": "#FF5A36", "opacity": [{"t": 900, "v": 1.0}, {"t": 1000, "v": 0.0, "ease": "ease-in"}]}
    ]}
  ]
}

Duración: 400–600 ms, [0.65, 0, 0.35, 1]: un barrido que comienza y termina suavemente.
Oclusor: 20–40 px más grande que la cosa en cada lado, y el mismo relleno que el fondo detrás de ella. El fotograma clave de inicio se sitúa donde comienza la cortinilla, por lo que la cosa permanece cubierta hasta entonces.
Barra de borde: 8–24 px de ancho, 5–10 % más alta que el oclusor, moviéndose en la misma curva y tiempo. Sale después de 100–200 ms una vez que el barrido está completo.
Dirección: cortinilla en la dirección de lectura; para cerrar, haz crecer el oclusor de vuelta desde el borde cercano.
Fondo ocupado: un oclusor solo funciona sobre un color plano. Sobre una foto, un degradado o metraje, anima la propia mask del elemento en su lugar: {"name": "mask", "shape": "rect", "x": 0, "y": 0, "width": [{"t": 400, "v": 0}, {"t": 900, "v": 400, "ease": [0.65, 0, 0.35, 1]}], "height": 400} descubre un elemento de 400 × 400 desde su borde izquierdo, sin oclusor. El rectángulo es local al elemento, desde su esquina superior izquierda; una máscara de ancho cero oculta el elemento, por lo que la revelación comienza cubierta. Añade feather para un borde suave.
Revisión: frame en el medio del barrido y comprueba que la barra de borde cubre exactamente el borde del oclusor; luego frame justo después del barrido y comprueba que no quede nada del oclusor.

Transición con un empuje, deslizamiento o cortinilla

Para pasar de una tarjeta, imagen o escena a la siguiente con movimiento, puentea las dos con una transition de tipo push, slide o wipe. La x animada en ambos elementos se desviaría en la unión; la transición mantiene las dos mitades unidas al píxel, y validate lo comprueba.

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 3000, "output": "out/handover.mp4",
  "tracks": [
    {"name": "first", "layer": 10, "elements": [
      {"id": "card-1", "type": "rect", "start": 0, "end": 1700, "x": 0, "y": 0, "origin": "top-left", "width": 1920, "height": 1080, "fill": "#FF5A36"}
    ]},
    {"name": "second", "layer": 11, "elements": [
      {"id": "card-2", "type": "rect", "start": 1200, "end": 3000, "x": 0, "y": 0, "origin": "top-left", "width": 1920, "height": 1080, "fill": "#2E86FF"}
    ]},
    {"name": "handover", "layer": 12, "elements": [
      {"id": "handover", "type": "transition", "start": 1200, "end": 1700, "kind": "push", "from": "card-1", "to": "card-2", "direction": "left", "ease": [0.65, 0, 0.35, 1]}
    ]}
  ]
}

Tipo: push cuando los dos pertenecen a una tira (páginas, pasos, un carrusel); slide cuando el nuevo aterriza encima de uno fijo; wipe cuando el antiguo debe permanecer y ser cortado.
Dirección: la dirección en la que viaja el movimiento. left trae el nuevo desde la derecha, lo que sigue la dirección de lectura.
Duración: 400–600 ms, [0.65, 0, 0.35, 1]. Los start y end de la transición son exactamente el tiempo que los dos comparten.
Apilamiento de deslizamiento: en un slide, el elemento entrante debe estar en la layer más alta.
Revisión: frame en el medio de la transición y comprueba que el borde de unión esté perfecto; luego frame justo después de que termine y comprueba que el primer elemento ya no sea visible.

MBehtemam/montagent-skills

¿Qué es montagent-skills?

Preguntar en tu IA favorita

Documentación