Una Agent Skill que convierte un tema en un video explicativo narrado, con voz en off, subtítulos incrustados e imágenes de portada, renderizando fotogramas HTML localmente a MP4.
AbubakrChan/product-launch-motion
Una skill de Claude Code que convierte la URL de un sitio web en un video de lanzamiento de producto a 60 fps, creado con HTML, efectos de sonido sincronizados con la música y desenfoque de movimiento.
- Estrellas
- 322
- Forks
- 47
- Issues abiertos
- 0
- Último commit
- hace 5 días
¿Qué es?
Product Launch Motion es una skill de Claude Code que recibe la URL de un sitio web de producto y dirige, crea y renderiza un video de lanzamiento corto. Claude analiza el sitio, escribe la historia, distribuye cada escena en una cuadrícula de tiempos basada en una pista musical y genera un MP4 a 60 fps con efectos de sonido sincronizados.
Cada fotograma es HTML calculado como una función pura del tiempo, por lo que los renders son deterministas y se pueden comprobar compás a compás. Playwright captura subfotogramas y ffmpeg aplica el desenfoque de movimiento. La animación utiliza resortes amortiguados de forma cerrada, y un único elemento en pantalla cambia de estado mediante una transformación gradual en lugar de cortes bruscos. La skill requiere Claude Opus 5.5 y necesita Node 20+, Playwright, FFmpeg y Python 3 con numpy.
El repositorio también conserva la skill anterior v1, que crea películas narradas con GSAP y HyperFrames, en una carpeta legacy.
Funciones clave
- 01Crea un video de lanzamiento a partir de la URL de un sitio web, sin necesidad de edición manual.
- 02Sitúa el movimiento y los efectos de sonido en una cuadrícula de tiempos basada en una pista musical.
- 03Renderiza el video a 60 fps con desenfoque de movimiento de ffmpeg.
- 04Usa resortes de forma cerrada y un único elemento que se transforma gradualmente, en lugar de cortes bruscos.
- 05Admite un paso opcional de vidrio en WebGL para efectos de formas 3D.
Casos de uso
- Crear un video de lanzamiento de producto para una landing page de SaaS sin usar un editor de video.
- Producir películas promocionales cortas con sonido sincronizado a partir de un sitio web existente.
- Prototipar ideas de diseño de movimiento como HTML determinista renderizado a video.
Inicio rápido
- 1
Instala la skill
npx skills add AbubakrChan/product-launch-motion - 2
En Claude Code, pide un vídeo e incluye la URL de tu sitio
Antes de usarlo
- Necesitas Claude Code. El README recomienda Opus 5.5, ya que los modelos más pequeños pasan por alto muchos detalles.
- Para renderizar, necesitas Node 20+, Playwright, FFmpeg y Python 3 con numpy, todo instalado localmente.
- Los vídeos de muestra se crearon para Cheerful y no tienen licencia para reutilizarse, aunque la skill tenga licencia MIT.
Temas
Preguntas frecuentes
- ¿Qué es product-launch-motion?
- Una skill de Claude Code que convierte la URL de un sitio web en un video de lanzamiento de producto a 60 fps, creado con HTML, efectos de sonido sincronizados con la música y desenfoque de movimiento. Product Launch Motion es una skill de Claude Code que recibe la URL de un sitio web de producto y dirige, crea y renderiza un video de lanzamiento corto. Claude analiza el sitio, escribe la historia, distribuye cada escena en una cuadrícula de tiempos basada en una pista musical y genera un MP4 a 60 fps con efectos de sonido sincronizados.
- ¿product-launch-motion es gratuito? ¿Qué licencia tiene?
- product-launch-motion es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
- ¿product-launch-motion sigue mantenido?
- Mantenimiento activo. El último commit de product-launch-motion fue el 15 oct 2026.
- ¿Para qué puedo usar product-launch-motion?
- Crear un video de lanzamiento de producto para una landing page de SaaS sin usar un editor de video. Producir películas promocionales cortas con sonido sincronizado a partir de un sitio web existente. Prototipar ideas de diseño de movimiento como HTML determinista renderizado a video.
- ¿Cómo se instala product-launch-motion?
- Instala la skill: npx skills add AbubakrChan/product-launch-motion En Claude Code, pide un vídeo e incluye la URL de tu sitio
- ¿Dónde consigo product-launch-motion?
- El código fuente y las instrucciones de instalación están en GitHub: https://github.com/AbubakrChan/product-launch-motion
Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.
Proyectos relacionados
Una skill para Claude Code y Codex que convierte la interfaz real de tu app en videos de lanzamiento y clips cortos, sincronizados con música y renderizados localmente.
Marketplace independiente del modelo para skills y plugins de agentes, con una capa canónica sin dependencia de un harness, adaptadores y el gestor de paquetes ccpi.
Habilidades de agente en lenguaje claro para Claude Code, Codex CLI, Cursor CLI y Gemini CLI que convierten los informes de sesión en un veredicto fácil de entender y leer de un vistazo.
Convierte un guion escrito en un video explicativo narrado o una demo de producto, con voz local, sincronización por palabra y renderizado en canvas, mediante un agente de programación.
Una skill de Claude Code que crea videos de motion design con HTML, Playwright y ffmpeg, sin necesidad de una licencia de After Effects ni Remotion.