Aryanban/saas-product-demo-video

Video de demostración de producto SaaS

Construye un cortometraje de producto en Remotion, sincronizado con el ritmo de su banda sonora, con la marca del producto y a partir de sus pantallas reales. El mismo flujo cubre demos horizontales, reels verticales, películas con capas de b-roll, productos sin interfaz que grabar y una película que ya existe y necesita una oleada de cambios.

Un reel genérico de gráficos en movimiento es fácil de hacer y fácil de ignorar, y también lo es el creado por IA que los dueños ahora reconocen a simple vista. Lo que diferencia una película de esos se reúne antes de que exista cualquier escena: los activos y pantallas reales del producto, un look tomado de películas de referencia que le gustan al usuario, una cuadrícula de tiempos extraída de la banda sonora y un argumento visual que la película defiende. El resto de esta skill es artesanía construida sobre eso.

Comienza en la rama correcta

• Una película nueva. Recopilación, look, andamiaje, beats, brief, el punto de control, la construcción: el flujo a continuación, con el razonamiento en references/workflow.md.
• Una película existente. Lee docs/video/notes.md (primero todas las entradas de "decisión"), el brief y la última entrega, inspecciona el render aceptado y la fuente por separado, y clasifica la solicitud antes de tocar nada: un ajuste va detrás de un conmutador, un rediseño mantiene cada tiempo y movimiento, una reconstrucción recibe un storyboard o bancos de prueba. references/iteration-playbook.md, "Clasifica la solicitud primero". No repitas la recopilación ni reabras el look para una pequeña corrección.
• Solo crítica o planificación. Revisa el render (references/self-check.md, references/taste-review.md) y devuelve una lista clasificada; no construyas nada. Di en qué evidencia se basa cada hallazgo: una imagen fija, una medición o la reproducción, que no puedes hacer.
• La narración marca el ritmo. El andamiaje se guía por la música. Una película sincronizada con una voz en off coloca sus eventos a mano (BEAT_SYNCED = false en el archivo de tiempos) y el brief dice que los cortes no coincidirán con la música; dilo antes de empezar.

Definición de terminado

• Un proyecto Remotion con una composición maestra y una composición de depuración por escena; cada cambio candidato detrás de un conmutador cuyo valor por defecto es el look enviado.
• docs/video/brief.md: las entradas, el look, el argumento visual en una oración, el guion escena por escena, las suposiciones.
• beats.json y un archivo de tiempos que cada escena lee sus fotogramas, por lo que cambiar un índice de beat refluye la película.
• Un MP4 HD (1920x1080 o 1080x1920), etiquetado con color, una imagen fija de miniatura y un render 4K con la aceptación del propietario que lleva el audio del HD.
• Cada escena verificada por ti en imágenes fijas renderizadas antes de que el usuario la viera; las palabras contadas; al propietario se le dijo qué se midió y que nadie la ha visto.
• docs/video/notes.md con cada oleada y cada decisión, y un archivo de entrega cuando la sesión termina con trabajo abierto.
• Opcionalmente, de cuatro a ocho efectos de sonido detrás de la propiedad sfx de la maestra, medidos en sus eventos, con un render Maestra-SinSfx junto a la maestra para que el usuario elija de oído.

El flujo

1. Configuración. Verifica las herramientas y anota lo que falta. references/setup.md
2. Recopilación. Envía el cuestionario como un solo mensaje y registra las respuestas; captura el sitio de hoy, no la memoria. references/asset-intake.md, references/product-ui-from-site.md
3. Look y argumento. Desglosa dos o tres videos de referencia en verbos de transición, ritmo y movimientos característicos; escribe la oración que la película argumenta y el movimiento característico. references/reference-video-vibe.md, references/creative-direction.md
4. Andamiaje. Copia assets/scaffold/ en el proyecto e instala. references/project-scaffold.md
5. Beats. Ejecuta scripts/detect-beats.py en la banda sonora, escribiendo beats.json sobre el marcador de posición del andamiaje, y actúa según su veredicto de fiabilidad. references/beat-sync.md
6. Brief y primeras escenas. Escribe docs/video/brief.md, construye la escena 1 y la primera escena que muestra el producto, verifícalas en imágenes fijas, luego detente en el punto de control a continuación.
7. Construcción completa. Construye las escenas restantes y la maestra, verificando cada una en imágenes fijas, contando las palabras, realizando el pase de atención. Luego la capa de sonido, si la película la tiene: references/sound-effects.md, antes de la primera oleada de correcciones, para que cada señal se asiente en un fotograma que ha dejado de moverse.
8. Oleadas de correcciones y envío. Recopila las notas del usuario en lotes, corrige detrás de conmutadores, renderiza con las banderas de la maestra, exporta. Una escena que el usuario quiere repensar recibe de dos a cuatro direcciones como bancos de prueba con la música, mostradas lado a lado y a tamaño completo, y el usuario elige. Una oleada que reconstruye la historia recibe un storyboard primero (todas las cadenas en pantalla y una línea por fotograma), aprobado antes de cualquier código. Termina una sesión larga con un archivo de entrega. references/iteration-playbook.md, references/render-export.md, assets/prompt-templates/handoff.md

Un punto de control

Detente para la aprobación del usuario exactamente una vez antes de la construcción completa: cuando la escena de apertura y la primera escena del producto estén renderizadas, con el corte entre ellas y la música, y el brief esté escrito. Muestra ese clip y el guion del brief juntos, y pregunta tres cosas: ¿el look es correcto?, ¿las palabras son correctas? y ¿se mueve bien con la música?

El clip necesita ambos tipos de escena porque fallan de manera diferente. Una apertura tipográfica muestra el look. Una escena del producto muestra cuánto hay en pantalla y cómo los eventos se asientan en el beat, y eso es lo que un usuario rechaza después de una construcción completa si los ve allí por primera vez. Cuando el usuario revisará más tarde, una pequeña página HTML local con el video junto al guion pone ambos en un solo lugar; assets/prompt-templates/checkpoint.html es un punto de partida.

La razón de una sola parada, colocada aquí: las personas juzgan un render mucho mejor que un documento, y un look o ritmo incorrectos detectados ahora cuestan dos escenas de retrabajo en lugar de toda la película. Todo antes del punto de control es reversible, así que hazlo sin pedir aprobación en documentos. Haz las preguntas de recopilación en un mensaje, toma una decisión sensata donde el usuario no tenga preferencia y escribe cada elección en la lista de suposiciones del brief para que sea fácil vetarla. Después del punto de control, construye toda la película antes de pedir notas nuevamente. Un ajuste dentro de una sensación aprobada no necesita un segundo punto de control; un cambio de sensación sí.

Si no hay nadie para responder (una ejecución desatendida), responde a la recopilación a partir de los materiales que te dieron, enumera cada suposición en el brief y aún así detente en el punto de control. Una película completa construida sobre un look no aprobado es el error costoso que esta parada existe para prevenir. La única excepción es un brief de entrega que dice explícitamente que renderices el punto de control y continúes: entonces renderízalo, ábrelo para el usuario y continúa construyendo, porque una sesión que se detiene sin nadie que responda no entrega nada.

El look de plantilla es el enemigo

Los propietarios lo nombran en una palabra ("claudesco", "Canva", "barato") y es un conjunto de valores predeterminados: un lienzo crema con una serifa, brillos y manchas, una palabra en cursiva o de color en un titular, etiquetas de ceja, diagramas de centro-y-radio, glifos de clip art, un panel inventado cuando el real está en el sitio, un truco por escena, algo que aparece en cada beat, movimiento ocioso, texto que se desvanece y se queda. Cada hex puede venir del archivo de marca y la película aún se lee como una más de ellas. La lista completa, qué reemplazó cada elemento en una película que se envió, y la regla de un solo movimiento característico están en references/creative-direction.md, "Qué se lee como una plantilla". Léelo antes de la primera escena y nuevamente antes de cualquier pase "más premium".

Una película puede limpiar esa lista y aún así leerse como una presentación de diapositivas limpia: el mismo titular sobre un bloque, sin mundo compartido, sin arco tonal, el acento en todo. Cuando dos pases de pulido consecutivos obtienen "mejor, pero no está", deja de tocar el movimiento y ejecuta una crítica de dirección de arte a ciegas sobre imágenes fijas (references/iteration-playbook.md, "Cuando los pases de pulido se estabilizan"). En la película de la que vino, la respuesta fue un mundo 3D compartido, el tono llevando la trama, el tipo como composición y un acento por fotograma (references/creative-direction.md, references/3d-world.md).

El fotograma de corte lleva una imagen

Cada corte cae en un contratiempo, y el fotograma en el que cae tiene que estar compuesto: la tarjeta con su primera fila, la barra o el titular, no un rectángulo vacío que se llena en los siguientes beats. Un elemento compuesto es suficiente: con la tarjeta allí en el corte, el titular a su lado puede aparecer en un beat. Los primeros borradores y los agentes de escena colocan la primera fila en el primer beat después del corte, y luego una película abre seis escenas seguidas en blanco vacío. La regla, el truco de pre-rodaje para contadores y campos de chip, y los movimientos de cámara que unen escenas están en references/animation-patterns.md.

El movimiento continúa a través del corte, y el texto se mueve en una dirección

Dos notas de propietarios a quienes les gustó una película en general: "menos movimientos bruscos" y "el movimiento del texto es aburrido". La primera vino de transiciones que se detenían en seco en ambos lados de cada corte y de planos fijos que hacían todo su movimiento en el primer medio segundo; la solución es una salida que acelera hacia el corte, una entrada que lo deja a velocidad y planos fijos que se desvían uniformemente. La segunda vino de titulares que se desvanecían y se quedaban; la solución es un movimiento para todo el texto en pantalla, elegido de las referencias y usado en cada escena, entrando en un beat y saliendo como la cámara sale, no un nuevo truco por escena. assets/components/Stage.tsx implementa la primera; Title.tsx implementa un movimiento de texto; references/animation-patterns.md tiene los números, incluyendo las claves de un gran empujón en espacio logarítmico y cómo un objeto se entrega a través de un corte.

Una región de cambio a la vez: dentro de medio segundo, nada se mueve en una esquina lejana mientras ocurre el evento principal de la escena. Coloca el elemento secundario donde el ojo ya está, o en el corte (references/motion-language.md).

Muestra la idea, no la pantalla

Una película de producto no es un recorrido. Cada escena de producto lleva una idea, y su tarjeta muestra solo lo que hace que esa idea funcione: un nombre, un estado, una frase. El presupuesto, de películas con las que sus propietarios estaban contentos: alrededor de 4 palabras por segundo de duración, de 15 a 30 palabras en una tarjeta de producto, titulares de menos de 12 palabras y en una línea. Un corte con el doble obtuvo "demasiado texto". La redacción real del producto es de donde provienen las pocas palabras que mantienes; no es una razón para mantenerlas todas. Deja fuera los precios, créditos y nombres de planes a menos que el usuario lo pida. scripts/check-copy.mjs cuenta; references/writing-style.md tiene las reglas y las señales.

Revisa tus propios renders

Antes de que el usuario vea una escena, renderiza imágenes fijas en los fotogramas que importan y míralas: cada fotograma de clic, el fotograma donde la línea de texto más larga está completamente en pantalla, el último fotograma antes de cada corte, el fotograma de corte completo. Confirma que la punta del cursor esté en su objetivo, que ningún texto se ajuste o recorte, que nada salga del área segura y que las palabras coincidan exactamente con el brief. Después de un render maestro: la hoja de contactos, las tiras de corte, el informe de movimientos bruscos con los movimientos juzgados de la película aprobados según lo planeado y el pase de atención. references/self-check.md tiene la lista de fotogramas y los comandos.

Esto importa porque los fallos habituales de una película como esta (un cursor que no da al botón, un titular que se ajusta, una tarjeta que se sale de la cuadrícula, un volcado de tiempos que se volvió obsoleto) todos pasan la verificación de tipos y se renderizan sin error. Son visibles solo en la imagen, o en un número.

Las imágenes fijas no muestran movimiento. Que la película se sienta suave y combine bien con su música es algo que solo una persona que mira puede decir, así que nunca lo informes como verificado; di qué se midió y que nadie la ha visto.

Las tres entradas

Activos. Relación de aspecto, duración, logotipo, colores de marca, fuentes, el guion y una banda sonora, recopilados por adelantado con el cuestionario en assets/prompt-templates/asset-intake-questionnaire.md. Una película con fuerte movimiento y marca de marcador de posición se lee como una plantilla, y cada activo que llega tarde obliga a un nuevo render. La interfaz de usuario real del producto se captura del sitio de hoy y se mide del DOM, nunca se dibuja de memoria (references/product-ui-from-site.md); un panel inventado hundió una versión completa. Si el usuario no tiene guion, references/script-development.md desarrolla uno con ellos.

Look. Dos o tres videos de referencia que le gusten al usuario, cada uno convertido en un desglose de director: lista de tomas, verbos de transición (empujar, panorámica rápida, zoom de corte de coincidencia, máscara de wipe), ritmo, tipografía, movimientos característicos. Los verbos de transición son la parte que más importa, porque convierten una lista de escenas en un plan de cámara en lugar de una presentación de diapositivas con desvanecimientos. Una película anterior que le gustó al usuario supera a todas las referencias: carga sus puntos de corte y tiempos de entrada primero. Usa Gemini cuando esté disponible, o muestra fotogramas y léelos tú mismo; ambos caminos están en references/reference-video-vibe.md.

Beats. scripts/detect-beats.py lee la banda sonora y escribe beats.json: el tempo, el fotograma de cada beat, qué beats son contratiempos y dónde se eleva la pista. Los cortes de escena van en los beats, por defecto en contratiempos, lo que hace que un corte se sienta como un golpe de batería; las tres películas de referencia que parecían caras tenían de 10 a 13 cortes por minuto sin ningún plano de menos de 3.5 s, y un movimiento de cámara en cada escena. Los clics y las entradas también comienzan en los beats, pero no en cada beat: la mayoría de los beats en una escena no llevan nada. El archivo de tiempos deriva cada fotograma de beats.json, por lo que las escenas se colocan por número de beat y nunca por un fotograma escrito a mano. El script termina con un veredicto de fiabilidad: en good, construye; en check, haz que el usuario confirme de oído; en poor, la pista no se adapta a una película de cortes sincronizados, así que cambia la pista o dile al usuario que la película no estará sincronizada con los beats.

La mayoría de las películas siguen las tres. Algunas rompen una a propósito, y está bien cuando es una elección: una película sincronizada con una voz en off, por ejemplo, no puede estar también sincronizada con el beat.

Trabajando con el propietario

• Ellos aprueban viendo. Abre el render HD para ellos (open out/...mp4) con una comparación lado a lado contra el último corte aceptado y unas pocas líneas simples con tiempos sobre lo que cambió. Un 4K viene después del sí. Imágenes fijas a tamaño completo de cualquier cosa entre la que se les pida elegir; dos propietarios cambiaron su elección a tamaño completo.
• Recomienda, no preguntes. "El rojo no funciona en este tipo de gráfico" o "el tercer beat es demasiado pronto"; tres opciones es la mayoría de las veces una opción falsa. Cuando el usuario propone algo que no funcionará, di qué pasará y muéstralo en una imagen fija.
• Mantén la energía en la sala. Una sesión larga se vuelve silenciosa porque estás detrás de la máquina; pon una actualización de estado por hora sin pedir una respuesta, una imagen fija del último render de la escena, un gráfico. Si el usuario estuvo ausente, un resumen de una línea más una imagen fija cuando regrese.
• La mano derecha del propietario. Si el fundador no está allí, su mano derecha tiene la última palabra sobre si la película se envía. No pases por encima de ellos. No pases trabajo a su alrededor con un "esto es para el fundador" a menos que el fundador lo haya dicho específicamente. Cuando la mano derecha decide que la película está lista y el fundador luego la rechaza, la película fue rechazada y la próxima vez la mano derecha será más cautelosa.
• Termina con una entrega. assets/prompt-templates/handoff.md: el estado, el archivo de película, lo que el próximo editor necesita saber y qué no tocar.

Referencias

• Captura de activos y cuestionario. references/asset-intake.md, assets/prompt-templates/asset-intake-questionnaire.md. Las preguntas y la secuencia deben ser las mismas cada vez.
• Captura de UI del producto desde el sitio. references/product-ui-from-site.md. DOM en vivo, no memoria.
• Look y argumento. references/reference-video-vibe.md, references/creative-direction.md. Desglose de videos de referencia y cómo evitar un look de plantilla.
• Andamiaje del proyecto. references/project-scaffold.md. La estructura del directorio y las dependencias.
• Sincronización de beats. references/beat-sync.md, scripts/detect-beats.py. Cómo los beats gobiernan los tiempos.
• Patrones de animación. references/animation-patterns.md, references/motion-language.md. Cómo se mueven los objetos y la cámara.
• Desarrollo del guion. references/script-development.md. Cómo desarrollar un guion con el usuario.
• Efectos de sonido. references/sound-effects.md. Mediciones y colocación.
• Renderización y exportación. references/render-export.md. Las banderas y formatos de salida.
• Autoverificación. references/self-check.md. Lista de fotogramas a verificar, comandos de verificación.
• Revisión de gusto. references/taste-review.md. Cómo revisar un render por gusto.
• Iteración y entrega. references/iteration-playbook.md. Cómo clasificar solicitudes, cuándo hacer un storyboard, archivos de entrega.
• Plantillas de mensajes. assets/prompt-templates/handoff.md, assets/prompt-templates/checkpoint.html. Plantillas para la entrega y el punto de control.
• Componentes. assets/components/Stage.tsx, Title.tsx. Componentes base para movimiento y texto.
• Scripts. scripts/detect-beats.py, scripts/check-copy.mjs. Scripts de utilidad.

Principios

• Activos reales, look de referencia, beats medidos. Los tres son las entradas que importan. Una película sin ellos es una plantilla.
• El look se prueba en el punto de control. No construyas una película completa sobre un look no aprobado.
• Los cortes llevan una imagen. Nunca cortes a blanco.
• El movimiento continúa a través del corte. Sin paradas en seco.
• Un movimiento de texto para todo. Sin trucos por escena.
• Muestra la idea, no la pantalla. Pocas palabras, una idea por escena.
• Revisa tus propios renders. Las imágenes fijas en los fotogramas correctos muestran la mayoría de los fallos.
• Di que no la has visto. El movimiento y la sensación solo los juzga una persona.
• El propietario aprueba viendo. Abre el render, no preguntes.
• La mano derecha del propietario tiene la última palabra. No pases por encima de ellos.