Communitygithub.com

ojosuevfx/cartaz-historico-motion

Estilo CARTAZ HISTÓRICO — mini-documental narrado con cerca del 80% de la línea de tiempo cubierta por animación editorial en Remotion, sincronizada palabra a palabra con la locución. Collage de papel crema, naranja quemado y negro, pinturas y grabados de época de fuentes reales recreados con fidelidad, nombres en grotesca que entran letra a letra, años en bloques de color, mapas, líneas de tiempo, citas en máquina de escribir y tarjetas de capítulo, entregado en capas ProRes con alfa en Premiere y vinculado a After Effects mediante Dynamic Link. Úsalo cuando pidan "estilo CARTAZ", "cartaz histórico", "el estilo del doc del liberalismo", "animar las voces del mini doc", "mini-doc animado", "documental con collage", "cubrir 80% con animación", "tarjeta de capítulo", "aviso inicial estilo documental", o quieran animar un documental histórico ya decupado en Premiere, incluso sin mencionar la skill. También para solicitudes en inglés: animated history documentary, editorial collage motion graphics, voice-synced Remotion overlays for Premiere.

¿Qué es cartaz-historico-motion?

Esta skill transforma documentales históricos en mini-documentales visualmente impactantes utilizando un estilo de collage editorial. Funciona animando aproximadamente el 80% de la línea de tiempo con gráficos en movimiento sincronizados palabra por palabra con la locución, creando una experiencia inmersiva. Está construida sobre Remotion para la animación, y se integra con Adobe Premiere Pro y After Effects mediante Dynamic Link para la edición final. El proceso incluye la transcripción con Whisper, la recreación fiel de imágenes históricas a partir de fuentes reales, y la aplicación de una paleta de colores específica (papel crema, naranja quemado y negro) con tipografía Archivo y Roboto Mono. Es ideal para creadores que buscan un estilo documental dinámico y editorial, con un flujo de trabajo que prioriza la fidelidad histórica y la autonomía creativa del usuario.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ojosuevfx/cartaz-historico-motion/tree/HEAD

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

CARTAZ HISTÓRICO — mini-doc animado en collage editorial

Nació de un mini-doc real de 35 minutos, con el 87% de la línea de tiempo animada. Cada regla que sigue provino de una corrección realizada durante ese trabajo. Antes de empezar, mira assets/: cenas-pessoas.jpg, cenas-fatos.jpg, aviso-e-continua.jpg, demo.mp4. La demo trata sobre la Revolución Francesa solo para mostrar los tipos de escena, con las obras originales en lugar de recreaciones.

  • Cuándo usar cada escena y el componente de cada una: references/catalogo-cenas.md
  • Cómo conseguir y recrear las imágenes: references/imagens.md
  • Render, Premiere, After Effects y las trampas de cada uno: references/entrega.md
  • Motor Remotion: references/motor/ (src/kit.tsx y src/colagem.tsx primitivas; src/palco.tsx cámara; src/cenas/ escenas listas; src/Molde.tsx punto de partida; src/Demo.tsx y src/Exemplos.tsx ejemplos; tools/ segmentos, render y hoja de contacto)
  • Herramientas de imagen: references/ferramentas/ (recorta.py, preenche.py, alfa_cheio.py, regioes.mjs)

Al comenzar, di (sin pedir confirmación): "Voy a aplicar el estilo CARTAZ HISTÓRICO: animación sincronizada con la locución en aproximadamente el 80% de la línea de tiempo, imágenes de fuentes reales recreadas con fidelidad, papel crema, naranja y negro, entregado en capas en Premiere."

Autonomía creativa

Inventa escenas nuevas a partir de lo que dice la locución. El catálogo enseña una gramática, no es una lista cerrada: "ten la misma iniciativa" fue la instrucción original. Pregunta solo lo que cambie el sentido (nombre, fecha, fragmento de la locución) o lo que solo la persona puede decidir (el nombre de la firma, el texto del aviso, una imagen con derechos).

Lo que queda fijo

  • Paleta (F en el kit): papel #EFEBD8, tinta #16110E, naranja #E0662A, naranja claro #F2A46B, naranja oscuro #B9501D, blanco #FBF8EE. Vino #7E2328 solo para condenación y documento solemne. Si piden otro acento, cámbialo en las constantes y mantén solo uno: el estilo nació en azul y se volvió naranja con una frase ("en vez de ese azul, vamos a un naranja").
  • Tipografía: Archivo Black en mayúsculas para nombres y títulos, Archivo para apoyo, Roboto Mono para etiquetas y fuentes. Merriweather solo en el aviso inicial y en página de texto.
  • Cómo entra el texto: nombre y título con letras esparcidas fuera de orden (NomeLetras); apoyo pequeño escribiendo (Digita, Mono); año en bloque de color con dígitos subiendo (AnoBloco); cita en máquina de escribir.
  • Nada quieto: toda imagen tiene push-in o paneo lento; la explicación vive en Stage, con cámara que se mueve y respira.
  • Corte seco: la escena entra y sale en el corte (CORTE_SECO = true), sin latigazo, fundido o desenfoque de transición. Dentro de la escena, letras, bloques e hilos siguen animando. Solo el aviso inicial usa fundido.
  • Sincronía: cada texto entra en la palabra hablada, con el tiempo de Whisper. Los tiempos en el código son los de la línea de tiempo, en segundos, para que se pueda leer la decupación en el propio código.
  • Una idea por cuadro. Sin marco, sin ícono, sin caricaturización: solo pintura, foto o grabado, tipografía y bloques de color.

Las reglas (todas vinieron de correcciones)

Cobertura

  1. Aproximadamente el 80% de la línea de tiempo en animación. El presentador aparece en los respiros: argumento personal, pregunta directa al espectador, frase de impacto. Marca esos fragmentos en la decupación y déjalos sin <Whip>.
  2. Quién recibe animación: si la persona es citada y la loculación pasa a hablar de ella, recibe escena de presentación. Cita de pasada se queda sin animación.
  3. B-roll de video real solo en la contextualización, en una pista separada arriba, para que quien edite elija en Premiere entre él y la animación.

Imágenes

  1. Fuente siempre real. Pintura, foto, documento o grabado del propio hecho o persona, en alta resolución.
  2. Recreada con fidelidad en el generador de imágenes, a partir de la imagen real, en 16:9 y con un lado libre para el texto. El generador recompone y estiliza la obra; no inventa escena. Compara lado a lado con la original antes de usar: una "recreación" ya volvió con una bandera que la obra no tenía, y otra pasó de perfil a tres cuartos. Si no pasa, usa la obra real con recorte, duotono o crop.
  3. Nada de imagen genérica de IA. Frasco de veneno o libro generados de la nada fueron rechazados. El fondo puede ser generado (papel, cartel naranja, banda en duotono). Persona y hecho, no.
  4. Sin desenfoque para abrir espacio ("no quiero imágenes con esos desenfoques") y sin foto cruda pegada como rectángulo. Si no hay espacio, recrea la imagen con el lado libre.
  5. Derechos ítem por ítem. Prefiere dominio público y registra los créditos. Material con copyright: avisa y úsalo solo después de que la persona lo asuma, en el chat.

Texto en pantalla

  1. Nunca sobre un rostro. Nunca un texto sobre otro. En el cambio, un texto solo entra cuando el anterior ya salió; después de la edición, revisa también los cuadros de transición.
  2. Sin sello en seco. Un "NO" suelto y girado "entra seco y sin sentido". Si los hechos se encadenan en el tiempo, usa la línea de tiempo.
  3. Nombres, fechas y citas verificados antes de que vayan a la pantalla. Si la locución se equivoca (un número de papa, por ejemplo), mantén el audio, muestra lo correcto y avisa. Si las fuentes divergen, muestra solo lo seguro ("septiembre de 1875" en lugar del día).
  4. Cita con fuente en pantalla. Paráfrasis se marca como paráfrasis. Traducción propia lleva nota diciendo de dónde vino el original.

Personas

  1. Persona sola que la locución desarrolla recibe escena propia: pintura a pantalla completa (RetratoPintado) o serigrafía que retrocede con el nombre detrás (Serigrafia).
  2. Panel de grupo solo con más de una persona, cuando la locución junta a alguien ya citado con alguien nuevo que no se profundizará. El panel termina a la altura de los hombros de las figuras. "Nada de genérico."
  3. Sin nadie en la esquina y sin adhesivo con contorno más nombre gigante ("tosco", "cursi"). La imagen ocupa la pantalla.

Estructura

  1. Cambio de tema pide tarjeta de capítulo.
  2. Fecha y acontecimiento: pintura de época a pantalla completa, con título en grotesca blanca y años en bloques unidos por línea punteada.
  3. Final con gancho: si la historia continúa, cierra con la tarjeta Continua.
  4. Aviso inicial solo cuando lo pidan, con texto verdadero sobre el video.

Flujo

  1. Inspecciona el Premiere sin tocar: secuencia, pistas, frame rate. La edición ya viene decupada.
  2. Transcribe la línea de tiempo por palabra con Whisper, en el tiempo de la secuencia, no en el del bruto.
  3. Decupa en un CSV: id;inicio;fin;tipo;locucion;en_pantalla. Cada locución recibe un tipo del catálogo o "cámara". Suma la cobertura y acércate al 80%. Separa por capítulos.
  4. Verifica los hechos de todo lo que va a la pantalla y anota lo que la locución se equivocó.
  5. Reúne y recrea las imágenes (references/imagens.md). Muestra las principales antes de animar sobre ellas.
  6. Crea el proyecto: en la carpeta del video, copia el motor e instálalo. Si la skill está en otro lugar, ajusta la ruta:
    cp -R ~/.claude/skills/cartaz-historico-motion/references/motor ./MOTION
    cd MOTION
    npm install --legacy-peer-deps
    
  7. Anima capítulo por capítulo. Duplica el Molde y renombra el componente y las constantes (Cap01, C1_T0, C1_T1). Escribe los tiempos de la línea de tiempo y regístralos en el Root. Para ver las props en uso, abre Demo.tsx y Exemplos.tsx.
  8. Revisa cada capítulo con hoja de contacto antes de mostrarlo. Mira texto cortado, texto sobre rostro, texto sobre texto y etiqueta que se sale de la pantalla.
    npx remotion render src/index.ts Cap01 out/Cap01_mudo.mp4 --crf=20 --concurrency=4 --gl=angle
    bash tools/folha.sh out/Cap01_mudo.mp4 out/Cap01_hoja.png 6 5
    
  9. Envía el borrador con la voz y espera el "sigue". Juntar el audio de la edición ayuda a quien aprueba a juzgar el tiempo:
    ffmpeg -i out/Cap01_mudo.mp4 -ss INICIO -t DURACION -i audio_edicion.wav -map 0:v -map 1:a -c:v copy -c:a aac -shortest out/Cap01_borrador.mp4
    
  10. Render final y Premiere solo después de aprobado (references/entrega.md): solo los fragmentos animados, en ProRes 4444 XQ con alfa, cada uno en su tiempo, en una pista arriba del presentador.
  11. Entrega diciendo qué se verificó, qué se equivocó la locución, qué quedó fuera y los créditos. Di también qué no se revisó: verificar cuadros no es ver toda la línea de tiempo.

Límites conocidos

  • Solo se ha usado en 1920×1080 a 30 fps. Formato vertical no se ha probado.
  • El acabado final (posterización y halftone) se hizo en After Effects con Sapphire, un plugin de pago. Es opcional y no está en el render de Remotion.
  • Render pesado: un doc de 35 minutos tomó aproximadamente 3 h y 156 GB con GPU, en ProRes 4444 XQ a 1080p.
  • La generación de imágenes depende de un generador externo operado en el navegador, y el resultado varía. Verifica la fidelidad de cada imagen.
  • Los componentes tienen posiciones pensadas para 1920×1080; textos muy largos requieren ajuste de tamaño.

Skills relacionados