Demo de producto SaaS (Remotion)

Video de Demo de Producto SaaS

Flujo de trabajo integral para producir un video cinematográfico de producto SaaS sincronizado con el ritmo en Remotion. Cubre videos cinematográficos sin audio, demos horizontales sincronizados al beat, reels verticales y videos con capas de metraje de apoyo en collage.

La habilidad es dogmática en tres aspectos: activos, vibra, ritmos. Si omites alguno, producirás un reel genérico de gráficos en movimiento estilo Canva que se verá como cualquier otra demo de 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 con intención (por ejemplo, videos con narración donde la sincronización al beat entraría en conflicto con la voz en off). Cuando rompas una regla, hazlo con conocimiento.

---

Prerrequisitos

Antes de comenzar, verifica que estén en su lugar. El primero es realmente necesario; los otros son recomendaciones fuertes con alternativas documentadas.

1. Remotion instalado (requerido). @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 mensaje de tecla de flecha).

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

   Si Super Powers no está instalado, la habilidad sigue funcionando; el flujo de trabajo se vuelve más conversacional y un poco más lento. La lluvia de ideas se convierte en diálogo en línea (sin acompañante de navegador); los planes se escriben directamente en el chat; las escenas se implementan en línea en lugar de mediante subagentes enviados. Los tres pilares (activos / vibra / ritmos), además del metraje de apoyo, la interfaz de usuario esquemática, el posicionamiento de clics, el estilo de escritura y los scripts en scripts/ funcionan igual. No rechaces el trabajo por falta de un complemento; adáptate y continúa.

3. Python 3 + librosa disponibles. La detección de ritmos 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 silenciosamente.

4. Para el análisis de video de referencia (Pilar 2): la habilidad 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 de detección completa.

   1. gemini CLI en PATH (CLI oficial de Google, o envoltorios comunitarios como gemini-yt). Ejecuta con el mensaje + la URL de YouTube como argumentos.
   2. GEMINI_API_KEY configurada en env o .env. Usa el envoltorio curl de la habilidad en scripts/analyze-reference-video.sh.
   3. Ninguno de los 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 movimiento en una nueva sesión.

---

Los tres pilares

Estas son las actividades de alto apalancamiento. 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 ambas en paralelo - consulta references/vertical-port.md si son ambas)
• Duración en segundos (se recomienda 20-45 s)
• Logotipo - se prefiere SVG. Si solo es PNG, captura las dimensiones nativas para evitar pixelación al ampliar.
• Colores hexadecimales de la marca (acento primario + 3-6 colores pastel de apoyo)
• Pila de fuentes (todas deben estar en Google Fonts)
• Texto / guion - se prefiere un borrador proporcionado por el usuario a generar uno. Si no tienen guion, consulta references/script-development.md.
• Narración (opcional)
• Archivo de banda sonora - necesario para la sincronización al ritmo. Si el usuario no tiene ninguno, elige de existencias libres de derechos.

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

Pilar 2 - Flujo de trabajo de vibra con video de referencia

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

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

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

El vocabulario de verbos de dirección (empujar, barrido panorámico, retroceso con corte en V, máscara de tinta, zoom de coincidencia de corte) es la salida que más carga soporta: te da primitivas de movimiento específicas para construir.

Pilar 3 - Sincronización al ritmo de la banda sonora

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

El proceso:

1. Ejecuta scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json. Emite BPM, fotograma del primer bombo, marcas de tiempo de redobles + fotogramas.
2. Incorpora en un solo objeto de constantes de temporización (consulta assets/code-templates/theme-v2.ts). Cada escena <Sequence from={...} durationInFrames={...}> se basa en esto.
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 ritmos más cercanos dentro de ±6 fotogramas. Esta es la segunda iteración de mayor apalancamiento después del renderizado inicial: el público siente los eventos internos fuera de ritmo como "el ritmo a veces se desvía" sin poder señalar por qué.
4. Usa los ayudantes isSnare(n) / isKick(n) para afirmar en modo de desarrollo.
5. Ejecuta scripts/check-typing-budget.py contra cualquier TextoEscrito/CaracteresEscritos para verificar que quepa dentro de la duración de la escena. Corta el texto en pantalla antes de enviarlo.

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

---

Capacidades adyacentes - cuando lo básico no es suficiente

Estas cubren situaciones más allá de la demo SaaS estándar de "solo gráficos en movimiento, solo graba una captura de pantalla". Lee la referencia relevante cuando la situación del usuario lo requiera.

Desarrollo de guion - cuando el usuario no tiene guion

La mayoría de los usuarios vienen con una idea de producto vaga, 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 texto bloqueado, listo para alimentar el documento de especificaciones.

Integración de metraje de apoyo - cuando el video usa capas de acción real o collage

Si el usuario tiene material de archivo, clips de collage o cualquier video que quiera usar como capa de fondo, usa references/b-roll-integration.md y la plantilla BRollLayer. El metraje de apoyo puede ser un fondo de opacidad completa o una textura de baja opacidad; la primitiva maneja recorte, fundido, modos de mezcla y temporización con corrección de FPS.

(Las versiones anteriores de esta habilidad recomendaban enviar el trabajo de acción real a Premiere/DaVinci. Eso es incorrecto cuando el metraje de apoyo se usa como una capa debajo de los gráficos en movimiento; 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 UI real para grabar

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

Posicionamiento de clics - el punto de dolor número uno en iteraciones

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

Estilo de escritura - mantén las marcas de IA fuera del texto dirigido al 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 renderizado que detecta 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 la justificación.

1. Recopila las entradas primero, escribe el 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 videos de referencia - automatizados a través de scripts/analyze-reference-video.sh o manuales a través de AI Studio.
4. Detecta los ritmos y escribe el objeto de constantes de temporización. scripts/detect-beats.py → theme-v2.ts. Cada inicio de escena se deriva de los ritmos.
5. Andamia Remotion manualmente. package.json / tsconfig.json / remotion.config.ts mínimo. Nunca npx create-video dentro de un repositorio git.
6. Registra composiciones de depuración por escena en Root.tsx. Aceleración esencial. Desplazarse por una escena de 5 segundos es 30 veces más rápido que la maestra completa.
7. Carga todas las fuentes en el nivel superior de Root.tsx con subsets: ["latin"].
8. Usa guiones en los ID de composición (v2-Escena06, nunca v2_Escena06).
9. Invoca superpowers:brainstorming con acompañante visual para decisiones de estilo/diseño. Las maquetas HTML superan a la prosa cada vez.
10. Escribe el documento de especificaciones. docs/superpowers/specs/YYYY-MM-DD-<nombre>-design.md. Incluye una sección de fidelidad de UI esquemática si se necesita alguna.
11. Revisa tú mismo la especificación, luego el usuario la aprueba. Sin código hasta que haya luz verde.
12. Invoca superpowers:writing-plans. Verifica la higiene de la plantilla del plan antes de enviar (consulta references/project-scaffold.md).
13. Construye primero las primitivas de animación (TextoEscrito, RevelaciónMáscara, Aparecer, Cursor, ZoomGolpe, ElementosFlotantes, CapaBRoll, Contador, GrietasHielo según sea necesario). Luego las tarjetas de UI esquemática. Luego las escenas. Luego la maestra.
14. Invoca superpowers:subagent-driven-development. Limita los lotes de subagentes a 3-4 archivos por envío; los lotes más grandes a veces se quedan sin contexto a mitad de la tarea. Consulta references/iteration-playbook.md.
15. Renderiza solo la Escena 1. 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 paso de alineación de eventos internos una vez después del renderizado de referencia: ese solo paso ajusta el ritmo notablemente.
17. Renderiza la maestra con 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 puntualmente contra el mapa de ritmos a velocidad 0.5x.

---

Índice de referencias

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

• ideal-sequence.md - el flujo anotado completo, con justificación
• prereq-check.md - qué verificar antes de comenzar
• asset-intake.md - flujo de incorporación completo, alternativa de activos parciales, verificación de ampliación de activos, higiene de nombres