JZnebel/AutoDemo

/demo — Pipeline automatizado de videos demo

Estás creando un video demo narrado de una aplicación web. Todo el flujo — exploración, grabación, narración y renderizado — ocurre en este único comando.

Argumentos

Parsear desde $ARGUMENTS:

• Primer argumento posicional: URL a mostrar (obligatorio)
• --login <credenciales>: Credenciales de inicio de sesión en formato email:contraseña. Si se proporciona, iniciar sesión antes de grabar.
• --brief <"qué mostrar">: Descripción en lenguaje natural de lo que debe cubrir el demo. Puede ser muy corta — "mostrar el panel y crear un proyecto" es suficiente. Si se omite, explorar libremente.
• --name <nombre>: Nombre de salida (por defecto: derivado del hostname de la URL)
• --duration <segundos>: Duración objetivo del video (por defecto: 60)
• --voice <voz>: Voz TTS (por defecto: en-US-GuyNeural)
• --preset <draft|production>: Preajuste de calidad (por defecto: draft)

Los argumentos también pueden pasarse como lenguaje natural después de la URL. Todos estos son equivalentes:

/demo https://app.com --login [email protected]:pass123 --brief "mostrar la página de facturación y añadir un método de pago"
/demo https://app.com — iniciar sesión como [email protected] / pass123, mostrar facturación y añadir un método de pago
/demo https://app.com login: [email protected] pass123. Mostrar la página de facturación.

Parsear lo que puedas. Si el usuario te da credenciales e instrucciones en lenguaje natural, úsalas.

Pipeline

Fase 1: Explorar la aplicación

Antes de grabar, comprende con qué estás trabajando:

1. Abre la URL mediante new_page o navigate_page
2. Si se proporcionaron credenciales (--login), encuentra el formulario de inicio de sesión y accede primero. Busca patrones comunes: /login, /sign-in, un enlace "Iniciar sesión", etc. Usa fill para los campos de correo/contraseña, luego haz clic en enviar. Espera a que se cargue la página de inicio/panel antes de continuar.
3. Toma una captura de pantalla y una instantánea para entender la aplicación
4. Captura la marca: Identifica el logotipo y el color de acento/marca de la aplicación.
   • Intenta descargar la imagen del logotipo al directorio de salida (resuelto en la Fase 2) como logo.png (o .svg/.webp). Durante la exploración, guárdalo en una ubicación temporal primero, luego muévelo al directorio de salida final una vez que se resuelva el nombre único. Usa evaluate_script para encontrar la URL src del <img> del logotipo, luego usa Bash curl o wget para guardarlo. El pipeline lo detectará automáticamente y lo usará en la tarjeta de introducción.
   • Elige el color de acento del botón principal/color de marca de la aplicación y úsalo como accentColor en narration.json (formato rgba).
5. Si se proporcionó una breve descripción (--brief), úsala para guiar tu exploración. La breve descripción te dice lo que le importa al usuario — prioriza esas características. Si no hay breve, explora libremente.
6. Identifica las características clave, la navegación y los flujos interesantes
7. Planea 3-6 segmentos de demo que muestren la aplicación en aproximadamente duration segundos de narración

Piensa en lo que hace un demo convincente:

• Si hay una breve descripción, síguela — el usuario sabe lo que quiere mostrar
• Empieza con la característica más impresionante visualmente o única
• Muestra amplitud (navega por diferentes secciones) no profundidad (no te atasques en un formulario)
• Termina con algo que lo una todo (panel, configuración, resultados)
• Omite pantallas de inicio de sesión, spinners de carga y estados de error en la grabación — manéjalos en la configuración antes de screencast_start

Fase 2: Grabar

Configura el directorio de salida y comienza la grabación:

Directorio de salida: screencast-output/<name>/
Grabación: screencast-output/<name>/recording.mp4

1. Elige un directorio de salida único. Antes de crear el directorio, verifica si screencast-output/<name>/ ya existe. Si es así, añade un sufijo incremental: <name>-v2, <name>-v3, etc. Usa el primer nombre disponible. Por ejemplo:

   # Verificar y encontrar el siguiente nombre disponible
   NAME="trafficstores"
   DIR="screencast-output/$NAME"
   if [ -d "$DIR" ]; then
     V=2; while [ -d "screencast-output/${NAME}-v${V}" ]; do V=$((V+1)); done
     NAME="${NAME}-v${V}"
     DIR="screencast-output/$NAME"
   fi
   mkdir -p "$DIR"
   

   Usa el <name> resuelto (con sufijo si es necesario) para TODAS las rutas posteriores en esta ejecución — grabación, narration.json, composición, salida de renderizado, etc.
2. Crea el directorio de salida
3. Llama a screencast_start con la ruta screencast-output/<name>/recording.mp4
4. Interactúa con la aplicación de forma natural — haz clic en las características que planeaste
   • Pausa brevemente (1-2 segundos) en cada pantalla importante para que los espectadores puedan leerla
   • Haz clic en botones, rellena formularios con datos realistas, navega entre secciones
   • El fork de MCP maneja la animación del cursor y la segmentación automática
5. Llama a screencast_stop cuando termines

Consejos de grabación:

• No te apresures — el pipeline acelerará automáticamente las partes aburridas
• PAUSA en pantallas visualmente interesantes (el pipeline las ralentiza para que coincidan con la narración)
• Evita desplazarte dentro de iframes de origen cruzado — navega directamente en su lugar
• Si algo tarda mucho en cargar, el segmentador automático cortará la espera

Fase 3: Escribir la narración

Escribe screencast-output/<name>/narration.json basándote en lo que acabas de grabar. Sabes exactamente lo que pasó porque lo hiciste.

{
  "introTagline": "Título corto y llamativo",
  "introSubtitle": "Nombre del producto o empresa",
  "outroHeading": "Pregunta de llamado a la acción",
  "outroUrl": "website.com",
  "outroCtaText": "Comenzar",
  "accentColor": "rgba(59, 130, 246, 1)",
  "captionStyle": "pop",
  "voice": "en-US-AndrewNeural",
  "introLogoSrc": "screencast-output/<name>/logo.png",
  "segments": [
    {
      "text": "Narración para este segmento. Escribe de forma conversacional, como una persona presentando.",
      "sceneIndex": 0,
      "sceneLabel": "Nombre de la característica"
    }
  ],
  "fullText": "Todos los textos de los segmentos unidos con espacios."
}

Directrices de narración:

• Escribe como si estuvieras presentando a alguien por encima del hombro, no leyendo documentación
• Usa tiempo presente: "Aquí vemos..." no "Aquí vimos..."
• Menciona elementos específicos de la interfaz que el espectador debe notar
• Mantén la narración total alrededor del objetivo de --duration
• Cada segmento debe ser de 5-20 segundos de voz (~15-50 palabras)
• El accentColor debe coincidir con el color de marca de la aplicación (elige de lo que viste)
• Cada sceneLabel del segmento se convierte en un tercio inferior animado en el video — mantenlos cortos (2-3 palabras máximo): "Registro", "AI Builder", "Sitio Web"
• Establece introLogoSrc en el archivo de logotipo que descargaste en la Fase 1 — aparece con una animación de resorte en la tarjeta de introducción
• Establece captionStyle para que coincida con la sensación de la aplicación: "pop" (saltarín, juguetón), "clean" (vidrio esmerilado, elegante), "bold" (grande, contundente), "minimal" (sutil), "karaoke" (sin fondo), o "outline" (sombra brillante)
• Elige una voice que coincida con el tono de la aplicación:
  • en-US-AndrewNeural — Cálido, seguro (buen predeterminado)
  • en-US-BrianNeural — Accesible, informal (startups, aplicaciones amigables)
  • en-US-ChristopherNeural — Confiable, autoritario (empresarial, fintech)
  • en-US-AriaNeural — Positiva, segura (marketing, aplicaciones de consumo)
  • en-US-EmmaNeural — Alegre, clara (e-commerce, social)
  • en-US-AvaNeural — Expresiva, cariñosa (salud, bienestar, comunidad)
  • en-US-JennyNeural — Amigable, considerada (educación, soporte)
  • en-US-EricNeural — Racional (analítica, herramientas de datos)
  • en-US-GuyNeural — Apasionada (herramientas creativas, medios)
  • en-GB-RyanNeural / en-GB-SoniaNeural — Británica (internacional, lujo)

Fase 3.5: Diseñar composición de video personalizada

Escribe una composición de Remotion personalizada para este video específico. Guárdala como screencast-output/<name>/composition.tsx. El pipeline la usará en lugar de la plantilla MarketingDemo por defecto.

Carga primero los skills de Remotion: Lee las reglas de demo-render/.agents/skills/remotion-best-practices/rules/ — especialmente animations.md, timing.md, text-animations.md, transitions.md y sequencing.md.

Tu composición debe:

1. Exportar VideoComposition (el componente React) y calculateMarketingDemoDuration (función de duración)
2. Exportar el tipo MarketingDemoProps (re-exportar desde ./MarketingDemo)
3. Aceptar las mismas props que MarketingDemo — el pipeline pasa el mismo JSON

Bloques de construcción disponibles (importar desde ./components/):

• DeviceMockup — Grabación de pantalla en un navegador (videoSrc, accentColor, displayUrl, zoomRegions, layout)
• IntroCard / OutroCard — Plantillas de introducción/cierre por defecto (tagline, subtitle, accentColor, logoSrc)
• WordHighlightCaptions — Subtítulos palabra por palabra (wordTimings, style, accentColor)
• LowerThird — Superposición de etiqueta de escena (label, accentColor, leftOffset)
• ProgressBar — Indicador de progreso (accentColor)
• AudioWaveform — Visualizador reactivo al audio (variant, accentColor, samples)
• FeatureCallout — Llamada de anotación (label, side, y, accentColor)
• ChapterCard — Tarjeta divisoria de escena (chapterNumber, title, accentColor)
• Presenter — Personaje 2D con sincronización de labios (mouthCues, side)
• AvatarPip — Imagen en imagen de avatar
• SceneBreak — Destello visual breve en los límites de la escena

También puedes escribir componentes personalizados en línea en el archivo de composición.

Decisiones de diseño a tomar por video:

• Estilo de introducción: Escribe una introducción personalizada o usa IntroCard. Que coincida con la personalidad de la aplicación — terrosa/orgánica, tecnológica/limpia, cálida/acogedora, audaz/contundente.
• Estilo de cierre: Escribe un cierre personalizado o usa OutroCard. Misma coincidencia de personalidad.
• Qué superposiciones incluir: No todos los videos necesitan todas las superposiciones. Omite AudioWaveform para demos SaaS limpios. Omite ProgressBar para videos cortos. Omite LowerThird si los segmentos son obvios.
• Posiciones de superposición: LowerThird no tiene que estar en la esquina superior izquierda. Los subtítulos no tienen que estar en el centro inferior. Elige posiciones que no se superpongan con elementos importantes de la interfaz en la grabación.
• Variedad de animación: No uses siempre el mismo resorte de entrada. Mezcla fade, slide, wipe, typewriter, stagger. Los skills de Remotion muestran los patrones.
• Transición entre introducción → contenido → cierre: Fade, slide, wipe o light leak. Elige lo que encaje.

Ejemplo de plantilla literal para composition.tsx:

import React from "react";
import { AbsoluteFill, Audio, Sequence, interpolate, staticFile } from "remotion";
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";
// Importar bloques de construcción
import { DeviceMockup } from "./components/DeviceMockup";
import { WordHighlightCaptions } from "./components/WordHighlightCaptions";
import { ProgressBar } from "./components/ProgressBar";
// Importar tu introducción/cierre personalizados (escríbelos en línea o como componentes separados)
// Importar tipos
import type { MarketingDemoProps } from "./MarketingDemo";
export type { MarketingDemoProps };

export function calculateMarketingDemoDuration(props: MarketingDemoProps) {
  return props.introDurationFrames + props.videoDurationFrames + props.outroDurationFrames - 20;
}

// Tu componente de introducción personalizado (en línea)
const MyIntro: React.FC<{...}> = (...) => { ... };

export const VideoComposition: React.FC<MarketingDemoProps> = (props) => {
  // Tu diseño de composición único aquí
};

Reglas de Remotion a seguir:

• Todas las animaciones impulsadas por useCurrentFrame() — SIN CÓDIGO ADICIONAL