MoizIbnYousaf/marketing-cli

/marketing-demo — Grabador de Demos de Producto

Graba demos de productos para marketing. Dos rutas de producción: rápida (ply + ffmpeg) para demos aproximadas, pulida (Remotion) para vídeos de marketing con marca.

Lecturas

• brand/creative-kit.md — Colores, fuentes, rutas de logotipos para superposiciones de marca
• brand/voice-profile.md — Guía de tono para superposiciones de texto
• brand/stack.md — Herramientas disponibles (ply, ffmpeg, remotion)

Al Activarse

1. Leer brand/creative-kit.md para colores, fuentes, rutas de logotipos. Si falta, preguntar por colores de marca y logotipo.
2. Leer brand/voice-profile.md para guía de tono en superposiciones de texto. Si falta, usar tono claro/neutral.
3. Leer brand/stack.md para confirmar herramientas disponibles. Si falta, detectar herramientas directamente.
4. Verificar disponibilidad de herramientas:

   command -v ply && echo "ply: listo" || echo "ply: falta"
   command -v ffmpeg && echo "ffmpeg: listo" || echo "ffmpeg: falta"
   command -v npx && echo "remotion: disponible" || echo "remotion: no disponible"
   

5. Si falta ply o ffmpeg, advertir y sugerir instalación.

Reglas de Duración por Toma

Tipo de Demo	Duración por Toma	Notas
Resumen rápido	0.5-1s	Cortes rápidos, generar emoción
Demo de función	2-3s	Tiempo para leer + comprender
Tutorial	4-5s	Ritmo instructivo
Clip social	1-2s	Llamativo, rápido

Principios de Narrativa para Demos

Las demos fallan cuando muestran el producto de forma mecánica en lugar de contar una historia. El espectador necesita una razón para seguir viendo. Estos principios provienen de lo que realmente genera engagement en páginas de aterrizaje y redes sociales:

1. Abre con el resultado, no con la configuración. Los primeros 2 segundos deciden si alguien ve el resto. Muestra el estado "final" — el panel con datos, el diseño completado, el resultado. La configuración (inicio de sesión, carga, navegación) no merece atención.
2. Una función = una demo. Intentar meter 5 funciones en 30 segundos hace que todas sean olvidadas. Una demo enfocada en una función vale más que un tour apresurado.
3. Muestra el momento mágico. Cada producto tiene una interacción donde los usuarios dicen "oh, guau". Encuentra ese momento y construye la demo a su alrededor; es por lo que la gente hace clic en "probar".
4. Añade contexto con superposiciones de texto. Los vídeos sociales se reproducen automáticamente en silencio. Sin texto explicativo, los espectadores ven cambios en la interfaz sin idea de qué está pasando o por qué es importante. Cada toma necesita una superposición de 3 a 6 palabras explicando el valor.
5. Ritmo: 2-3 segundos por concepto. Esto parece rápido, pero la atención del espectador es brutal. Si una toma no gana su tiempo de pantalla con nueva información, córtala.

Paso 1: Determinar el Tipo de Demo

Tipo	Duración	Resolución	Formato	Caso de Uso
Demo principal	15-30s	1280x800	MP4	Sobre el pliegue de la página de aterrizaje
Destacado de función	5-15s	1280x800	GIF/MP4	Sección de funciones, documentación
Tutorial completo	60-180s	1280x800	MP4	YouTube, presentación de ventas
Clip social	5-15s	1080x1080	MP4	Instagram, Twitter/X
GIF para email	3-8s	600x400	GIF	Campañas de email
Cómo se hace	30-90s	1280x800	MP4	Documentación de ayuda, incorporación

Preguntar al usuario qué tipo, o inferir del contexto.

Paso 2: Planificar la Lista de Tomas

Antes de grabar, planificar cada toma:

## Lista de Tomas

1. [Acción: Navegar a la página de inicio]
   - URL: https://example.com
   - Esperar: 1s para carga
   - Destacar: Sección principal

2. [Acción: Hacer clic en botón "Comenzar"]
   - Esperar: animación de transición
   - Destacar: Formulario de registro

3. [Acción: Rellenar datos de demo]
   - Escribir: [email protected]
   - Destacar: Estado de éxito

Cada toma = una captura de pantalla de ply o una secuencia de interacción.

Paso 3: Elegir el Modo de Producción

Modo A: Demo Rápida (ply + ffmpeg)

Demos rápidas y aproximadas a partir de capturas de pantalla unidas en vídeo.

Capturar capturas de pantalla:

# Navegar y capturar pantalla de cada toma
ply navigate "https://example.com"
ply screenshot --output marketing/demos/shot-01.png
ply click "Comenzar"
ply screenshot --output marketing/demos/shot-02.png

Unir con ffmpeg:

# MP4 a partir de capturas (2 segundos por fotograma)
ffmpeg -framerate 0.5 -i marketing/demos/shot-%02d.png \
  -c:v libx264 -pix_fmt yuv420p \
  -vf "scale=1280:800:force_original_aspect_ratio=decrease,pad=1280:800:(ow-iw)/2:(oh-ih)/2" \
  marketing/demos/demo.mp4

# GIF de vista previa (menor calidad, archivo más pequeño)
ffmpeg -i marketing/demos/demo.mp4 \
  -vf "fps=10,scale=640:-1:flags=lanczos" \
  -c:v gif marketing/demos/demo-preview.gif

# GIF para email (600px de ancho, optimizado)
ffmpeg -i marketing/demos/demo.mp4 \
  -vf "fps=8,scale=600:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
  marketing/demos/demo-email.gif

# Recorte cuadrado para redes sociales (1080x1080)
ffmpeg -i marketing/demos/demo.mp4 \
  -vf "crop=min(iw\,ih):min(iw\,ih),scale=1080:1080" \
  marketing/demos/demo-square.mp4

Modo B: Demo Pulida (Remotion)

Para resultados de calidad de marketing con transiciones, superposiciones de texto, introducciones de marca.

Generar composición de Remotion:

# Inicializar si es necesario
npx remotion init marketing/demos/remotion-demo

# Renderizar vídeo final
npx remotion render marketing/demos/remotion-demo/src/index.tsx \
  --output marketing/demos/demo-polished.mp4

Estructura de la composición:

src/
├── index.tsx          # Composición raíz
├── Intro.tsx          # Introducción de marca (logotipo, eslogan)
├── DemoScene.tsx      # Captura de pantalla con superposición de texto
├── Transition.tsx     # Fundido/deslizamiento entre escenas
└── Outro.tsx          # Llamada a la acción + URL

Patrones clave de Remotion (ver references/remotion-examples.md para código completo de componentes):

• Usar <Img> para capturas, <AbsoluteFill> para diseño
• useCurrentFrame() + interpolate() para animaciones
• Obtener colores de marca de brand/creative-kit.md
• 30fps para reproducción suave, 1280x720 o 1920x1080
• Añadir superposiciones de texto destacando funciones con <Sequence>

Escena de introducción (2-3s): Logotipo centrado, eslogan aparece gradualmente. Colores de marca como fondo degradado. Mantenerlo corto: el producto es la estrella.

Escena de demo (por toma): Captura de pantalla ocupa el 80% del fotograma. Superposición de texto en la parte superior o inferior con texto destacado de 1 línea de la función. Usar interpolate() para un sutil zoom (1.0 → 1.05 durante la duración de la escena) para dar vida.

Transición entre escenas: Fundido + ligero deslizamiento (200ms). Nunca usar transiciones llamativas: distraen del producto.

Escena final (3-4s): Texto de llamada a la acción ("Pruébalo gratis en [url]"), logotipo y opcionalmente una línea de prueba social. Esta es la única diapositiva que vende: mantener todas las demás diapositivas centradas en mostrar.

Recuperación de Errores

Fallos de ply (la página no carga, elemento no encontrado, tiempo de espera agotado): Saltar a la toma N+1 y documentar el fallo en la lista de tomas. Después de completar todas las tomas, revisar las tomas omitidas y reintentar una vez. Si sigue fallando, usar capturas de pantalla manuales como alternativa.

Fallos de ffmpeg (códec no encontrado, error de formato): Verificar ffmpeg -codecs para códecs disponibles. Si falta libx264, probar -c:v h264 o instalar con brew install ffmpeg. Para problemas de paleta GIF, simplificar la cadena de filtros: eliminar split/palettegen/paletteuse y usar -vf "fps=10,scale=640:-1" básico.

Fallos de Remotion (el renderizado falla, errores de composición): Verificar la versión de node (node -v, necesita 18+). Si npx remotion render falla, probar npx remotion render --gl=angle o --gl=swangle para problemas de GPU. Para errores de composición, verificar que todas las rutas src de <Img> sean correctas y que las imágenes existan.

Paso 4: Convertir y Generar Salida

Todas las salidas van a marketing/demos/. Nombrar por tipo:

Salida	Nombre de Archivo	Notas
MP4 (escritorio)	demo-hero.mp4	H.264, 1280x800
MP4 (social)	demo-social-1080.mp4	Cuadrado, 1080x1080
GIF (vista previa)	demo-preview.gif	640px de ancho, <5MB
GIF (email)	demo-email.gif	600px de ancho, <2MB
MP4 (pulido)	demo-polished.mp4	Salida de Remotion

Paso 5: Resumen de Finalización

## Activos de Demo Creados

| Activo | Tamaño | Formato | Uso Sugerido |
|--------|--------|---------|--------------|
| demo-hero.mp4 | 1.2MB | MP4 1280x800 | Hero de página de aterrizaje |
| demo-preview.gif | 3.4MB | GIF 640px | README, documentación |
| demo-email.gif | 1.1MB | GIF 600px | Campañas de email |
| demo-social-1080.mp4 | 800KB | MP4 1080x1080 | Instagram, X |

Todos los activos guardados en `marketing/demos/`.

Configuraciones de Viewport

Plataforma	Ancho	Alto	Escala
Escritorio	1280	800	1x
Escritorio HD	1920	1080	1x
Móvil	390	844	2x
Instagram	1080	1080	1x
Twitter/X	1200	675	1x
Email	600	400	1x

Anti-patrones

Error	Por Qué Falla
Grabar flujos de inicio de sesión/registro	A nadie le importa tu pantalla de autenticación. Empieza después del inicio de sesión.
Mostrar ruedas de carga	Edítalas o salta al estado cargado. Las ruedas de carga matan el ritmo.
Sin superposiciones de texto en reproducción automática silenciosa	Los vídeos sociales se reproducen automáticamente en silencio. Sin texto, los espectadores no tienen idea de lo que están viendo.
Demo de más de 60s sin pausas de capítulos	La atención cae después de 15s. Si es larga, añade títulos de sección claros.
Grabar a tamaños de viewport inconsistentes	Las tomas que saltan entre tamaños se ven amateur. Bloquea el viewport antes de grabar.
Mostrar cada función	Elige 3-5 funciones como máximo. Las demos que muestran todo no venden nada.
El cursor del ratón deambula sin rumbo	Planifica cada clic. El cursor debe moverse con propósito: líneas rectas hacia los objetivos.

Skills Relacionadas

• /creative — Visuales de anuncios, fotos de productos (activos estáticos, no demos)
• /content-atomizer — Convertir demo en publicaciones específicas de plataforma
• /page-cro — Auditar la página que la demo muestra