iamjeffia/estudio-ia

Motion narrado: la escena se construye con la voz

Fecha: 2026-10-22 · Tipo: guía · Estado: vigente

Resumen: reglas para animar sobre la narración: nada aparece antes de ser dicho, la leyenda da tiempo de leer, cada idea gana un elemento real o una metáfora visual, y la pantalla solo cambia después de que termina la frase. Funciona en cualquier motor (elige en estudio-video). Números de partida en reglas.md.

Antes de empezar, sigue la video-referencias (referencia asistida y recursos reales). El video narrado de producto o software suma estas reglas con el estándar de animacao-saas, con la voz en lugar del golpe dando el tiempo de cada transformación.

El insumo: tiempos por palabra

Todo parte de la narración aprobada y transcrita palabra por palabra (words.json: palabra, inicio, fin). Si la narración se acelera después, transcribe el archivo ya acelerado y anima sobre él.

Storyboard antes del ritmo

En tutorial y explicativo, menos es más: cada elemento tiene propósito, entra en el momento justo y sale o se convierte en el siguiente. Animaciones más largas y suaves, una idea principal en pantalla a la vez, siempre algo vivo, y efecto de sonido solo donde suma. Punto de partida:

• una composición por frase, de 4 a 6 s;
• elemento nuevo cada 1,5 a 2 s, en la palabra que lo nombra;
• máximo 3 cosas además de la leyenda (1 principal + 2 apoyos);
• la mitad de los cambios es un elemento convirtiéndose en el siguiente, no un corte.

Apertura de Reel cinético puede correr mucho más rápido (algo nuevo cada medio segundo); declara en el proyecto qué ritmo vale para cada tramo. Duraciones de entrada, salida y cámara en reglas.md.

Regla 1 — Nada aparece antes de ser dicho

Cada elemento entra en el momento de la palabra que lo justifica (hasta ~0,15 s antes, nunca segundos antes). La escena comienza vacía o solo con la leyenda y se va montando.

Incorrecto	Correcto
la tarjeta del producto visible desde el inicio de la escena	el ícono nace cuando la voz dice el nombre, con animación propia; en el nombre completo vuela al encabezado y la tarjeta se monta
barras estáticas esperando ser activadas	las barras surgen en la palabra "primera parte" y la primera se llena a continuación
tres pasos fundidos antes de ser mencionados	cada paso entra cuando se habla
el celular ya abierto en "funciona así"	la foto del asunto entra cuando se dice; el celular entra en "investigación en la app"

Cómo aplicar: antes de animar, escribe la tabla palabra → tiempo → elemento que entra. En la revisión, busca en la hoja de contacto cualquier elemento que aparezca sin haber sido mencionado.

Excepción: el héroe de la escena (el celular donde ocurre la acción) puede estar en pantalla desde el principio, si la voz ya habla de él.

Regla 2 — Leyenda que da tiempo de leer

• Frases de 4 a 9 palabras, en hasta 2 líneas quebradas a mano. Fragmentos de 1 o 2 palabras que se suceden sin parar desaparecen antes de ser leídos.
• Tiempo mínimo de lectura: cada frase permanece al menos ~0,6 s después de que entre la última palabra. La siguiente espera a que la anterior salga; puede retrasarse hasta ~0,5 s respecto a la voz, nunca adelantarse.
• Sin saltos de línea automáticos: la fuente se encoge para caber. Esto garantiza que nunca nazca una tercera línea oculta detrás del celular.
• Palabra por palabra con máscara: cada palabra sube desde dentro de una caja recortada (de 100% a 0, con leve desenfoque). Palabra flotando suelta, con desenfoque y desplazamiento libre, parece amateur.
• Generar la leyenda a partir de la voz: uv run scripts/video/make_captions.py.

Regla 3 — Destacado sin resaltador y sin repetición

• Evita el resaltador (franja de color detrás de la palabra): es cortado por la máscara palabra a palabra y resulta repetitivo.
• Estándar: la palabra clave cambia al color de destaque del video y sube un grosor. Como máximo una por frase.
• Varía cuando el destaque importa: logo oficial dentro de la línea, un elemento que nace de la palabra (la letra del logo), un contador, un anillo de destaque en la tarjeta. No repitas el mismo recurso en escenas seguidas.
• Texto de destaque grande siempre con acabado: degradado, brillo, textura, contorno o la palabra rellena con filmación.

Regla 4 — Elemento real y metáfora para cada idea

• Lugar real → captura real. "Negocio local" pide el mapa de verdad: captura de Google Maps por Chrome sin ventana (--headless --window-size=1900,1600 --force-device-scale-factor=2 --virtual-time-budget=20000 y la URL .../maps/place/<ciudad>/@lat,lng,13.5z). Por encima, marcadores de negocios reales, posicionados por proyección Mercator con el mismo centro y zoom (verifica graficando todos los puntos antes). "Tu empresa" es el único pin en el color de destaque.
• Analogía popular → ilustración de ella. "Más lento que fila de centro de salud" pide el símbolo oficial del servicio, la foto de una fila (personas de espaldas, sin texto legible) y el panel de ticket LED con "tiempo de espera: 4 horas". Un ticket genérico no comunica la broma.
• Logo, ícono y SVG: siempre el oficial del sitio de la marca. Logo de tercero identifica el asunto, nunca aparece como socio.
• Ilustra el concepto, no enumeres. "Cuello de botella" es un flujo que se traba: clientes llegando y acumulándose en una etapa, contador subiendo, carga que se detiene, etiqueta "trabado".
• Emoción sin video reutilizado. No uses video de persona hecho para otra situación. Un emoji en SVG que cambia con la voz (neutro → enojado → rojo con vapor) funciona mejor; persona real pide material nuevo.
• Cada frase dicha debe tener una traducción visual literal. Si la frase no tiene elemento, la leyenda sola debe bastar.

Regla 5 — Cambios de escena, voz y golpe

• Cambio de pantalla solo después de la voz. La nueva escena comienza después de que la última palabra de la frase anterior haya terminado (fin de la palabra + un respiro corto). Si la transición cubre la pantalla antes del corte, cuenta ese tiempo. Solo entonces ajusta al golpe más cercano, si está a hasta ~0,2 s.
• Medir la pista: uv run scripts/sonido/batida.py marca golpes y tiempos fuertes (mira --help; también verifica un render contra la pista). Meta: la mayoría de los cortes en el golpe.
• Apertura de escena en el bombo; la parada de la pista cae en el giro del guion (adelanta o atrasa la música).
• Narración seca, música bajando bajo la voz y siguiendo el video entero. Si hay apertura musical cinematográfica, la voz viene después, nunca por encima. Elección de música, efectos y mezcla: skill som-do-video.

Regla 6 — Acabado

• Nada detrás del héroe: la leyenda en una franja propia (en la parte superior, en video vertical), el héroe debajo de ella.
• Ningún efecto cortado a la mitad por una transición: un destaque solo comienza si tiene tiempo de terminar antes de la salida de la frase.
• Transición suave: la nueva escena entra por encima, saliendo del desenfoque y de una escala ligeramente mayor. La escena antigua permanece opaca, solo se desenfoca y encoge; dos escenas semitransparentes dejan un velo gris.
• Escena oscura solo de texto puede respirar hasta ~1 s antes de la primera palabra; escena clara no abre vacía por más de ~0,3 s, a menos que el elemento aún no haya sido dicho.

Regla 7 — Recursos de acabado que funcionan

Recurso	Cuándo usar	Cómo
Cámara que sigue la acción	escritura, toque, mensaje: el ojo necesita ir al detalle	cierra (escala ~1,3–1,5) en el punto de la acción y vuelve; la leyenda queda fuera de la cámara
Mano-cursor con ondas	cada clic o toque mostrado	punta del dedo en el objetivo; aprieta y suelta dos ondas; sonido de toque
Transición de puntos	2 o 3 grandes giros (escena de impacto, marca, CTA); no en todas	malla de bolitas en los colores del video que cubre la pantalla, corte en medio, revela la siguiente
Pin con foto + radar	mapa o local	foto redonda con borde blanco y nombre; radar girando en el pin principal
Pila de palabras	beneficios dichos en serie	la palabra dicha entra en el centro, la anterior sube apagada
Isla de la parte superior del celular	notificación o mensaje llegando	píldora negra que se expande con resorte
Logo por trazo	revelación de la marca	trazo que se dibuja y luego se rellena
Fondo claro con brillo pastel	escena clara	un tono por escena
Contador que rueda	número citado	sube hasta el valor al entrar
Onda con píldoras	"de punta a punta", proceso por etapas	línea ondulada que se dibuja y recibe una píldora por etapa dicha
Elemento-guía que la cámara sigue	recorrido por varias pantallas	un punto viaja entre pantallas reales en un "mundo" más grande que la pantalla; cada pantalla se enciende cuando llega; al final la cámara abre y muestra todo

En After Effects con el Motion Kit AE, prefiere las operaciones listas del kit (resorte, entrada, salida, cámara viva) a escribir expresión desde cero. En HyperFrames o Remotion, todo se convierte en función del tiempo (t), sin reloj real, para que el mismo fotograma salga igual en todo render.

Checklist antes de renderizar

• Tabla palabra → elemento escrita; ningún elemento antes de la palabra.
• Leyenda: frases de 4 a 9 palabras, máximo 2 líneas, lectura mínima, nada detrás del héroe.
• Ningún resaltador; destacados variados.
• Cada analogía, lugar o marca mencionada tiene imagen real o ilustración clara.
• Ningún cambio de pantalla antes del fin de la frase; cambios verificados contra el golpe.
• Clics mostrados con mano-cursor; cámara cierra en acciones pequeñas; máximo 3 transiciones de puntos.
• Ningún video reutilizado fuera del contexto original.
• Hoja de contacto y recortes ampliados revisados, buscando spoiler, texto oculto, efecto cortado y pantalla vacía (uv run scripts/video/detectar_saltos.py en el render).
• Comparado lado a lado con la referencia y con el mejor video anterior del mismo tipo: ¿es mejor en conjunto? Si no, aún no está listo.