Repolode
Enviar
Sunwood-ai-labs

Sunwood-ai-labs/hyperframes-motion-reel-skill

Una skill de Claude Code que convierte un tema breve en un video de motion graphics sincronizado con el ritmo, renderizado en MP4 con HyperFrames.

Alternativa open source a:After Effects

Ver en GitHubSitio web
Estrellas
143
Forks
21
Issues abiertos
0
Último commit
hace 21 días

¿Qué es?

Este repositorio contiene una skill de Claude Code que indica al agente que actúe como diseñador de motion graphics y creative coder. A partir de un tema breve y, opcionalmente, imágenes o una pista de voz, planifica un universo visual, los textos, un sistema de diseño y una línea de tiempo compás a compás; luego construye las escenas con HTML, GSAP, SVG y Canvas.

La sincronización se ajusta a una cuadrícula de 120 BPM y 60 FPS, donde cada compás equivale a 0,5 segundos o 30 fotogramas. La música de fondo se genera en formato WAV usando únicamente las funciones integradas de Node.js y la misma tabla de compases que los elementos visuales. Las capas de Canvas y SVG usan una función pura render(t), lo que permite buscar posiciones de forma determinista.

La skill ejecuta un ciclo de verificación que incluye lint, check, revisión de snapshots y renderizado; después, comprueba algunos puntos del MP4 final con ffprobe y ffmpeg. Es un port de remotion-motion-reel basado en HyperFrames con licencia Apache-2.0 y en GSAP, por lo que evita la licencia comercial de Remotion.

Funciones clave

  • 01Sincronización con una cuadrícula de 120 BPM / 60 FPS, con los cortes expresados como números de compás.
  • 02Banda sonora generada en WAV usando únicamente las funciones integradas de Node.js y sincronizada con la misma tabla de compases.
  • 03Animación en dos capas: una línea de tiempo de GSAP en pausa y una función render(t) que permite buscar posiciones en Canvas y SVG.
  • 04Transformaciones de formas entre escenas en lugar de fundidos cruzados.
  • 05Resultados deterministas con un PRNG inicializado con una semilla, sin Date.now() ni Math.random().
  • 06Verificación con lint, check, snapshots y ffmpeg antes de la entrega.

Casos de uso

  • Crear un showreel breve o un teaser de motion graphics a partir de una idea expresada en una línea.
  • Producir videos para lanzamientos de productos en formatos 16:9, 9:16 o 1:1.
  • Crear motion graphics guiados por música, donde los elementos visuales siguen un BPM definido.
  • Generar contenido de video apto para uso comercial sin pagar licencias de bibliotecas de motion.

Inicio rápido

  1. 1

    Instala la skill clonando el repositorio en la carpeta de skills de Claude Code

    git clone https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill ~/.claude/skills/hyperframes-motion-reel
  2. 2

    Asegúrate de que Node.js (LTS actual) con npx, Google Chrome y ffmpeg/ffprobe estén disponibles en PATH

  3. 3

    Ejecuta la skill en Claude Code con un tema breve

    /hyperframes-motion-reel Neon Tokyo night drive, 20 seconds, BPM 128

Antes de usarlo

  • Requiere Claude Code y las skills de dominio de HyperFrames instaladas por separado.
  • Para renderizar y verificar, se necesitan Google Chrome y ffmpeg/ffprobe en PATH.

Temas

#claude-code#motion-graphics#gsap#svg#canvas#video-generation#animation#hyperframes#claude-skill#motion-design

Preguntas frecuentes

¿Qué es hyperframes-motion-reel-skill?
Una skill de Claude Code que convierte un tema breve en un video de motion graphics sincronizado con el ritmo, renderizado en MP4 con HyperFrames. Este repositorio contiene una skill de Claude Code que indica al agente que actúe como diseñador de motion graphics y creative coder. A partir de un tema breve y, opcionalmente, imágenes o una pista de voz, planifica un universo visual, los textos, un sistema de diseño y una línea de tiempo compás a compás; luego construye las escenas con HTML, GSAP, SVG y Canvas.
¿hyperframes-motion-reel-skill es gratuito? ¿Qué licencia tiene?
hyperframes-motion-reel-skill es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿hyperframes-motion-reel-skill sigue mantenido?
Mantenimiento activo. El último commit de hyperframes-motion-reel-skill fue el 29 sept 2026.
¿Para qué puedo usar hyperframes-motion-reel-skill?
Crear un showreel breve o un teaser de motion graphics a partir de una idea expresada en una línea. Producir videos para lanzamientos de productos en formatos 16:9, 9:16 o 1:1. Crear motion graphics guiados por música, donde los elementos visuales siguen un BPM definido. Generar contenido de video apto para uso comercial sin pagar licencias de bibliotecas de motion.
¿Cómo se instala hyperframes-motion-reel-skill?
Instala la skill clonando el repositorio en la carpeta de skills de Claude Code: git clone https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill ~/.claude/skills/hyperframes-motion-reel Asegúrate de que Node.js (LTS actual) con npx, Google Chrome y ffmpeg/ffprobe estén disponibles en PATH Ejecuta la skill en Claude Code con un tema breve: /hyperframes-motion-reel Neon Tokyo night drive, 20 seconds, BPM 128
¿Dónde consigo hyperframes-motion-reel-skill?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill

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

Proyectos relacionados