Video Explicativo

¿Qué hace Video Explicativo?

Convierte un mensaje en un video corto narrado de 30 a 90 segundos. Ejecuta el flujo completo: guion → storyboard → construcción de escenas → sincronización narración/subtítulos → edición → pulido, con un sistema de estilo consistente en todo el proceso.

Cuándo usarlo

• Produce un video de producto, explicación de funcionamiento, incorporación o concepto de 30 a 90 segundos.
• Partir de una idea o característica en bruto hasta llegar a un guion, storyboard y pieza ensamblada.
• Sincronizar narración con elementos visuales y añadir subtítulos para reproducción silenciada.

Estructura de la historia (decide esto primero)

Un video explicativo es un argumento, no un recorrido de funciones. Antes de cualquier paso del flujo, fija la narrativa para que cada decisión posterior la sirva.

• Una idea central. Una sola frase que el espectador pueda repetir después. Si no puedes expresarlo en una línea, el video no tiene columna vertebral: reduce el alcance hasta que puedas. Todo lo que no sirva a esa idea se elimina, no se reduce.
• Guion primero. La voz en off es la columna vertebral; los visuales ilustran la línea que se está diciendo, nunca la lideran. Escribe y cronometra las palabras antes de hacer storyboard o animar: es mucho más barato cortar una frase que una escena construida.
• Gana el "cómo" con consecuencias. No saltes del problema al mecanismo. Haz que el espectador sienta el costo del problema primero; esa tensión es lo que hace que vean la solución.

El arco narrativo del video explicativo — un latido por etapa, en orden:

Etapa	Trabajo narrativo	Lo que el espectador debería pensar
Problema	Nombra el dolor en sus palabras	"Eso soy yo."
Consecuencias	Muestra lo que cuesta el dolor (tiempo, dinero, riesgo)	"Necesito que esto se arregle."
Solución	Presenta el producto/idea como la solución, en una línea	"Oh — eso lo resuelve."
Cómo funciona	El mecanismo en 1–3 pasos concretos	"Entiendo cómo hace eso."
Recompensa / CTA	El estado posterior + una próxima acción	"Quiero eso. Haré X."

(La tabla Fórmula del guion a continuación asigna a estas etapas porcentajes de duración y presupuestos de palabras — esta sección es el por qué y el orden; esa es el cuánto tiempo.)

Elige una analogía y mantenla

Los mecanismos abstractos se entienden cuando se asignan a algo que el espectador ya conoce. Elige una sola metáfora y mantenla consistente entre escenas — cambiar de analogía a mitad del video reinicia la comprensión.

• Elige una metáfora del mundo del espectador (una cola, un termostato, una línea de ensamblaje), no del dominio técnico.
• Una metáfora por video; reutilízala tanto para la gramática visual como para el lenguaje de la voz en off.
• Pruébala: si la analogía necesita su propia explicación, es la equivocada.

Ritmo por latido

El ritmo sigue la tensión. Avanza rápido por Problema/Consecuencias para llegar al valor; disminuye en el "cómo" para que cada paso se asiente; deja que la recompensa respire.

Latido	Sensación	Ritmo de corte
Problema / Consecuencias	Ágil, un poco tenso	Cortes más rápidos, planos cortos
Solución	Un momento de alivio	Un plano claro y sostenido
Cómo funciona	Deliberado, un paso a la vez	El más lento — mantén cada paso para leerlo
Recompensa / CTA	Seguro, abierto	Mantén la tarjeta final; un solo CTA

El flujo

1. Guion — un mensaje central. Estructura: problema → solución → cómo → recompensa. Escribe una voz en off (VO) concisa; cronomértala a ~2.3 palabras/segundo (≈140 ppm). Un video de 60 s son ~138 palabras.
2. Storyboard — una idea por escena. Dibuja cada plano más su transición; asigna cada línea de VO a un visual.
3. Construir escenas — anima diagramas/datos, texto cinético/palabras clave y fondos (técnicas integradas más abajo).
4. Narración y subtítulos — graba/genera la VO, alinea los cortes de escena con los latidos de la VO, incrusta subtítulos (la mayoría de las reproducciones son silenciadas).
5. Editar — corta según la narración, mantén cada idea el tiempo suficiente para que se asiente, elimina cualquier escena que no avance el mensaje.
6. Pulir — corrección de color, curvas de suavizado consistentes, mezcla de audio, tarjeta final.

Fórmula del guion

Latido	Trabajo	Proporción de duración
Problema	Nombra el dolor que siente el espectador	~20%
Solución	Presenta el producto/idea como la solución	~15%
Cómo	Muestra el mecanismo, 1–3 pasos concretos	~45%
Recompensa	El resultado + un próximo paso claro (CTA)	~20%

Escribe la VO primero, en lenguaje hablado (contracciones, frases cortas). Léela en voz alta y cronomértala antes de construir nada.

Cálculo de temporización de VO

• Ritmo: ~2.3 palabras/s (140 ppm) para una narración clara y amigable; reduce líneas técnicas lentas a ~2.0.
• Estima la duración de la escena a partir de su línea de VO: segundos = palabras / 2.3, luego añade ~0,4 s de margen de respiración.
• Una escena sin VO (latido puramente visual) aún necesita ≥1,0 s para registrarse.

Técnicas de construcción de escenas (integradas)

Revelación de diagrama / datos (divulgación progresiva: nodos → aristas → etiquetas):

import gsap from "gsap";
gsap.set(".edge", { strokeDasharray: 1, strokeDashoffset: 1 });
gsap.timeline()
  .from(".node", { opacity: 0, scale: .85, transformOrigin: "center",
                   duration: .45, stagger: .3, ease: "back.out(1.5)" })
  .to(".edge",  { strokeDashoffset: 0, duration: .5, stagger: .3 }, "-=0.6");

Palabra clave cinética (la palabra aparece en la sílaba acentuada):

.kw { display:inline-block; opacity:0; transform:translateY(18px); }
.kw.in { opacity:1; transform:none; transition:all .4s cubic-bezier(.22,1,.36,1); }

Contador ascendente de estadísticas:

function countUp(el, to, dur=1200){ const t0=performance.now(); (function f(n){
  const k=Math.min(1,(n-t0)/dur), e=1-Math.pow(1-k,3);
  el.textContent=Math.round(to*e).toLocaleString(); if(k<1)requestAnimationFrame(f);})(t0); }

Renderiza la pieza ensamblada con Remotion (basado en datos, determinista) o After Effects.

Sincronización de subtítulos

Los subtítulos son obligatorios: asume reproducción automática silenciada. Usa una lista de señales .srt/.vtt sincronizada con la VO. Mantén ≤2 líneas, ≤42 caracteres/línea, en pantalla ≥1,0 s, desaparecidos antes de que comience la siguiente línea.

1
00:00:00,300 --> 00:00:02,600
Gestionar lanzamientos a mano es lento.

2
00:00:02,800 --> 00:00:05,400
Shipfast automatiza todo el flujo.

En Remotion, impulsa los subtítulos desde el mismo array de temporización utilizado para los cortes de escena para que nunca se desvíen.

Consistencia del sistema de estilo

Fija una escala tipográfica, una gramática de color (color = significado, nunca reasignado) y una curva de suavizado antes de construir la escena 2. Reutiliza las mismas transiciones de entrada/salida en todas las escenas para que la pieza se sienta como un solo objeto, no como un montaje de experimentos. Los elementos visuales deben ilustrar la línea de VO que se está diciendo en ese momento — muestra, no decores.

Lista de verificación de salida

• Un solo mensaje claro; cada escena lo avanza.
• VO cronometrada (~2.3 p/s); duraciones de escena derivadas de la VO.
• Storyboard asigna cada línea de VO a un visual.
• Subtítulos incrustados/disponibles; ≤2 líneas, legibles.
• Sistema de tipo/color/movimiento consistente en todas las escenas.
• Tarjeta final con un solo CTA claro.

Entregar y verificar (fotos fijas renderizadas → MP4)

Asistente empaquetado (scripts/): organiza tus fotos fijas con scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, luego verifica la codificación con scripts/probe-mp4.sh out.mp4 [WxH] [fps]. Consulta scripts/README.md.

El video explicativo ensamblado es una composición de Remotion — determinista por fotograma, por lo que cualquier fotograma exacto se renderiza sin cabeza y sin necesidad de un arnés de búsqueda. Usa este nivel cuando el entregable sea un MP4/GIF que lleve narración incrustada y subtítulos quemados; para una escena web única, entrega HTML independiente.

Contrato de salida:

• Un proyecto de Remotion con la composición registrada (<Composition> + esquema zod + defaultProps), todo el movimiento impulsado por fotogramas (sin temporizadores / Date.now() / Math.random()).
• Entregable = el out/*.mp4 renderizado (más el proyecto, para que la VO/guion/datos se puedan volver a renderizar).
• Narración mediante <Audio src={staticFile()}>; temporización de VO/escena incorporada en props (sin audio en tiempo real al renderizar). Subtítulos impulsados desde ese mismo array de temporización para que nunca se desvíen.
• ¿La duración depende de los datos? calcúlala en calculateMetadata, no a mano.

Bucle de verificación — renderiza fotos fijas → inspecciona → codifica. Renderiza primero fotogramas individuales (baratos, sin codificar), inspecciónalos, codifica solo una vez que los fotogramas estén correctos.

# Fotos fijas exactas al inicio / medio / final — renderiza con las props ENVIADAS, no solo las predeterminadas
npx remotion still Explainer out/f-start.png --frame=0   --props='{...}'
npx remotion still Explainer out/f-mid.png   --frame=N   --props='{...}'
npx remotion still Explainer out/f-end.png   --frame=L   --props='{...}'   # L = durationInFrames - 1

# Inspecciona: guion→storyboard→escena se asignan a fotogramas — toma una muestra de un fotograma DENTRO del plano de CADA escena,
# confirma que la línea de narración y el subtítulo están sincronizados con el visual en ese fotograma, sin desbordamiento de texto / fuera del lienzo.

# Solo después de que las fotos fijas estén bien, codifica:
npx remotion render Explainer out/explainer.mp4 --props='{...}'

• npx remotion compositions lee durationInFrames/fps para elegir el fotograma final y los fotogramas de plano de cada escena.
• GIF de demostración para README gratis: npx remotion render Explainer out/demo.gif --codec=gif.

Antes de terminar:

1. npx remotion still se renderiza limpiamente en el fotograma 0, un fotograma dentro del plano de cada escena y el último — sin errores, sin activos/fuentes faltantes.
2. En cada fotograma de escena muestreado, el subtítulo y la línea de VO hablada coinciden con el visual en pantalla (sin desviación).
3. Los subtítulos están dentro de áreas seguras, ≤2 líneas, legibles; el texto es exacto y no está recortado.
4. Solo impulsado por fotogramas — sin Date.now() / Math.random() / temporizadores; las props enviadas se renderizan correctamente (no solo defaultProps).
5. MP4 completo codificado y se reproduce con narración; (opcional) GIF renderizado para el README.

Archivos de referencia

• references/script-to-screen-workflow.md — detalle completo del flujo: la fórmula de guion problema→solución→cómo→recompensa con un ejemplo práctico y presupuesto de palabras, tablas de temporización de VO, una plantilla de storyboard para rellenar con códigos de tiempo, una lista de verificación de construcción por escena, guía de creación de subtítulos (VTT/SRT) y una hoja de especificaciones del sistema de estilo para consistencia entre escenas.