Repolode
Enviar
Vincentwei1021

Vincentwei1021/mg-styles-15

Quince películas de motion design de 10 segundos, cada una creada por Claude escribiendo código, con el prompt y el código fuente completo publicados para cada estilo.

Ver en GitHubSitio web
Estrellas
1,417
Forks
208
Issues abiertos
2
Último commit
hace 16 días

¿Qué es?

Este repositorio reúne quince películas de motion design de 10 segundos, una por estilo, desde animación cel por fotograma y 2.5D isométrico hasta pixel art, synthwave y una edición de subtítulos de programa de variedades en formato 9:16. Claude Opus 5.5 produjo cada película escribiendo código a partir de un único prompt que abarcaba los elementos visuales, la animación, la música y los efectos de sonido. Las imágenes se crean con SVG, Canvas, WebGL, Three.js y Blender para la película en 3D, en lugar de usar modelos generativos de imagen o video.

Para cada estilo, el repositorio incluye la película, notas sobre el estilo, el prompt completo en la carpeta prompts/ y todo el código fuente, incluido el código visual, el script de banda sonora audio.py y el archivo de tiempos. Un renderizador basado en Node captura cada fotograma en Chrome sin interfaz gráfica y usa ffmpeg para combinar los fotogramas con el audio en un MP4. Además, una página de vista previa permite recorrer cualquier película en el navegador.

El proyecto está dirigido a desarrolladores que quieran reproducir un estilo con su propio asistente de IA. Los prompts se pueden reutilizar con una historia y una marca nuevas, y el repositorio incluye una rúbrica de revisión y una plantilla para redactar prompts de nuevos estilos.

Funciones clave

  • 01Quince películas de distintos estilos, cada una de 10 segundos.
  • 02Cada estilo incluye su prompt, notas sobre el estilo y el código fuente completo.
  • 03Las imágenes se generan mediante código (SVG, Canvas, WebGL, Three.js, Blender), sin generación de imágenes ni videos.
  • 04Las bandas sonoras se sintetizan con scripts audio.py que usan muestras grabadas de instrumentos.
  • 05Un renderizador de Chrome sin interfaz gráfica y ffmpeg generan archivos MP4 con precisión de fotograma.
  • 06Página de vista previa en el navegador para recorrer cada película.

Casos de uso

  • Aprender cómo se construye con código un estilo concreto de motion design.
  • Reutilizar un prompt como punto de partida para crear tu propio cortometraje animado.
  • Estudiar un flujo de renderizado con Chrome sin interfaz gráfica y ffmpeg para obtener videos deterministas.
  • Explorar cómo un asistente de IA puede escribir tanto el código visual como el de audio de una película.

Inicio rápido

  1. 1

    Instala los paquetes de Node desde la raíz del repositorio (se necesita Node.js 22.12 o posterior).

    npm install
  2. 2

    Instala los paquetes de Python para las bandas sonoras y los scripts de recursos (se necesita Python 3.11 o posterior).

    pip install -r requirements.txt
  3. 3

    Sintetiza la banda sonora de una película.

    python3 demos/01-flat-vector/audio.py
  4. 4

    Renderiza todos los fotogramas de esa película en un MP4 (se necesitan Google Chrome y ffmpeg).

    node harness/render.mjs demos/01-flat-vector

Antes de usarlo

  • Para renderizar, es necesario tener Google Chrome y ffmpeg instalados en el equipo.
  • La película 3D también necesita Blender, y sus fuentes no están incluidas en el repositorio.
  • Se trata de una muestra de 15 películas y su código fuente, no de una biblioteca reutilizable.

Temas

#motion-design#animation#claude#prompt-engineering#ffmpeg#threejs#generative-art#video

Preguntas frecuentes

¿Qué es mg-styles-15?
Quince películas de motion design de 10 segundos, cada una creada por Claude escribiendo código, con el prompt y el código fuente completo publicados para cada estilo. Este repositorio reúne quince películas de motion design de 10 segundos, una por estilo, desde animación cel por fotograma y 2.5D isométrico hasta pixel art, synthwave y una edición de subtítulos de programa de variedades en formato 9:16. Claude Opus 5.5 produjo cada película escribiendo código a partir de un único prompt que abarcaba los elementos visuales, la animación, la música y los efectos de sonido. Las imágenes se crean con SVG, Canvas, WebGL, Three.js y Blender para la película en 3D, en lugar de usar modelos generativos de imagen o video.
¿mg-styles-15 es gratuito? ¿Qué licencia tiene?
mg-styles-15 es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿mg-styles-15 sigue mantenido?
Mantenimiento activo. El último commit de mg-styles-15 fue el 5 oct 2026.
¿Para qué puedo usar mg-styles-15?
Aprender cómo se construye con código un estilo concreto de motion design. Reutilizar un prompt como punto de partida para crear tu propio cortometraje animado. Estudiar un flujo de renderizado con Chrome sin interfaz gráfica y ffmpeg para obtener videos deterministas. Explorar cómo un asistente de IA puede escribir tanto el código visual como el de audio de una película.
¿Cómo se instala mg-styles-15?
Instala los paquetes de Node desde la raíz del repositorio (se necesita Node.js 22.12 o posterior).: npm install Instala los paquetes de Python para las bandas sonoras y los scripts de recursos (se necesita Python 3.11 o posterior).: pip install -r requirements.txt Sintetiza la banda sonora de una película.: python3 demos/01-flat-vector/audio.py Renderiza todos los fotogramas de esa película en un MP4 (se necesitan Google Chrome y ffmpeg).: node harness/render.mjs demos/01-flat-vector
¿Dónde consigo mg-styles-15?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/Vincentwei1021/mg-styles-15

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados