Diseño de Motion Graphics en Pergamino Horizontal: Lenguaje, Implementación en AE y Método de Recreación

Este skill proviene de una recreación fotograma a fotograma completa (1920×1080, 24 fps, 272 fotogramas, 12 versiones iterativas). Responde tres preguntas: qué aspecto y movimiento tiene este tipo de pieza; cómo se construye en After Effects; y cómo medir y alinear cuando se tiene un video de referencia. Las tres partes se pueden usar por separado: para diseño original, consulta las secciones 1–3; para montar un proyecto, la sección 4; para replicar, las secciones 5–6.

Si el proyecto actual contiene rollback-replica/, ese es el proyecto de referencia: 拆解分析.md tiene todos los valores medidos, scripts/ es el generador de escenas, y tools/ son scripts de medición. Léelos primero, no empieces desde cero.

1. Lenguaje de Diseño

1.1 El Mundo y la Cámara

Todo el contenido se sitúa en un pergamino horizontal (en la referencia, 11000×1080). El espectador ve lo que la cámara captura al desplazarse por el pergamino.
La cámara solo se desplaza horizontalmente y hace zoom, sin rotación ni movimiento vertical. Conversión: X_pantalla = (X_mundo − cx)·s + 960, Y_pantalla = (Y_mundo − 540)·s + 540.
Una regla de medición atraviesa todo el pergamino y siempre está centrada verticalmente en la imagen (y=540, marcas pequeñas cada ~7.27 px, una marca grande cada 5 marcas pequeñas). Es el eje de la composición y la referencia para medir la cámara.
Sin desenfoque de movimiento: incluso a 500 px/fotograma de desplazamiento horizontal, la imagen permanece nítida. Esto da a este estilo su dureza característica.

1.2 Composición

Un solo eje: el contenido se distribuye arriba y abajo de la regla; años y números se colocan directamente sobre ella como coordenadas.
Arriba real, abajo espejo: la regla actúa como un espejo: arriba aparecen las imágenes originales y el texto en dirección normal; abajo, sus siluetas monocromáticas y texto invertido.
Numeración entre paréntesis: todas las etiquetas van entre paréntesis: (1) (2), (crash), [cloud1]; las palabras entre paréntesis suelen tener contorno hueco.
Contraste de grosor: círculos finos de 1 px, círculos concéntricos, arcos de texto y líneas de guía contrastan con grandes bloques de color sólido.
Marcos anidados: marcos negros dentro de marcos negros, rotados 90°, con la regla atravesándolos.
Ritmo de densidad: disperso → denso → muy denso → espacio en blanco → relleno → disperso. No mantener la misma densidad todo el tiempo.

1.3 Color

El fondo gris, blanco y negro son los colores principales. Solo se usan tres colores de acento; el resto de colores solo aparecen dentro de las fotos.

Nombre	Valor	Uso
Gris fondo	`#E6E6E6`	Fondo (con grano muy sutil)
Rosa	`#E8086D`	Anillos, cintas, haces de luz, destellos de fondo
Azul brillante / Azul real	`#1F86F0` / `#0D3ED8`	Bloques, siluetas espejo / círculos grandes, cielo
Azul violeta	`#6982F6`	Destellos de fondo, siluetas de entrada
Verde menta	`#19E6B4`	Pequeños bloques de superficie
Casi negro	`#110D0C`	Fundido a negro, final

El color de fondo cambia de forma brusca por párrafos: gris → negro → rosa → azul violeta, cada cambio en un solo fotograma.

1.4 Combinación Tipográfica

La mezcla es intencional: un tipo de letra para cada tipo de información: Serifa de transición (Times, para etiquetas entre paréntesis, contorno hueco), Sans-serif geométrica fina (Montserrat, para números de año, con espaciado apretado), Tipografía técnica de esquinas redondeadas (Jura / OCR-A, para comandos y etiquetas pequeñas), Serifa moderna de alto contraste (Playfair / Bodoni, para títulos grandes, letras muy juntas), Serifa gruesa extragruesa (Lubalin / Rockwell, para títulos principales, estirada horizontalmente), Monoespaciada (Consolas / Courier, para código y números grandes), Song / Ming (para CJK, se puede estirar horizontalmente hasta 3 veces), y Pixel. El texto pequeño debe ser tan pequeño como 6–10 px, no agrandarlo; son «textura», no «información».

1.5 Vocabulario de Materiales

Fotos recortadas (alto contraste blanco y negro, umbral), bocetos con efecto de bordes (línea negra sobre fondo blanco con puntos dispersos), capturas de pantalla de UI (ventanas emergentes, iconos de archivos, tablas, texto de keyframes), escaneos de película (base, perforaciones, códigos de borde), objetos 3D pequeños (metal líquido, tubos brillantes, modelos en blanco, wireframes), degradados cónicos holográficos, patrones de 1 bit dither, códigos QR, muñecos pixel. A menudo un mismo elemento aparece en dos versiones: objeto real y su silueta de color sólido.

1.6 Texturas

Los bloques de color sólido se mantienen limpios; los degradados y grises tienen grano visible; además, se añade un 2–3% de ruido monocromático en toda la capa superior.
Las fotos se tratan con estilo «fotocopiadora»: umbral, posterización, dejando solo tres o cuatro tonos de gris.
Los bocetos son líneas negras con relleno blanco, no líneas grises; las líneas deben ser finas, permitiendo puntos de ruptura y dispersos.
Los objetos con aspecto cromado parecen renders posterizados: un contorno blanco alrededor y un contorno negro, con el punto brillante como un núcleo blanco rodeado de anillos concéntricos.

2. Lenguaje de Movimiento

2.1 Cámara

Zoom: transiciones puramente lineales de 3–5 fotogramas entre unos pocos valores fijos, parando en seco, sin easing. En algunos casos, se usa exponencial out (multiplicando la diferencia por 0.6–0.75 cada fotograma) o aceleración exponencial para acercarse. También se puede cortar directamente.
Desplazamiento: es la suma de tres componentes:
1. Deriva constante, aproximadamente 4 px mundo/fotograma, continua durante toda la pieza;
2. Impulsos en los fotogramas de ritmo, que luego se atenúan cada fotograma en una proporción de 0.6–0.8 (ejemplo: +195, +33, +20, +14, +11, +9, +7);
3. Saltos de varios cientos de px en un solo fotograma.
La cámara se hornea fotograma a fotograma en keyframes lineales; no confíes en el easing Bezier para adivinar esta curva.

2.2 Ritmo

Los eventos caen en una cuadrícula de 6 fotogramas por pulso (0.25 s a 24 fps), y pueden tener un desplazamiento de fase general. Los elementos aparecen uno por pulso, no todos a la vez.

2.3 Entrada y Cambio de Elementos (Técnicas Centrales)

Silueta de entrada: primero se muestra una silueta de color sólido durante 1–2 fotogramas (blanco → azul violeta → objeto real, o rosa → objeto real), luego se reemplaza con la textura real. Usa el efecto «Tinte» para mapear blanco y negro al mismo color, con cantidad 100 → 0 en hold.
Destello de un fotograma / Alternancia de tamaño: aparece → desaparece un fotograma → reaparece; o grande, pequeño, grande, pequeño, parpadea tres veces y se estabiliza.
Barrido radial segmentado por pulsos: los elementos anulares barren un segmento primero, luego en cada pulso el segmento completo salta a un nuevo ángulo, con solo 1–2°/fotograma de deriva entre segmentos.
Dos barridos lineales, cabeza y cola: en elementos alargados, primero la «cabeza» se extiende hacia adelante, luego la «cola» la alcanza; la parte restante se convierte en el siguiente elemento.
Keyframes hold como principal: posición, escala y rotación saltan fotograma a fotograma; el único easing real es un out de 2–3 fotogramas.
Pop: 0.3–0.7x → 1.0, en 2–3 fotogramas, posiblemente con overshoot de 1.1–1.2.
Pin a pantalla: un elemento individual se fija en la pantalla mientras la cámara se mueve (usando keyframes fotograma a fotograma con la transformación inversa de la cámara), y después de un tiempo se «devuelve» al mundo.
Mezcla de framerates: las animaciones 3D pequeñas suelen hacerse a 30 fps y luego se insertan en una línea de tiempo de 24 fps, lo que resulta en pasos de 1, 2, 1, 1 cada 4 fotogramas. Al replicar, usa fotograma_fuente = ⌊1.25·(f − f0) + 0.5⌋, no interpoles uniformemente.
Copia espejo y desplazada: cuando aparece una silueta espejo, debajo se coloca una copia blanca que se desliza desde una posición desplazada hasta coincidir en 4–5 fotogramas.

2.4 Destellos Globales

Efecto	Método
Corte brusco de color de fondo (negro, rosa, azul violeta)	Keyframes hold en la capa de color sólido de fondo
Destello de umbral (1 fotograma, la imagen se vuelve blanco y negro binario)	Capa de ajuste superior con efecto «Umbral»
Destello de umbral diferencial (todo lo que no sea del color de fondo se vuelve blanco)	Una capa de color sólido igual al fondo con modo de fusión «Diferencia», y encima una capa de «Umbral»
Inversión de pantalla completa (algunos elementos mantienen su color)	Capa superior con «Inversión»; los elementos que deben mantener su color se invierten primero ellos mismos
Estirado horizontal local	Capa de ajuste estrecha con «Transformar», desmarcar escalado uniforme, ancho al varios miles de %
Giro de página	Escala X de la capa en hold fotograma a fotograma (pasa por cero y se vuelve negativa), el punto de anclaje también se mueve fotograma a fotograma, con un fotograma de overshoot
Final	Una barra de degradado escalonada cubre toda la pantalla y luego desaparece; el color de fondo se oscurece gradualmente hasta casi negro; el título se estira horizontalmente formando una estela

3. Orden para Crear una Pieza Original de Este Estilo

Primero dibuja el pergamino: define el ancho del mundo (aproximadamente 800–1000 px mundo por segundo), divídelo en 4 segmentos, cada uno con un tema y una densidad.
Prepara la lista de planos: para cada plano, escribe el nivel de zoom, cx inicial y final, color de fondo, y eventos que ocurren; entre niveles de zoom solo usa rampas lineales o cortes.
Coloca los eventos en la cuadrícula de 6 fotogramas, un nuevo elemento por pulso; cada 2–3 segundos programa un destello global o un cambio de color de fondo.
Para cada elemento, elige una técnica de entrada de la sección 2.3; no repitas la misma más de dos veces en un mismo segmento.
Prepara los materiales según el vocabulario de la sección 1.5, cada elemento con su versión de silueta de color sólido.
Finalmente, añade grano uniformemente y verifica que solo haya tres colores de acento.

4. Implementación en After Effects

4.1 Estructura del Proyecto

RB_REPLICA/
  01_Composiciones/   RB_MAIN (1920×1080 pieza final)   RB_WORLD (pergamino mundo, ej. 14400×2600)
  02_Material/        Subcarpetas por segmento (A_… B_… C_… D_…, regla y efectos globales)
  03_Sólidos/         Fondo, capas de ajuste, sólidos para máscaras

RB_WORLD contiene todas las capas en espacio mundo; el punto mundo (x, y) corresponde al píxel del comp (x + OX, y + OY), dejando márgenes alrededor.
RB_MAIN de abajo arriba: sólido de fondo → RB_WORLD (con transformaciones colapsadas activadas, la cámara son sus keyframes de posición/escala) → capas superiores en espacio pantalla → capas de ajuste (grano, umbral, inversión…).
Las capas se etiquetan por color de segmento; los nombres de archivo de material llevan prefijo de segmento para facilitar la navegación entre 500+ capas.

4.2 Generar con Scripts en lugar de Colocar a Mano

La gran cantidad de capas y valores numéricos precisos hace que sea mejor describir la escena con un script e importarla:

Una Scene que contiene una lista de capas; cada capa tiene coordenadas mundo, intervalo de tiempo span(f_in, f_out), keyframes de propiedades y lista de efectos.
Los materiales se dibujan mediante funciones y se cachean por un hash de «código fuente + parámetros»; solo se redibujan si cambian.
Se exporta como JSON de proyecto de AE, y se importa con ae_project_import_json del MCP de aftereffects; para reconstruir, elimina la carpeta raíz antigua por id y luego importa (la importación solo añade).
Los ajustes que no se pueden pasar por JSON (capa de ajuste, transformaciones colapsadas, modo de fusión) se listan por separado y se aplican después de la importación con layer.set_props / layer.set_blend_mode.
Los elementos con postura diferente cada fotograma (objetos 3D que rotan, degradados que cambian fotograma a fotograma) se hacen como «una capa por fotograma», cada capa viva solo un fotograma. Esto es más fiable que apilar keyframes de efectos en una sola capa.

4.3 Notas sobre el Uso de Efectos

Barrido lineal: el ángulo es la dirección de avance; +90 barre desde la izquierda, −90 desde la derecha, 180 desde arriba, 0 desde abajo; el barrido se calcula en el espacio local de la capa; si la capa tiene rotación, hay que compensar el ángulo invirtiéndolo.
Barrido radial: ángulo inicial 0 = hacia arriba, en sentido horario; «Ambos» barre desde el ángulo inicial hacia ambos lados.
En proyectos de 16 bpc, el nivel de «Umbral» se llena en 0–1.
En capas de ajuste que no son del tamaño del comp, los parámetros de punto de los efectos se convierten una vez por «Capa → Comp».
Las escalas no proporcionales estáticas, es mejor hornearlas en el material en lugar de dejarlas en la transformación de la capa (pueden diferir entre previsualización y exportación).

4.4 Renderizado y Exportación

El H.264 nativo de AE puede oscurecer el rosa saturado. Usa AVI «sin pérdidas» y luego ffmpeg:

ffmpeg -i main.avi -vf "scale=in_range=full:out_range=tv:out_color_matrix=bt709,format=yuv420p" -c:v libx264 -crf 17 -preset slow -color_primaries bt709 -color_trc bt709 -colorspace bt709 -color_range tv -movflags +faststart out.mp4

4.5 Recopilación y Archivado de Proyectos

Al entregar o archivar, coloca el proyecto y los materiales realmente utilizados en una carpeta independiente (equivalente a «Archivo → Recopilar proyecto → Recopilar archivos»):

Copia solo los materiales referenciados por las capas, manteniendo la estructura de carpetas del panel Proyecto dentro de (Footage)/;
Genera un proyecto que apunte a la carpeta recopilada (nuevo proyecto → importa el JSON con rutas modificadas → aplica ajustes faltantes → configura la misma profundidad de bits y configuración de color que el proyecto original → guardar como);
Escribe un informe de recopilación: especificaciones de la composición, número y tamaño de materiales, archivos faltantes, efectos utilizados (si dependen de complementos de terceros, fuentes), y lo que no se recopiló;
Verifica: renderiza el mismo par de fotogramas del proyecto original y del recopilado; deben coincidir píxel a píxel. Además, confirma que no falten materiales;
Después, vuelve a abrir el proyecto original en AE. No modifiques las composiciones y materiales que el usuario ya tiene en su proyecto.

5. Método para Replicar un Video de Referencia

El objetivo es que «parezca la misma pieza», pero los materiales se redibujan y regeneran, no se copian píxeles del video original.

5.1 Orden

Extrae fotogramas (todos, en JPG es suficiente) y anota los parámetros básicos: resolución, framerate, número de fotogramas, si hay desenfoque de movimiento, si la pista de audio realmente tiene sonido.
Primero, resuelve la cámara: busca una referencia rígida que atraviese toda la pieza (aquí, la regla de medición). Mide el zoom y el desplazamiento fotograma a fotograma, y hornea esto en una tabla de cámara.
Reconstruye el mundo: con la cámara resuelta, puedes proyectar cualquier fotograma de vuelta a coordenadas mundo. Todas las mediciones posteriores se hacen en coordenadas mundo.
Haz una lista de elementos: para cada elemento, registra su posición mundo, fotograma de inicio, fotograma de fin, técnica de entrada, y cambios fotograma a fotograma.
Monta la primera versión, renderiza, compara fotograma a fotograma, e itera según las diferencias. Cada versión aborda un grupo de problemas; después de corregirlos, vuelve a renderizar y comparar.

5.2 Disciplina de Medición

Auditoría de cámara: localiza cada marca de la regla en cada fotograma, conviértela a coordenadas mundo y compárala con la cuadrícula ideal. El error residual debe ser constante dentro de un mismo plano; si no lo es, la tabla de cámara está mal. Este paso detectó dos errores de alineación de 8 px y 49 px que eran completamente invisibles en una comparación lado a lado, pero que sesgaban todas las mediciones posteriores.
Usa detección numérica en lugar de inspección visual: leer coordenadas de recortes con cuadrícula tiene un sesgo sistemático de 3–8 px. Para medidas críticas, usa detectores: umbral de color más cuadro delimitador (para cabezas y colas de bloques), centroide de componentes conectados (para puntos brillantes o marcadores), ajuste de círculo/elipse (para esferas, anillos, órbitas), estadísticas por fila (para filas de líneas y su grosor). Ejecuta el mismo detector tanto en el original como en la réplica, y luego compara.
Recortes alineados al mundo: al comparar, recorta la misma región rectangular del mundo del original y de la réplica y colócalos lado a lado, en lugar de comparar capturas de pantalla. Esto es especialmente importante en planos donde la cámara se mueve.
Comparación fotograma a fotograma, no cada dos fotogramas: muestrear cada 2 fotogramas llevó a pensar que una rotación de período 4 fotogramas era «casi inmóvil».
Si un elemento «se mueve de forma extraña», primero sospecha de la cámara, luego del elemento.

5.3 Redibujar Materiales con GPT / Codex a Partir de Fotogramas de Referencia

Adecuado para fotos, bocetos, collages y dibujos a mano:

Recorta los 1–2 fotogramas más limpios del elemento, amplíalos 2–4 veces como imagen de referencia.
Estructura del prompt: «Redibuja fielmente X de la imagen de referencia» → describe cada objeto y su apariencia → lista lo que debes eliminar (regla, líneas superpuestas, elementos adyacentes, texto) → solicita fondo transparente.
El modelo tiende a estirar el tema para llenar el lienzo: añade bordes a la imagen de referencia para que coincida con la proporción del lienzo de salida, e indica «mantén la proporción, deja márgenes».
La vista previa no muestra el canal alfa, por lo que puede parecer que hay halos; antes de juzgar, revisa el alfa y umbralízalo antes de usarlo.
En imágenes con múltiples objetos, el diseño puede desplazarse: divide la imagen en fragmentos, cada uno colocado según su rectángulo mundo medido, permitiendo escalas no proporcionales por fragmento.
Las marcas comerciales de terceros copiadas por el modelo deben ser borradas.
Las tareas de generación pueden ejecutarse en paralelo en segundo plano mientras continúas con las mediciones y la parte procedimental.

No es adecuado para modelos generativos: elementos cuyo movimiento o topología debe ser preciso (anillos que giran, cuentas fusionadas, degradados que cambian fotograma a fotograma, wireframes). Estos se renderizan proceduralmente con parámetros geométricos ajustados; el modelo generativo solo se encarga de texturas e imágenes. Si te desvías de las herramientas sugeridas por el usuario, explica la razón en el informe.

5.4 Método de Ajuste para Objetos 3D Pequeños

Sigue la posición fotograma a fotograma de características prominentes (punto brillante);
Ajusta una órbita de proyección (elipse), luego usa un modelo con perspectiva para explicar «más grande cerca, más pequeño lejos; más denso cerca, más disperso lejos»;
A partir de la secuencia de fases, lee la velocidad de rotación y la conversión de framerate;
Renderiza fotograma a fotograma con los parámetros ajustados, luego superpón el resultado con el original para verificar la fase.

5.5 Comparación y Entrega

Cada versión produce: pieza final, video de comparación sincronizada con original arriba y réplica abajo con número de fotograma, y varias comparaciones lado a lado de fotogramas clave.
El documento registra: lista de planos, curvas de cámara, valores medidos por elemento, qué se cambió en cada versión, y las diferencias que aún persisten.
Al informar, explica claramente qué partes no coinciden y el tipo de diferencia (forma, brillo, posición, tiempo); no te limites a decir qué se corrigió.

6. Lista de Verificación

Antes de entregar, revisa cada punto:

7. Preguntas Frecuentes

Los colores saturados aparecen oscuros después del renderizado: no se usó la salida sin pérdidas con la conversión bt709 de ffmpeg.
Un elemento se desplaza varias decenas de px entre dos planos: la tabla de cámara sumó o restó un período de escala de más en el corte.
La dirección del barrido es incorrecta: el ángulo del barrido lineal es la dirección de avance; si la capa tiene rotación, hay que compensar.
El fotograma de umbral sale completamente negro o blanco: en 16 bpc, el nivel se escribió como 0–255.
La proporción del material generado es incorrecta: la imagen de referencia no se rellenó con bordes hasta la relación de aspecto del lienzo de salida.
El elemento fijado a pantalla se mueve durante un zoom: la transformación inversa debe usar los valores de cámara de cada fotograma en keyframes hold, no solo el primero y el último.

novahanser/rollback-motion-recreation

¿Qué es rollback-motion-recreation?

Preguntar en tu IA favorita

Documentación