ashrafchowdury/programatic-demo

¿Qué hace programatic-demo?

Videos de demostración de productos, generados a partir de código. Playwright graba un flujo real; Remotion añade una cámara estilo Screen Studio — zoom al hacer clic, easing, desenfoque de movimiento y un cursor vectorial.

Resumen

Esta habilidad te permite crear videos de demostración de productos de alta calidad de manera programática. En lugar de grabar manualmente una demostración y luego editarla con software de edición de video, defines un flujo de interacción con Playwright, y esta habilidad se encarga de todo: desde la grabación hasta la producción final, aplicando efectos de cámara cinematográficos.

Características principales

• Grabación con Playwright: Playwright navega por tu aplicación web y registra todas las interacciones (clics, desplazamientos, escritura).
• Efectos de cámara con Remotion: Después de la grabación, Remotion procesa el metraje para agregar efectos como:
  • Zoom automático en cada clic.
  • Transiciones suaves con easing.
  • Desenfoque de movimiento.
  • Cursor vectorial estilizado.
• Estilo profesional: El resultado final se asemeja a las demos producidas con herramientas como Screen Studio, pero todo se genera con código.

Cómo funciona

1. Configuración: Define la URL de inicio y el flujo de interacciones en un archivo de configuración (por ejemplo, demo.config.js).
2. Ejecución: Ejecuta el comando npm run generate-demo (o el comando específico definido en el proyecto).
3. Proceso: La habilidad lanza Playwright, graba el flujo, y luego utiliza Remotion para procesar el video final con los efectos aplicados.
4. Salida: Obtendrás un archivo de video (por ejemplo, demo.mp4) listo para compartir o incrustar.

Plataformas compatibles

• Claude Code
• Cursor
• Codex
• Cualquier agente de IA que soporte comandos de terminal y dependencias Node.js

Instalación y uso

npm install playwright remotion
# Configura tu flujo según la documentación del proyecto

Para generar el video:

npx remotion render src/index.ts output.mp4

Configuración personalizada

Puedes ajustar los parámetros en el archivo de configuración:

Parámetro	Descripción	Valor por defecto
zoomFactor	Factor de zoom al hacer clic	1.5
easingDuration	Duración del easing (en ms)	500
motionBlur	Intensidad del desenfoque de movimiento	0.3
cursorType	Tipo de cursor vectorial	arrow

Ejemplo

// demo.config.js
module.exports = {
  url: "https://mi-app.com",
  interactions: [
    { type: "click", selector: "#boton-inicio" },
    { type: "wait", duration: 2000 },
    { type: "click", selector: ".menu-item" },
  ],
  camera: {
    zoomOnClick: true,
    easing: "easeInOutCubic",
    motionBlur: true,
  },
};

Notas importantes

• Asegúrate de tener Node.js v16 o superior.
• Playwright requiere descargar los navegadores (npx playwright install).
• Remotion necesita FFmpeg para la composición de video.

Licencia

Consulta el archivo LICENSE para más detalles.