Talking-Head B-Roll: gráficos animados a partir de lo que dices

B-roll para cabezas parlantes

La grabación del usuario ya está bien: las palabras y la entrega son definitivas. Una cabeza parlante sola es aburrida de ver, así que el trabajo del video es decidir, para cada tramo del discurso, qué muestra la imagen. La voz nunca se detiene; solo cambia la imagen.

La grabación nunca se corta, mueve, recorta o escala. Todo lo que haces es una capa dibujada encima: transparente donde el hablante debe mostrarse, opaca donde un gráfico lo cubre. scripts/render.mjs coloca esa capa sobre la grabación y conserva su sonido.

Hazlo de una sola vez: no hagas preguntas que la grabación o un valor predeterminado sensato respondan, y enumera lo que elegiste cuando entregues. Trabaja en una carpeta que contenga la grabación y ejecuta los scripts desde allí; los resultados se guardan allí. A continuación, <skill> es la carpeta de esta skill (la que contiene este archivo).

1. Transcripción

node <skill>/scripts/transcribe.mjs talk.mp4            # → transcript.json, e imprime cada línea con su inicio y fin

Imprime el tamaño del video, la velocidad de fotogramas y la duración (que van a la página) y la transcripción dividida al final de las oraciones, con cada palabra cronometrada en transcript.json. Lee toda la transcripción antes de decidir nada. Utiliza whisper.cpp local cuando está instalado, de lo contrario ELEVENLABS_API_KEY; sin ninguno, imprime cómo configurar uno. Las pausas provienen del audio mismo, por lo que los espacios entre oraciones son donde el hablante realmente se detiene; los tiempos dentro de una oración están dentro de unas décimas de segundo. Una transcripción puede malinterpretar una cifra: si una no concuerda con el resto de lo que se dice, mantenla fuera de la pantalla y dilo cuando entregues.

2. Plan: tres tratamientos

A. Hablante. El video solo, nada encima. Úsalo donde la persona es el punto: la línea de apertura, una opinión o historia personal, un momento emotivo, el llamado a la acción, la línea de cierre.

B. Superposición. El video permanece visible; una capa de movimiento transparente se sitúa encima: una palabra clave o frase corta, un número que cuenta hacia arriba, un icono, una flecha, un logotipo, una lista corta que se construye elemento por elemento. Úsalo cuando una línea tiene una cosa concreta que vale la pena ver mientras el hablante todavía vale la pena mirar. Mantén las superposiciones hacia los bordes y el tercio superior o inferior, donde no se superpondrán con la cara del hablante. Una idea en pantalla a la vez; desaparece cuando la línea avanza.

C. Cubrimiento. Una escena de movimiento de fotograma completo opaca oculta al hablante mientras su voz continúa. Úsalo cuando la línea se muestra mejor que la dice una cara: números y comparaciones, un proceso o secuencia de pasos, cómo funciona algo, un producto o interfaz, cualquier cosa con tres o más partes. El movimiento debe explicar la línea, no decorarla.

Divide la transcripción en líneas al final de las oraciones o cláusulas. Asigna a cada línea A, B o C con una razón de una oración, y di qué muestra B o C. Luego verifica el ritmo:

• Abre con A, para que el espectador conozca a la persona; cierra con A.
• Ningún tramo de A de más de unos 8 segundos; interrúmpelo con B o C.
• Un tramo C dura aproximadamente de 3 a 8 segundos; regresa al hablante entre tramos C para que el video no se convierta en una presentación de diapositivas con voz en off.
• Cambia el tratamiento solo en un límite de línea, nunca a mitad de palabra. Temporiza las entradas de superposición a la palabra que ilustran.
• Prefiere menos tratamientos más claros que un cambio en cada línea.

Los subtítulos completos quemados no son parte de esto: agrégalos solo cuando el usuario lo solicite. El texto de una superposición B son unas pocas palabras clave, no la oración que se está diciendo.

El texto en pantalla utiliza palabras que el hablante realmente dice, o números y nombres de la transcripción o los materiales del usuario. No inventes cifras, afirmaciones o citas.

3. Construye la página

Copia <skill>/templates/b-roll.html junto a la grabación como page.html y establece:

• VIDEO, W × H (la forma del video: 1920 × 1080, o 1080 × 1920 para vertical; un archivo 4K puede mantener una página de 1920 × 1080), FPS, DURACION, de lo que imprimió transcribe.mjs.
• FACE: dónde está la cabeza del hablante (con cabello y un poco de espacio alrededor), como fracciones del fotograma. node <skill>/scripts/render.mjs page.html face --stills 2s,20s --face muestra la grabación con el recuadro; ajústalo hasta que contenga la cabeza en cada imagen fija.
• SCENES: una entrada por tramo B o C, { from, to, kind: 'overlay' | 'cover', draw }, tiempos tomados de las temporizaciones de palabras en transcript.json. Todo lo que no está en una escena es A. Dos escenas pueden encontrarse (el to de una es el from de la siguiente); una rebanada del hablante entre ellas se lee como un parpadeo.
• Una draw(t, s) por escena, escrita para lo que dice esa línea. Las dos de la plantilla (una tarjeta de palabra clave y un número contador) muestran la estructura, no la apariencia. s.in y s.out dan la entrada y salida; s.now es el tiempo en el video, para temporizar una revelación a la palabra que muestra.

Las superficies por defecto son CLARAS. Oscurece solo cuando (a) el usuario o la marca lo soliciten explícitamente, o (b) el tema inherentemente vive en una superficie oscura (terminal/código, cielo nocturno, cine). Neón sobre negro es el cliché predeterminado de cada video de IA; elegirlo sin que se lo pidan es un fracaso de diseño.

Fuentes: un <link> de Google Fonts por familia con los pesos que usas, y cada cara que dibujas enumerada en FONTS, para que nada se renderice en una fuente de respaldo (el renderizado necesita acceso a la red para cargarlas).

4. Verifícalo

node <skill>/scripts/render.mjs page.html --check                 # el plan contra la transcripción y los píxeles
node <skill>/scripts/render.mjs page.html film.jpg --sheet 1      # toda la película, un fotograma por segundo, sobre la grabación
node <skill>/scripts/render.mjs page.html shot --stills 12s,20s   # fotogramas completos, para leer texto y espaciado

--check debe pasar: cada cubrimiento oculta al hablante completamente una vez que está dentro, ninguna superposición llega a FACE, cada escena comienza y termina entre palabras, nada se dibuja fuera de una escena, ningún texto se sale del fotograma o se superpone a otro texto. Advierte cuando el texto está dentro del 3% del borde del fotograma, donde algunos reproductores recortan. También imprime la línea de tiempo con lo que se dice en cada tramo y advierte sobre el ritmo (un tramo largo de solo el hablante, un cubrimiento de menos de 3 s o más de 8 s, cubrimientos consecutivos, no abrir o cerrar con el hablante); una advertencia puede mantenerse cuando tienes una razón, así que dilo.

No puede decir si un gráfico dice lo que dice su línea, si el texto es legible, o si se sale de su tarjeta o cruza una línea de un gráfico: mira la hoja para el flujo y las imágenes fijas de cada escena para el texto. Corrige y vuelve a mirar hasta que se sostenga.

5. Renderiza y entrega

node <skill>/scripts/render.mjs page.html film.mp4        # la película terminada: la grabación, el b-roll sobre ella, el sonido original
node <skill>/scripts/render.mjs page.html b-roll.mov      # el b-roll solo con canal alfa: ProRes 4444 para Premiere Pro, Resolve, Final Cut
node <skill>/scripts/render.mjs page.html b-roll.webm     # lo mismo en VP9 con alfa: pequeño, para navegadores y OBS

Entrega film.mp4, la página (ábrela en un navegador para reproducir la película con sonido y navegar por las escenas), y el plan como una tabla corta: tiempo, lo que se dice, tratamiento, lo que está en pantalla. Entrega también la capa alfa cuando el usuario edite en Premiere Pro, DaVinci Resolve o Final Cut (el .mov; ProRes es grande, aproximadamente 5 MB por segundo a 1080p): va en la pista sobre la grabación, comenzando en 0. Di lo que elegiste que no pidieron.

Necesita: Node 18+, npm i playwright-core en la carpeta de trabajo o en cualquier carpeta superior (o en la propia carpeta de la skill o superior), ffmpeg, Chrome (o npx playwright install chromium), y whisper.cpp o una clave de ElevenLabs para la transcripción.