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.
32247JavaScriptMITActualizado hace 5 días
kaventro/motion-designer
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.
Alternativa open source a:After Effects
- Estrellas
- 105
- Forks
- 7
- Issues abiertos
- 1
- Último commit
- hace 19 días
¿Qué es?
motion-designer es una skill de agente que crea videos de lanzamiento, títulos, explicaciones, videos de datos y gráficos al ritmo de la música a partir de código. Reconstruye la interfaz de tu app en HTML, la coloca dentro del marco de un iPhone o de una ventana de laptop, sincroniza cada movimiento con el ritmo de la música, revisa el resultado fotograma por fotograma y lo renderiza en video con headless Chrome y ffmpeg.
Cada video es una sola página web donde cada fotograma es una función del tiempo, por lo que se puede renderizar cualquier fotograma de forma independiente y el resultado es preciso hasta el último fotograma. La skill incluye scripts para detectar ritmos, cortar música con precisión de compás, revisar la calidad fotograma por fotograma y generar voces en off con modelos de voz locales o macOS say, mientras la música baja de volumen durante la narración.
Se instala como una skill para Claude Code y Codex, y se ejecuta con un prompt breve desde el repositorio de tu app. El proceso empieza con un plan que apruebas antes de que se cree nada.
Funciones clave
- 01Reconstruye la interfaz real de la app en HTML para mostrarla dentro de marcos de dispositivos o ventanas.
- 02Sincroniza el movimiento con los ritmos de la música y permite cortes precisos por compás.
- 03Revisa los fotogramas para detectar temporizadores, números aleatorios y errores de bucle antes de renderizar.
- 04Renderiza video H.264 con headless Chrome y ffmpeg, además de una versión en bucle sin sonido y una imagen de portada.
- 05Añade voces en off con modelos locales como Chatterbox o Kokoro, mezcladas a -16 LUFS y con la música atenuada durante la voz.
Casos de uso
- Crear un video de lanzamiento de 30 segundos para el sitio web de una app para iOS o de escritorio.
- Producir un anuncio narrativo corto con un personaje y una llamada a la acción para registrarse.
- Editar un video promocional para que un momento clave coincida con la caída de la música.
- Crear videos de datos o explicativos a partir de código, sin usar un editor de video.
Inicio rápido
- 1
Instala la skill para Claude Code
npx skills add kaventro/motion-designer - 2
Comprueba qué herramientas tiene esta máquina
bash skills/motion-designer/scripts/doctor.sh - 3
Ejecuta la skill en el repositorio de tu aplicación
/motion-designer
Antes de usarlo
- Para renderizar vídeos, primero debes instalar Node 22 o posterior, Chrome, ffmpeg y Python 3.
- La música original opcional (unos 11 GB) y los modelos de voz en off (unos 4 GB o más) son descargas grandes.
Temas
Preguntas frecuentes
- ¿Qué es motion-designer?
- 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. motion-designer es una skill de agente que crea videos de lanzamiento, títulos, explicaciones, videos de datos y gráficos al ritmo de la música a partir de código. Reconstruye la interfaz de tu app en HTML, la coloca dentro del marco de un iPhone o de una ventana de laptop, sincroniza cada movimiento con el ritmo de la música, revisa el resultado fotograma por fotograma y lo renderiza en video con headless Chrome y ffmpeg.
- ¿motion-designer es gratuito? ¿Qué licencia tiene?
- motion-designer es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
- ¿motion-designer sigue mantenido?
- Mantenimiento activo. El último commit de motion-designer fue el 1 oct 2026.
- ¿Para qué puedo usar motion-designer?
- Crear un video de lanzamiento de 30 segundos para el sitio web de una app para iOS o de escritorio. Producir un anuncio narrativo corto con un personaje y una llamada a la acción para registrarse. Editar un video promocional para que un momento clave coincida con la caída de la música. Crear videos de datos o explicativos a partir de código, sin usar un editor de video.
- ¿Cómo se instala motion-designer?
- Instala la skill para Claude Code: npx skills add kaventro/motion-designer Comprueba qué herramientas tiene esta máquina: bash skills/motion-designer/scripts/doctor.sh Ejecuta la skill en el repositorio de tu aplicación: /motion-designer
- ¿Dónde consigo motion-designer?
- El código fuente y las instrucciones de instalación están en GitHub: https://github.com/kaventro/motion-designer
Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.
Proyectos relacionados
Una skill de Claude Code que convierte un prompt en una breve animación procedural en canvas y la renderiza en MP4 con un navegador headless y ffmpeg.
828120JavaScriptMITActualizado hace 15 días
Skill para Codex y Claude Code que convierte un tema, artículo o relato en un video explicativo narrado y dibujado a mano, con trazos progresivos y escritura china.
699132JavaScriptMITActualizado hace 20 horas
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.
59838JavaScriptMITActualizado hace 23 horas
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.
58677PythonMITActualizado hace 16 días
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.
17921PythonMITActualizado hace 6 días