Video demo de producto, paso 2: corte SaaS de 20–45 s al ritmo

Video Demo de Producto SaaS

Flujo completo para crear un video de producto SaaS sincronizado con el ritmo en Remotion. Cubre filmes cinematográficos silenciosos, demos horizontales sincronizados al beat, reels verticales y filmes con capas de b-roll tipo collage.

La skill tiene opiniones firmes sobre tres cosas: activos, vibra, beats. Si saltas cualquiera de ellas, produces un reel genérico de motion graphics estilo Canva que se parece a cualquier otro demo SaaS. La disciplina es lo que marca la diferencia.

Estas son recomendaciones fuertes más que reglas estrictas. La mayoría de las producciones las siguen; algunas las rompen intencionadamente (por ejemplo, filmes guiados por voz en off donde la sincronización con el beat entraría en conflicto con la VO). Cuando rompas una regla, hazlo sabiéndolo.

---

Prerrequisitos

Antes de empezar, verifica que estos estén presentes. El primero es realmente necesario; los otros son recomendaciones fuertes con alternativas documentadas.

1. Remotion instalado (obligatorio). @remotion/cli 4.0.x + @remotion/google-fonts + React 19. Consulta references/project-scaffold.md para el package.json / tsconfig.json / remotion.config.ts mínimo exacto - nunca ejecutes npx create-video dentro de un repositorio git existente (se bloquea en un prompt de flechas).

2. Plugin Super Powers (muy recomendado, no obligatorio). Cuando está disponible, esta skill orquesta superpowers:using-superpowers, superpowers:brainstorming (con acompañante visual), superpowers:writing-plans y superpowers:subagent-driven-development. Te proporcionan mockups HTML en el navegador para decisiones de diseño, documentos de plan formales y el bucle de implementador + revisor subagente.

   Si superpowers no está instalado, la skill sigue funcionando: el flujo de trabajo se vuelve más conversacional y un poco más lento. Las lluvias de ideas se convierten en diálogo en línea (sin acompañante en el navegador); los planes se escriben directamente en el chat; las escenas se implementan en línea en lugar de mediante subagentes despachados. Los tres pilares (activos / vibra / beats) más b-roll, UI esquemática, posicionamiento de clics, estilo de escritura y los scripts en scripts/ funcionan igual. No rechaces el trabajo por falta de un plugin; adáptate y continúa.

3. Python 3 + librosa disponible. La detección de beats ejecuta scripts/detect-beats.py que importa librosa. Si no está instalado, ejecuta pip install --break-system-packages librosa numpy soundfile e informa al usuario, no lo hagas en silencio.

4. Para análisis de video de referencia (Pilar 2): la skill admite tres rutas en orden de prioridad. Usa la más alta que esté disponible - consulta references/reference-video-vibe.md para la lógica completa de detección.

   1. CLI gemini en PATH (CLI oficial de Google, o wrappers comunitarios como gemini-yt). Ejecútalo con el prompt + URL de YouTube como argumentos.
   2. GEMINI_API_KEY establecida en env o .env. Usa el wrapper curl de la skill en scripts/analyze-reference-video.sh.
   3. Ninguna de las anteriores - recurre a copiar y pegar manualmente en Google AI Studio. Incómodo pero siempre funciona; la calidad es comparable.

Ejecuta references/prereq-check.md como tu primer paso en una nueva sesión.

---

Los tres pilares

Estas son las actividades de alto impacto. Saltarse una para "ahorrar tiempo" casi siempre cuesta más tiempo después.

Pilar 1 - Incorporación de activos

Antes de cualquier otra cosa, ejecuta el cuestionario estructurado en assets/prompt-templates/asset-intake-questionnaire.md. Pide:

• Relación de aspecto (16:9 horizontal, 9:16 vertical, o ambos en paralelo - consulta references/vertical-port.md si son ambos)
• Duración en segundos (20-45s recomendados)
• Logo - SVG preferido. Si solo es PNG, captura las dimensiones nativas para evitar pixelación al escalar.
• Colores hex de la marca (acento primario + 3-6 pasteles de apoyo)
• Pila de fuentes (todas deben estar en Google Fonts)
• Texto / guion - prefiere un borrador proporcionado por el usuario en lugar de generar uno. Si no tienen guion, consulta references/script-development.md.
• Voz en off (opcional)
• Archivo de banda sonora - necesario para la sincronización con el beat. Si el usuario no tiene ninguna, elige de stock libre de regalías.

Consulta references/asset-intake.md para el flujo completo de incorporación, incluyendo el conjunto mínimo viable de activos parciales, higiene de nombres al copiar y la verificación de pixelación por escalado de activos.

Pilar 2 - Flujo de vibra de video de referencia

Antes de escribir escenas, pide al usuario 2-3 videos de referencia de YouTube cuya vibra quieran. Luego produce un desglose de director para cada uno.

Dos rutas compatibles (consulta references/reference-video-vibe.md):

• Automatizada (preferida cuando esté disponible) - si el usuario tiene una GEMINI_API_KEY configurada, ejecuta scripts/analyze-reference-video.sh <youtube-url> <slug> para cada video. Usa Gemini Pro Preview mediante curl. Tarda ~30s por video. Los resultados se guardan en references/gemini-<slug>.md.
• Manual (siempre funciona) - abre aistudio.google.com, pega el prompt de scripts/reference-video-prompt.md junto con la URL de YouTube, copia el resultado de vuelta a un archivo. Incómodo pero produce resultados igualmente utilizables. Úsalo cuando la API no esté disponible.

El vocabulario de verbos de dirección (push-through, whip-pan, V-cut pull-back, ink-mask, match-cut zoom) es el resultado más importante: te da primitivas de movimiento específicas sobre las que construir.

Pilar 3 - Sincronización con el beat de la banda sonora

Los límites de las escenas deben caer en redobles (la sensación retórica de "golpe de tambor"). Los eventos internos (clics, aterrizajes de tarjetas, inicios de contador) deben caer en bombos o redobles dentro de la escena.

El pipeline:

1. Ejecuta scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json. Emite BPM, fotograma del primer bombo, marcas de tiempo y fotogramas de redobles.
2. Ingresa en un solo objeto de constantes de tiempo (consulta assets/code-templates/theme-v2.ts). Cada <Sequence from={...} durationInFrames={...}> de escena toma de aquí.
3. Después de la Fase 6 (escenas construidas), ejecuta scripts/align-internal-events.py contra beats.json + una lista de eventos dentro de la escena para moverlos a los beats más cercanos dentro de ±6 fotogramas. Esta es la iteración de segundo mayor impacto después del render inicial: la audiencia siente los eventos internos fuera de ritmo como "el ritmo a veces está mal" sin poder señalar por qué.
4. Usa los helpers isSnare(n) / isKick(n) para afirmar en modo dev.
5. Ejecuta scripts/check-typing-budget.py contra cualquier TypedText/TypedChars para verificar que quepa dentro de la duración de la escena. Corta la escritura en pantalla antes de enviar.

Matemáticas completas, helpers, alineación de eventos internos y la verificación de presupuesto de escritura en references/beat-sync.md.

---

Capacidades adyacentes - cuando lo básico no es suficiente

Estas cubren situaciones más allá del demo SaaS estándar de "solo motion graphics, solo graba una captura de pantalla". Lee la referencia relevante cuando la situación del usuario lo necesite.

Desarrollo de guion - cuando el usuario no tiene guion

La mayoría de los usuarios vienen con una idea vaga del producto, no con una pantalla por pantalla terminada. references/script-development.md guía a través de un flujo de diálogo estructurado que produce un esquema de 4 actos + una pantalla por pantalla bloqueada + una página de referencia de copia bloqueada, listo para alimentar el documento de especificaciones.

Integración de b-roll - cuando el film usa capas de acción real o collage

Si el usuario tiene metraje de stock, clips de collage, o cualquier video que quiera como capa de fondo, usa references/b-roll-integration.md y la plantilla BRollLayer. El b-roll puede ser un fondo de opacidad completa o una textura de baja opacidad; la primitiva maneja recorte, fundido, modos de mezcla y tiempo corregido por fps.

(Las versiones anteriores de esta skill recomendaban enviar trabajo de acción real a Premiere/DaVinci. Eso es incorrecto cuando el b-roll se usa como una capa debajo de gráficos animados - Remotion maneja esto bien y mantener la producción en una sola herramienta es una ganancia de productividad).

Fidelidad de UI esquemática - cuando el producto no tiene una interfaz real que grabar

Si el producto es una extensión de Chrome, una API, o está en etapa temprana y no hay una interfaz de producto real para capturar, references/schematic-ui-fidelity.md cubre cómo inventar UIs esquemáticas que se vean pulidas sin infringir plataformas reales (LinkedIn, Gmail, Slack). Tres patrones de referencia: tarjeta de perfil, compositor de correo, panel de API - plantillas de código en assets/code-templates/Schematic*.tsx.

Posicionamiento de clics - el principal dolor de cabeza en iteraciones

Los clics del cursor que no aciertan a los botones es la queja más común entre producciones. references/click-positioning.md cubre tres enfoques (refs, constantes de posición calculadas, superposición de depuración) - elige uno de antemano. El costo de hacer esto mal son múltiples ciclos completos de re-render por escena.

Estilo de escritura - mantén las señales de IA fuera del texto visible para el usuario

Guiones largos, comillas curvas y ciertos tics de fraseo gritan "generado por IA." references/writing-style.md es la guía de estilo predeterminada con una verificación grep previa al render que atrapa estos. Si el usuario tiene su propia guía de voz de marca, prefiere esa.

---

Secuencia ideal

El flujo completo de principio a fin. Consulta references/ideal-sequence.md para la versión anotada con fundamentos.

1. Recopila las entradas primero, escribe código al final. Ejecuta el cuestionario de incorporación de activos.
2. Desarrolla el guion si el usuario no tiene uno - references/script-development.md.
3. Produce desgloses de video de referencia - automatizados mediante scripts/analyze-reference-video.sh o manuales mediante AI Studio.
4. Detecta los beats y escribe el objeto de constantes de tiempo. scripts/detect-beats.py → theme-v2.ts. Cada inicio de escena se deriva de los beats.
5. Prepara el andamio de Remotion manualmente. package.json / tsconfig.json / remotion.config.ts mínimos. Nunca npx create-video dentro de un repositorio git.
6. Registra composiciones de depuración por escena en Root.tsx. Aceleración esencial. Navegar por una escena de 5 segundos es 30 veces más rápido que el maestro completo.
7. Carga cada fuente en el nivel superior de Root.tsx con subsets: ["latin"].
8. Usa guiones en los IDs de composición (v2-Scene06, nunca v2_Scene06).
9. Invoca superpowers:brainstorming con acompañante visual para decisiones de estilo/diseño. Los mockups HTML vencen a la prosa cada vez.
10. Escribe el documento de especificaciones. docs/superpowers/specs/YYYY-MM-DD-<name>-design.md. Incluye una sección de fidelidad de UI esquemática si se necesita alguna.
11. Autorevisa la especificación, luego el usuario la aprueba. Nada de código hasta luz verde.
12. Invoca superpowers:writing-plans. Verificación de higiene de la plantilla de plan antes de despachar (consulta references/project-scaffold.md).
13. Construye primero las primitivas de animación (TypedText, MaskReveal, PopIn, Cursor, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack según sea necesario). Luego las tarjetas de UI esquemática. Luego las escenas. Luego el maestro.
14. Invoca superpowers:subagent-driven-development. Limita los lotes de subagentes a 3-4 archivos por despacho - los lotes más grandes a veces se quedan sin contexto a mitad de la tarea. Consulta references/iteration-playbook.md.
15. Renderiza la escena 1 por separado. Establece el estilo. Obtén la aprobación del usuario antes del resto.
16. Itera en oleadas. Limita cada oleada a 5-8 correcciones. Ejecuta el pase de alineación de eventos internos una vez después del render de línea base - ese único pase ajusta el ritmo notablemente.
17. Render maestro en calidad de publicación. --crf=14 --image-format=png (HD) o --crf=15 --image-format=png --scale=2 (4K). Consulta references/render-export.md.
18. Verifica contra el mapa de beats a velocidad 0.5x.

---

Índice de referencias

El directorio references/ contiene la profundidad. Carga solo lo que necesites para la fase actual.

• ideal-sequence.md - el flujo completo anotado, con fundamentos
• prereq-check.md - qué verificar antes de empezar
• asset-intake.md - flujo completo de incorporación, respaldo de activos parciales, verificación de escalado de activos, higiene de nombres
• script-development.md - metodología pantalla por pantalla cuando el usuario no tiene guion
• reference-video-vibe.md - protocolo de análisis Gemini (rutas API / CLI / AI Studio)
• beat-sync.md - matemáticas de la cuadrícula de beats, regla de límites de escena, alineación de eventos internos, verificación de presupuesto de escritura
• project-scaffold.md - configuración mínima de Remotion, lista de verificación de commit, higiene de plantilla de plan, esenciales de .gitignore
• animation-patterns.md - TypedText, MaskReveal, PopIn, ZoomPunch, FloatingElements, más extensiones
• b-roll-integration.md - patrones de BRollLayer, tratamientos de opacidad/mezcla, rendimiento de render
• schematic-ui-fidelity.md - diseñar UI falsa que se vea pulida
• click-positioning.md - tres enfoques para que los clics del cursor acierten a los objetivos correctos
• writing-style.md - guiones largos y otras señales de IA a evitar en el texto en pantalla
• cursor-math.md - desplazamiento de punto caliente, puntos clave, transformación de relación de escala
• iteration-playbook.md - estructura de oleadas, revisiones por lotes, agrupación de subagentes, reinicios de recarga en caliente de Studio
• render-export.md - comandos de render HD/4K, fundamentos de CRF
• gotchas.md - guiones bajos en IDs de composición, advertencias de fuentes, carga de cursiva, problema de escala de MaskReveal
• vertical-port.md - disciplina de portado de reel 9:16

Activos

• assets/prompt-templates/ - plantillas para llenar para incorporación de activos, documentos de especificaciones, hojas de beats
• assets/code-templates/ - componentes probados (constantes de tema, easing, Cursor, MaskReveal, TypedText, PopIn, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack, SchematicProfileCard, SchematicEmailComposer, SchematicApiPanel, Act2Master, Act2MasterVertical)

Scripts

• scripts/detect-beats.py - seguimiento de beats basado en librosa. Emite BPM, primer bombo, fotogramas de redoble/bombo en el fps objetivo.
• scripts/analyze-reference-video.sh + scripts/reference-video-prompt.md - wrapper de Gemini Pro para desgloses de dirección de YouTube.
• scripts/align-internal-events.py - alinea con el beat eventos dentro de la escena dentro de fotogramas de tolerancia ±.
• scripts/check-typing-budget.py - verifica que TypedText/TypedChars quepa en la duración de la escena antes del render.

---

Cuando NO se debe usar la skill

• Iteración profunda en un proyecto Remotion existente. Si el usuario lleva 20+ commits en un film y pide ajustes de oleada N+1, no vuelvas a ejecutar la incorporación. Carga references/iteration-playbook.md y references/beat-sync.md y continúa.
• Demos que no sean SaaS. Resumen de eventos, montaje de testimonios, screencast de tutoriales - los patrones de sincronización con el beat + tarjetas de UI de producto no se aplican bien.
• Metraje documental o de entrevistas como tema. Esta skill maneja b-roll como una capa debajo de gráficos animados. Si la acción real es el tema del film (entrevistas, unboxing, tutoriales), usa un editor no lineal como Premiere, DaVinci, o un editor de video tradicional.
• Videos largos (>60s) sin un foco de producto claro. La mecanica de ajuste al beat y la estructura de escenas rápidas pierde efectividad en duraciones extendidas.