Animación plana de collage en rollo largo: lenguaje de diseño, implementación en AE y método de réplica

Esta skill proviene de una réplica completa cuadro a cuadro (1920×1080, 24 fps, 272 fotogramas, 12 iteraciones). Responde tres cosas: cómo se ve y cómo se mueve este tipo de pieza; cómo se monta en After Effects; y cómo medir y alinear cuando se tiene un video de referencia. Las tres partes se pueden usar por separado: al crear original, ve a las secciones 1–3; al montar el proyecto, ve a la sección 4; al replicar, ve a las secciones 5–6.

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

1. Lenguaje de diseño

1.1 Mundo y cámara

Todo el contenido se coloca en un rollo horizontal largo (el video de referencia usa 11000×1080). El espectador ve la cámara moviéndose sobre el rollo.
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 rollo y siempre está centrada verticalmente (y=540, las marcas pequeñas están espaciadas ~7.27 px, con una marca grande cada 5). Es el eje del diseño y la referencia para medir la cámara.
Sin desenfoque de movimiento: incluso en tomas que se desplazan 500 px por fotograma, todo se mantiene nítido; esta es la fuente de la «dureza» del estilo.

1.2 Composición

Un eje: el contenido se despliega arriba y abajo de la regla; los años y los números se colocan directamente sobre ella como coordenadas.
Arriba real, abajo reflejo: la regla funciona como un espejo; arriba están las imágenes originales y el texto en orientación normal; abajo están sus siluetas monocromáticas y el texto invertido.
Numeración entre paréntesis: todas las etiquetas se envuelven en paréntesis, como (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, texto curvo y líneas de referencia se enfrentan a grandes bloques de color sólido.
Cuadros anidados: un cuadro negro dentro de otro, rotado 90°, con la regla pasando por el medio.
Ritmo de densidad: escaso → denso → muy denso → espacio en blanco → lleno → escaso. No mantener la misma densidad todo el tiempo.

1.3 Color

Fondo gris con blanco y negro es el cuerpo principal; solo se usan tres colores de acento. El resto de los colores solo aparecen en las fotos.

Nombre	Valor	Uso
Gris de fondo	`#E6E6E6`	Fondo (con grano muy sutil)
Rosa	`#E8086D`	Segmentos de anillo, cintas, haces de luz, destellos de fondo
Azul brillante / Azul cobalto	`#1F86F0` / `#0D3ED8`	Bloques, siluetas espejadas / círculos grandes, cielo
Azul violeta	`#6982F6`	Destellos de fondo, color de relleno de siluetas
Verde menta	`#19E6B4`	Pequeñas áreas de bloque
Casi negro	`#110D0C`	Fondos oscuros, cierre

El color de fondo cambia de forma cortante por párrafo: gris → negro → rosa → azul violeta, todo en un solo fotograma.

1.4 Combinación tipográfica

La mezcla es intencionada: un tipo de letra por tipo de información. Transición serif (Times, para etiquetas entre paréntesis y contornos huecos), sans-serif geométrica fina (Montserrat, para números de año, con espaciado apretado), fuente técnica de esquinas redondeadas (Jura / OCR-A, para líneas de comando y etiquetas pequeñas), serif moderna de alto contraste (Playfair / Bodoni, para palabras de título grandes, con letras muy juntas), slab serif extra gruesa (Lubalin / Rockwell, para títulos principales, estirados horizontalmente), monoespaciada (Consolas / Courier, para código y números grandes), Song / Ming (CJK, se puede estirar horizontalmente hasta 3 veces), y píxeles. Las letras pequeñas deben mantenerse entre 6 y 10 px, no agrandarlas; son «textura», no «información».

1.5 Vocabulario de materiales

Fotos recortadas (blanco y negro de alto contraste, umbralizadas), bocetos estilo «Find Edges» (líneas negras sobre fondo blanco con puntos sueltos), capturas de pantalla de sistemas UI (ventanas emergentes, iconos de archivos, tablas, texto de keyframes), escaneos de película (base de película, perforaciones, códigos de borde), objetos 3D pequeños (metal líquido, tubos brillantes, modelos en blanco, wireframes), degradados cónicos holográficos, patrones dither de 1-bit, códigos QR, hombrecillos de píxeles. Un mismo objeto suele aparecer en dos versiones: la 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. Se añade un 2–3% de ruido monocromático en la capa superior de toda la pieza.
Las fotos se convierten en textura de «fotocopiadora»: umbral, separación de tonos, dejando solo 3–4 niveles de gris.
Los bocetos son líneas negras con relleno blanco, no líneas grises; las líneas deben ser finas, permitiendo puntos de rotura y dispersos.
Los objetos con aspecto cromado parecen renders con separación de tonos: un contorno blanco general con un contorno negro exterior; los reflejos son un núcleo blanco rodeado de anillos concéntricos.

2. Lenguaje de movimiento

2.1 Cámara

Zoom: transiciones puramente lineales de 3 a 5 fotogramas entre unos pocos niveles fijos, con parada brusca al llegar, sin easing. En algunos lugares se usa una salida exponencial (multiplicar la diferencia por 0.6–0.75 cada fotograma) o una aceleración exponencial para acercamientos. También se puede cortar directamente.
Desplazamiento: es la superposición de tres componentes:
1. Una deriva constante, aproximadamente 4 px del mundo por fotograma, que no se detiene en toda la pieza;
2. Un impulso en los fotogramas de pulso, que luego decae proporcionalmente en cada fotograma (por ejemplo: +195, +33, +20, +14, +11, +9, +7);
3. Cortes bruscos, saltando cientos de px en un fotograma.
La cámara se hornea fotograma a fotograma en keyframes lineales; no intentes adivinar esta curva con easing bezier.

2.2 Pulso

Los eventos caen en una cuadrícula de un pulso cada 6 fotogramas (0.25 s a 24 fps), que puede tener un desfase global. Los elementos aparecen uno por pulso, no todos a la vez fundiéndose.

2.3 Entrada y cambio de elementos (técnicas principales)

Silueta de relleno: primero se muestra una silueta de color sólido durante 1–2 fotogramas (blanco → azul violeta → objeto real, o rosa → objeto real), luego se cambia a la textura real. Usa el efecto «Tinte» para mapear blanco y negro al mismo color, con la cantidad de 100 → 0 en modo hold.
Destello de un fotograma / alternancia de tamaño: aparece → se apaga un fotograma → vuelve a aparecer; o grande, pequeño, grande, pequeño, tres destellos y luego se detiene.
Barrido radial por pulsos: los elementos anulares primero barren un segmento, luego cada pulso el segmento salta a un nuevo ángulo, con solo 1–2°/fotograma de deriva entre segmentos.
Dos barridos lineales (cabeza y cola): en los elementos alargados, primero la «cabeza» se extiende hacia adelante, luego la «cola» la alcanza; la parte restante es el siguiente elemento.
Predominio de keyframes hold: la posición, escala y rotación saltan fotograma a fotograma; el único easing real son 2–3 fotogramas de salida.
Rebote: de 0.3–0.7x → 1.0, en 2–3 fotogramas, puede tener un overshoot de 1.1–1.2.
Clavado en pantalla: ciertos elementos se fijan en la pantalla mientras la cámara se mueve (se les aplica keyframes fotograma a fotograma con la transformación inversa de la cámara), y después de un tiempo se «devuelven» al mundo.
Mezcla de fotogramas: las animaciones 3D pequeñas suelen hacerse a 30 fps y luego se meten en una línea de tiempo de 24 fps, mostrando pasos de 1, 2, 1, 1 cada 4 fotogramas. Al replicar, usa fotograma_origen = ⌊1.25·(f − f0) + 0.5⌋ para tomar fotogramas, no interpoles uniformemente.
Copia espejada y desplazada: cuando aparece una silueta espejada, se coloca una copia blanca debajo que se desliza desde una posición desplazada hasta coincidir en 4–5 fotogramas.

2.4 Destellos globales

Efecto	Método
Cambio brusco de color de fondo (negro, rosa, azul violeta)	Keyframes hold de una 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 «Umbral»
Destello de umbral diferencial (todo lo que sea diferente del color de fondo se vuelve blanco)	Una capa de color sólido del mismo color que el fondo, con modo de fusión «Diferencia», y encima otra con «Umbral»
Inversión de toda la pantalla (algunos elementos mantienen su color original)	Capa superior con «Invertir»; las capas que deben mantener su color original se aplican a sí mismas «Invertir» una vez
Estirado horizontal local	Una capa de ajuste estrecha con «Transformar», desmarcando escalado uniforme, y estirando la anchura a miles de %
Giro de página	Escala X de la capa con keyframes hold fotograma a fotograma (pasando por cero a negativo), el punto de anclaje también se mueve fotograma a fotograma, con un fotograma de overshoot
Cierre	Una barra de degradado escalonada que llena la pantalla y luego se retira; el color de fondo se oscurece gradualmente hasta casi negro; el título se estira horizontalmente hasta convertirse en una estela

3. Orden para crear una pieza original

Dibuja primero el rollo largo: define el ancho del mundo (aproximadamente 800–1000 px del mundo por segundo), divídelo en 4 secciones, cada sección con un tema y una densidad.
Crea una tabla de planos: para cada plano, escribe el nivel de zoom, cx inicial y final, color de fondo y eventos que ocurren; entre niveles solo usa rampas lineales o cortes bruscos.
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.
Cada elige una técnica de entrada de la sección 2.3; no repitas la misma más de dos veces en la misma sección.
Prepara los materiales según el vocabulario de la sección 1.5; para cada objeto, crea también una versión de silueta de color sólido.
Finalmente, añade grano de forma uniforme; verifica que solo se usen tres colores de acento.

4. Implementación en After Effects

4.1 Estructura del proyecto

RB_REPLICA/
  01_Composiciones/   RB_MAIN (1920×1080, producto final)   RB_WORLD (mundo en rollo largo, ej. 14400×2600)
  02_Materiales/    Subcarpetas por sección (A_… B_… C_… D_…, regla y efectos globales)
  03_Colores_sólidos/   Colores de fondo, capas de ajuste, sólidos para máscaras

En RB_WORLD se colocan todas las capas en espacio mundo; el punto mundo (x, y) corresponde al píxel de la composición (x + OX, y + OY), dejando márgenes alrededor.
RB_MAIN de abajo arriba: color sólido de fondo → RB_WORLD (activar Transformaciones contraídas, la cámara son sus keyframes de posición/escala) → capas superpuestas en espacio pantalla → capas de ajuste (grano, umbral, inversión…).
Las capas se etiquetan por color según la sección; los nombres de archivo de material llevan el prefijo de la sección, para localizarlas entre más de 500 capas.

4.2 Generar con scripts en lugar de colocar a mano

La cantidad de capas es grande y los valores son todos medidos; es mejor describir la escena con un script e importarla:

Un Scene contiene una lista de capas; cada capa tiene coordenadas mundo, un intervalo temporal span(f_in, f_out), keyframes de propiedades y una lista de efectos.
Los materiales se dibujan con funciones y se almacenan en caché según el hash de «código fuente de la función + parámetros»; solo se redibujan si cambian.
Se exporta como JSON de proyecto de AE, y se importa con el MCP de aftereffects usando ae_project_import_json; para reconstruir, se elimina la carpeta raíz anterior por id y se importa de nuevo (la importación solo añade).
Los interruptores que el JSON no puede pasar (capa de ajuste, Transformaciones contraídas, modo de fusión) se listan por separado; después de importar, se completan con layer.set_props / layer.set_blend_mode.
Los elementos con pose diferente en cada fotograma (piezas 3D giratorias, degradados que cambian fotograma a fotograma) se hacen como «una capa por fotograma», cada capa vive solo un fotograma; 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 de la capa; si la capa está rotada, hay que compensar el ángulo en sentido inverso.
Barrido radial: el ángulo inicial 0 = arriba, en sentido horario; «Ambos lados» barre desde el ángulo inicial hacia ambos lados.
En proyectos de 16 bpc, el nivel de «Umbral» se rellena en 0–1.
En capas de ajuste que no tienen el tamaño de la composición, los parámetros de punto en los efectos se convierten una vez de «capa → composición».
Las escalas estáticas no proporcionales deben hornearse en el material, no dejarse en la transformación de la capa (la vista previa y la exportación pueden diferir).

4.4 Renderizado y salida

El H.264 nativo de AE oscurece los rosas saturados. Usa AVI «sin pérdida» 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 organización del proyecto

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

Copia solo los materiales a los que hacen referencia las capas, manteniendo la estructura de carpetas del panel de proyecto, dentro de (Footage)/;
Genera un proyecto con las rutas de materiales apuntando al directorio de recopilación (nuevo proyecto → importar el JSON con rutas modificadas → completar interruptores → configurar 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, cantidad y tamaño de los materiales, archivos faltantes, efectos utilizados (si dependen de plugins de terceros, fuentes), cosas no recopiladas;
Verifica: renderiza el mismo par de fotogramas del proyecto original y del proyecto recopilado; la comparación píxel a píxel debe ser idéntica; también confirma que no falten materiales;
Al terminar, vuelve al proyecto original en AE. No toques 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»; los materiales se recrean y regeneran, no se copian los píxeles del video original.

5.1 Orden

Extrae fotogramas (todos, JPG está bien) y anota los parámetros básicos: resolución, fotogramas por segundo, número total de fotogramas, si hay desenfoque de movimiento, si la pista de audio realmente tiene sonido.
Resuelve primero la cámara: busca una referencia rígida que atraviese toda la pieza (aquí, la regla), mide el zoom y el desplazamiento fotograma a fotograma, y hornea una tabla de cámara.
Reconstruye el mundo: con la cámara, puedes proyectar cualquier fotograma de nuevo a coordenadas mundo; a partir de ahí, todas las mediciones se hacen en coordenadas mundo.
Haz una lista de elementos: para cada elemento, anota la posición mundo, el fotograma de aparición, el de desaparición, la técnica de entrada y los 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 conjunto de problemas; después de corregirlos, vuelve a renderizar y compara.

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. Los residuos deben ser constantes dentro del mismo plano; si no lo son, 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 las magnitudes críticas, usa detectores: umbral de color más cuadro delimitador (cabeza y cola de bloques), centroide de componentes conectados (reflejos, puntos de referencia), ajuste de círculos/elipses (bolas, anillos, órbitas), estadísticas por fila (número de línea y grosor de líneas). El video original y la réplica se pasan por el mismo detector y se comparan.
Recortes alineados al mundo: al comparar, recorta el mismo rectángulo mundo del original y de la réplica lado a lado, no compares capturas de pantalla; especialmente en tomas donde la cámara se mueve.
Fotograma a fotograma, no cada dos: muestrear cada 2 fotogramas hizo que una rotación de período 4 se viera como «casi sin movimiento».
Cuando un elemento «se mueve de forma extraña», primero sospecha de la cámara, luego del elemento.

5.3 Hacer que GPT / Codex redibuje materiales 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 la X en la imagen de referencia» → describe cada objeto y su apariencia punto por punto → enumera lo que hay que eliminar (la regla, líneas superpuestas, elementos adyacentes, texto) → exige fondo transparente.
El modelo tiende a estirar el sujeto para llenar el lienzo: rellena los bordes de la imagen de referencia hasta la proporción del lienzo de salida, y especifica «mantén la proporción, deja márgenes».
La vista previa no muestra el canal alfa, parece que hay un halo; antes de juzgar, comprueba el alfa y luego umbraliza.
En imágenes con múltiples objetos, la composición puede desplazarse: divide la imagen en bloques, cada bloque se coloca según el rectángulo mundo medido, permitiendo escalas no proporcionales por bloque.
Las marcas comerciales de terceros que el modelo copie deben borrarse.
Las tareas de generación pueden ejecutarse en segundo plano mientras continúas con las mediciones y la parte programática.

Lo que no es adecuado para modelos generativos: cosas que requieren precisión cinemática o topológica (anillos giratorios, cuentas fusionadas, degradados que cambian fotograma a fotograma, wireframes). Esto se renderiza programáticamente con parámetros geométricos ajustados; el modelo generativo solo se encarga de las texturas y la imagen. Si te desvías de la herramienta que el usuario sugiere, explica la razón en el informe.

5.4 Método de ajuste para objetos 3D pequeños

Rastrea la posición fotograma a fotograma de las características notables (reflejos);
Ajusta una trayectoria de proyección (elipse) y luego usa un modelo con perspectiva para explicar «cerca grande, lejos pequeño; cerca espaciado, lejos denso»;
Lee la velocidad de rotación y el ritmo de conversión de frecuencia de fotogramas a partir de la secuencia de fase;
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: el producto final, un video de sincronización con el original arriba y la réplica abajo con números de fotograma, y varias imágenes de comparación de fotogramas clave.
El documento registra: la tabla de planos, la curva de la cámara, los valores medidos de cada elemento, qué se cambió en cada versión y las discrepancias que aún existen.
Al informar, explica claramente las partes que no coinciden, indicando la categoría de la diferencia (forma, iluminación, posición, tiempo), no solo qué se corrigió.

6. Lista de verificación

Antes de entregar, revisa cada punto:

7. Preguntas frecuentes

Los colores saturados se ven más oscuros después del renderizado: no se usó la conversión sin pérdida con ffmpeg a bt709.
Un elemento está desplazado varias decenas de px entre dos planos: la tabla de cámara sumó o restó un período de la regla en el corte brusco.
La dirección del barrido es incorrecta: el ángulo del barrido lineal es la dirección de avance; si la capa está rotada, hay que compensarlo.
El fotograma de umbral sale completamente blanco o completamente negro: 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ó hasta la proporción del lienzo de salida.
Los elementos anclados a la pantalla se mueven al hacer zoom: la transformación inversa debe aplicar los valores de la cámara de cada fotograma como keyframes hold, no solo el primero y el último.

Preguntar en tu IA favorita

Documentación