Vox video generator

Pipeline para producir animaciones estilo Vox: ese look de collage editorial de papel (recortes con borde blanco de sticker, textura halftone, fondo de papel crema, trazo rojo de marcador) donde las ilustraciones aparecen con pop y acompañan una voz en off. Se ve caro porque sigue una receta visual estricta, no porque cada pieza sea difícil.

El pipeline tiene tres piezas que encajan:

1. Generar cutouts en ChatGPT (navegador) sobre fondo verde chroma.
2. Recortar el verde con scripts/key_cutout.sh (deja PNG con transparencia real).
3. Animar en Remotion con los helpers de assets/vox-helpers.tsx.

La técnica viene del video de MoSidd "I Made Vox-Style Motion Graphics Using Only Claude Code and Remotion" (youtube 7wuYBfE131U), refinada en producción real.

El sistema visual (la receta lockeada, no negociable)

Lo que hace que se vea Vox y no genérico:

• Un fondo compartido que NUNCA corta. Papel crema con grano y viñeta, igual en todas las escenas. Da la sensación de un solo plano continuo aunque los recortes cambien. Las escenas se montan encima con hard cuts; el fondo no.
• 3 capas por escena: fondo compartido, midground (recortes en blanco y negro con patrón halftone, para personas y objetos de contexto), foreground (recortes a color, el elemento foco).
• Trazo rojo offset detrás de los recortes midground (drop-shadow duro rojo). Es la firma del estilo, da una ilusión 3D de papel recortado.
• Paleta fija: papel #f3ebdc, tinta #191510, amarillo #fbbf24, rojo marcador #d64a33. Fuentes: Montserrat 900 para titulares, Caveat para notas manuscritas.
• Animar con intención, solo 2 primitivas: spring() para los pops (con rotación que se asienta) e interpolate() para todo lo demás (count-ups, Ken Burns lento, barridos de highlighter, círculos de marcador que se dibujan). Entradas escalonadas, nunca todo a la vez.

Fase 1: guión a storyboard

El guión manda: cada beat de la voz mapea a un visual. Antes de generar nada, lista las escenas y, por cada una, qué recortes necesita. Decide el titular de cada escena y qué palabra resaltar en amarillo. Mantén el fondo lockeado en mente: las escenas comparten fondo, solo cambian los recortes encima.

Para reels verticales el lienzo es 1080x1920; para YouTube/horizontal 1920x1080.

Limpiar el guión antes de storyboard (video grabado en una sola toma)

Cuando la fuente es un video grabado (no un guión escrito), primero destila el guión coherente a partir del audio:

1. Transcribe con timestamps a nivel de palabra, modelo medium o mejor. El modelo small a veces colapsa tartamudeos y retomas y los oculta; si sospechas una retoma, re-transcribe esa región aislada para verla.
2. Regla de retomas (SIEMPRE): si algo se dice dos o más veces —retoma, tropiezo o reinicio de frase— deja solo la ÚLTIMA versión y corta las anteriores. La última toma es la buena, aunque la primera suene bien. Corta desde el inicio de la primera ocurrencia hasta el inicio de la última, siempre en un silencio.
3. Corta lo irrelevante: muletillas sueltas fuera de lugar, palabras erradas del inicio, y pausas muertas largas (recórtalas con hard cut en frontera de frase).
4. Corta los silencios en los gaps del transcript (busca huecos > 0.7s entre palabras) y verifica con silencedetect que el punto de corte cae en silencio.

Fase 2: generar los cutouts en ChatGPT (navegador)

Usa el Chrome MCP (mcp__claude-in-chrome__*) para manejar chatgpt.com. Genera cada recorte como imagen. El prompt template que funciona (ajusta el sujeto):

flat editorial paper-collage cutout illustration of [SUJETO CONCRETO],
thick white sticker border around the whole cutout, subtle halftone print texture,
muted warm palette: cream, black, mustard yellow, one soft red accent,
vintage magazine collage feel, Vox explainer style. Single isolated element
centered on a SOLID FLAT pure green background, hex #00FF00, filling the entire
canvas. No checkerboard, no gradients, no texture on the background: just uniform
flat green everywhere around the sticker.

Para personas y objetos de fondo (capa midground), añade: rendered in BLACK AND WHITE with a coarse halftone dot pattern (vintage newspaper print feel).

Para varios elementos separados en una imagen (ej. tres productos en fila), pide que estén "clearly separated with space between them" y luego se cortan por columnas.

Dos gotchas que te ahorran horas

1. Verde chroma, NO "fondo transparente". Si pides "transparent background", ChatGPT pinta un patrón de tablero de ajedrez FALSO (no es transparencia real, es una imagen del checkerboard). El fondo verde plano #00FF00 es la vía confiable porque se recorta perfecto con chroma key. Siempre verde.
2. Descarga por el lightbox, no por el modal de compartir. Para bajar la imagen: haz click sobre la imagen en el chat para abrir el visor grande (lightbox), y usa el icono de descarga de la barra superior. El modal de "Compartir" (con botones Copiar enlace / X / LinkedIn / Descargar) es inestable: tras cerrarse se come los clicks y el texto que escribas durante ~2-3 segundos, y el prompt siguiente se pierde. Si usas el modal, espera y verifica la descarga en ~/Downloads antes de seguir. El lightbox es más confiable.

Genera los recortes con run_in_background cuando el render tarde, y verifica cada descarga (ls -t ~/Downloads/*.png | head -1, revisa que la esquina sea verde con PIL).

Fase 3: recortar el verde (chroma key)

Cada PNG verde pasa por el script, que hace ffmpeg colorkey + despill + crop:

bash scripts/key_cutout.sh "entrada_verde.png" "public/vox/salida.png"

Imprime el tamaño resultante y residuo_verde=N/total. Si el residuo no es 0, sube el umbral del colorkey. Guarda las dimensiones reales (ancho y alto) de cada recorte: las necesitas en Remotion para no deformarlo.

Para cortar una tira de varios elementos en cutouts individuales, detecta las columnas totalmente transparentes con PIL y recorta por segmento (ver el patrón en references/remotion-vox.md).

Fase 4: animar en Remotion

Copia assets/vox-helpers.tsx a src/vox/helpers.tsx de un proyecto Remotion. Pon los cutouts recortados en public/vox/. Cada escena usa los helpers; el master monta las escenas sobre SharedBackground.

Los helpers (todos en assets/vox-helpers.tsx, listos para importar):

• SharedBackground — el fondo de papel lockeado. Va una vez, detrás de todo.
• Cutout — recorte con pop spring. Props: src, delay, w, h, x, y, rot, midground, drift, flip. midground activa el trazo rojo offset. Pasa h con el alto real para no deformar.
• Headline + Hi — titular Montserrat con palabra resaltada en amarillo (barrido).
• HandNote — nota manuscrita Caveat (anotación de editor).
• MarkerCircle — círculo de marcador que se dibuja alrededor de algo.
• CheckChip — chip de papel con check, para listas.
• SceneZoom — Ken Burns lento de escena completa (feel de un plano continuo).

Patrón de escena y master sequence: ver references/remotion-vox.md para el código de una escena, el master, la config de calidad, y los comandos.

Iterar barato: renderiza un frame para revisar, no el video entero.

npx remotion still <Composicion> /tmp/test.png --frame=100   # ~5s, iteras aquí
npx remotion render <Composicion> out/video.mp4              # solo cuando esté aprobado

Verifica cada escena con un still antes de renderizar. Ajusta posiciones (x, y), delays y dimensiones mirando el still, no adivinando.

Reglas de calidad aprendidas

• Config de render: Config.setVideoImageFormat("png") + Config.setCrf(16) para que no se vea con pérdida.
• Solo lógica determinista en Remotion: nada de Date.now(), Math.random() ni fetch(). El render scrubea por frames y necesita ser reproducible. El grano y el jitter del fondo usan el número de frame, no aleatoriedad.
• Entradas escalonadas: cada recorte con su delay, nunca todo en el frame 0.
• Si un cutout sale deformado, casi siempre es que faltó pasar h (el alto real).
• Archiva los verdes originales (assets-verdes/) por si hay que re-keyear con otro umbral, y los cutouts finales (cutouts/) por si reusas en otro video.

Recursos de este skill

• scripts/key_cutout.sh — el recortador de verde chroma (ffmpeg + PIL).
• assets/vox-helpers.tsx — todos los helpers de Remotion, listos para copiar.
• references/remotion-vox.md — setup del proyecto Remotion, código de escena y master, config de calidad, patrón de corte de tiras, comandos. Léelo al llegar a la Fase 4.