Bang Motion: la skill que convierte a Claude Code en motion designer (y no en un generador de diapositivas)

Pídele a un agente de IA "un vídeo promocional" y casi siempre recibes lo mismo: una diapositiva por idea, un título, una foto y un fundido entre secciones. Bang Motion es una skill para Claude Code, Codex, Gemini CLI o Cursor que ataca justo ese problema. Convierte al agente en algo parecido a un motion designer: openers, promos, demos de producto, tipografía cinética y explainers que se reproducen como un vídeo, en un único index.html hecho con HTML, CSS, GSAP y, si hace falta, Three.js.

Lo hemos leído entero (versión 1.19.0, commit c1aa65e) para contarte qué trae, cómo funcionan sus reglas, qué necesitas para usarla y cuánto te cuesta de verdad. Spoiler: la skill es gratis y el resultado puede salir a coste cero si ya pagas un agente.

Qué es Bang Motion

• Repositorio: github.com/bangtutorial/bang-motion
• Autor: Bang Tutorial, un canal de YouTube indonesio.
• Licencia: MIT, © 2026 Bang Tutorial. Puedes usarla, modificarla y usarla en trabajos para clientes; solo tienes que conservar el aviso de copyright si la redistribuyes.
• Versión: 1.19.0, del 15 de septiembre de 2026. El repositorio se creó el 5 de septiembre y a 7 de noviembre tiene unas 1.280 estrellas y 159 forks.
• Formato: carpeta estándar de Agent Skills (SKILL.md con frontmatter, references/, assets/, scripts/) y también plugin de Claude Code.
• Idioma: el README está en inglés, pero SKILL.md, las referencias y el changelog están en indonesio. Al agente le da igual; a ti te importa si quieres editar las reglas.

La idea de fondo es buena: en vez de pedirle al modelo "hazlo más cinematográfico", la skill traduce lo que exige un motion designer a reglas que el agente puede comprobar en su propio código. Y trae plantillas que hacen que la arquitectura correcta sea la más fácil de seguir.

Qué puedes hacer con ella

Detrás hay tres menús que se combinan: 10 direcciones de estilo (cinematográfico oscuro, poster color-block, editorial claro, papel, retro, brutalista mono, pastel, lujo oscuro, flat pop con fotos y degradado granulado), 19 conceptos de opener (un solo plano continuo, problema → resuelto, antes/después, viaje dentro de la interfaz, número vivo, tour de producto con claims…) y 6 estilos de explainer (acción continua, collage de dibujos, periodismo visual, catálogo blanco, boceto vintage y escenario de dibujos animados).

Cómo trabaja: brief, aprobación y luego código

El orden de trabajo es estricto y es lo que más se nota frente a pedirle un vídeo a un agente sin más:

1. Brief. Le das el producto, el logo o la web, el público, la duración y el formato. Si es un explainer, hace una sola pregunta con estilo, formato, duración y voz.
2. Style brief antes de una línea de código. El agente propone tres conceptos candidatos del menú, recomienda uno y escribe una "huella de estructura" (concepto · nº de escenas · objeto principal de cada escena · apertura · cierre). La paleta debe salir de tu marca y cada color cita su fuente (logo, icono de la app, web); si un color no viene de la marca, lo marca como "derivado" y explica por qué.
3. Tú apruebas. Sin style brief aprobado, la skill prohíbe tocar el código. Cambiar un guion es barato; rehacer código, caro.
4. Construcción. Copia el starter adecuado (starter-opener.html o uno de los seis starter-explainer-*.html) y lo reescribe con tus tokens de color, fuentes y movimiento de fondo. Los starters son grises a propósito, para que nadie herede el look.
5. Verificación visual. El agente no puede "ver" un vídeo, solo fotogramas. scripts/snap.mjs congela la línea de tiempo en 6–20 segundos clave y los captura con Puppeteer para que el agente revise texto cortado, solapes o escenas que siguen pareciendo diapositivas.
6. Entrega. Un único index.html que se abre con doble clic: autoplay, loop, sin reproductor visible. ?debug=1 muestra una barra para recorrerlo y R/Espacio reinician o pausan.

Las reglas técnicas que marcan la diferencia

Determinista o nada

La "Ley #2" de SKILL.md dice que ninguna línea puede leer el reloj del sistema. Todo lo que se ve es una función pura de tl.time(), el tiempo de la línea de tiempo de GSAP: partículas, contadores, vibración de cámara (con senos de alta frecuencia, no Math.random()) y posiciones de objetos que "fluyen" (se interpola la distancia, no se acumula velocidad por fotograma).

La consecuencia práctica es enorme: puedes recorrer la animación como en la línea de tiempo de After Effects y el render fotograma a fotograma a MP4 da la misma imagen cada vez. Por eso cada starter expone window.OPENER = { tl, DURATION, seek, ready }, que usan tanto la verificación como la exportación.

El test anti-PowerPoint, comprobable en el código

Antes de entregar, la skill obliga a revisar el código, no las sensaciones. Algunos de sus ocho puntos:

• Si hay tres o más <section> que se encienden y apagan con opacidad, es un pase de diapositivas. Las escenas cambian porque se mueve el mundo o la cámara (push-through, whip a otro ángulo), no porque una sección se desvanezca.
• Máximo dos niveles de texto por escena: una frase o cifra grande y una etiqueta. Antetítulo + título + cuerpo ya es PPT.
• Un Ken Burns (escala 1,0 → 1,05 sobre una foto) como único movimiento no vale.
• Si el guion sigue el patrón gancho → función → función → promesa → logo → CTA, o aparecen tres tarjetas de funciones en fila, es una plantilla aunque la piel sea nueva.

Fallar un solo punto obliga a rehacer antes de enseñártelo.

Estilo que sale de tu marca

El fallo más común que la skill intenta evitar es que el opener de tu producto salga con la misma piel que el anterior: fondo oscuro, acento azul, glow y la misma fuente. El checklist exige que cada proyecto se diferencie del anterior en al menos tres de: paleta, fuente, movimiento de fondo y gesto característico. Un vídeo de referencia solo aporta ritmo y energía, nunca colores, fuentes, orden de escenas ni momentos concretos.

Pensado para el móvil

Nada de texto por debajo de 30 px en un escenario de 1080 de ancho (cuerpo ≥ 44, etiquetas ≥ 34, créditos ≥ 30). Si vas a usar el vídeo en Reels o TikTok, es la regla que más se agradece.

Vídeo como capa de metraje

Desde la v1.18.0 los starters traen un helper clip(el, {at, in, out, rate, hold}): puedes meter una grabación de pantalla dentro de un portátil o una máscara y el clip sigue el reloj de la línea de tiempo, así que el scrub y la exportación siguen siendo exactos.

Cómo instalar Bang Motion

Como plugin de Claude Code

/plugin marketplace add bangtutorial/bang-motion
/plugin install bang-motion@bang-motion

Para actualizar: /plugin marketplace update bang-motion.

A mano (cualquier agente)

git clone https://github.com/bangtutorial/bang-motion ~/.claude/skills/bang-motion

En Windows, la carpeta es C:\Users\<tú>\.claude\skills\bang-motion. En Codex CLI va en tu carpeta de skills o la referencias desde AGENTS.md; en Gemini CLI o Cursor, copias la carpeta al proyecto y apuntas a SKILL.md desde GEMINI.md o .cursor/rules. Si es tu primera skill, en esta guía de skills de Claude Code explicamos cómo se cargan.

Instala una sola copia: si tienes el plugin y la carpeta manual con el mismo nombre, chocan y gana el plugin.

Pedírselo

Haz un opener de 30 segundos para mi app de notas. Te adjunto el logo y capturas.

Explica cómo funciona un puerto de contenedores en 60 segundos, estilo periodismo visual, sin voz en off.

El README da un consejo que conviene seguir: empieza cada vídeo en un chat nuevo. La skill se lee al invocarla, y un chat largo arrastra decisiones de proyectos anteriores. Y pide el estilo por su nombre ("degradado granulado"), no una lista de escenas: si describes las escenas de una referencia, obtienes una copia.

Exportar a MP4

El entregable es HTML. Si necesitas un archivo de vídeo:

npm i puppeteer
python -m http.server 5178
node scripts/export-frames.mjs
ffmpeg -framerate 60 -i frames/f%05d.png -c:v libx264 -pix_fmt yuv420p -crf 16 opener.mp4

export-frames.mjs no graba la pantalla: fija el tiempo de la línea, espera dos requestAnimationFrame y captura, así que no pierde fotogramas aunque uno tarde 300 ms en dibujarse. Acepta FPS, OUT y SCALE como variables de entorno (por defecto 60 fps a 1920×1080). Sin ffmpeg puedes grabar la pestaña con OBS, aunque ahí sí puede haber caídas de fotogramas.

Cuánto cuesta usar Bang Motion

La skill es MIT y gratuita. Lo que cuesta es lo que hay alrededor:

Frente a la alternativa habitual, que es pagar una herramienta de motion design por suscripción o un freelance por pieza, la cuenta queda así:

• Si ya pagas Claude Pro o tienes acceso a Codex: coste extra cero. Haces el opener, lo exportas con ffmpeg y listo.
• Si no pagas ningún agente: Gemini CLI con su nivel gratuito más un navegador es la ruta más barata. El techo lo ponen sus límites de uso, no la skill.
• Si necesitas personas o productos fotografiados y no tienes fotos: aquí sí aparece el coste de un MCP de imágenes. Para ahorrarlo, elige un estilo ilustrado o tipográfico, que no necesita fotos.

No pudimos medir el consumo de tokens de un opener completo en esta revisión; ten en cuenta que el proceso incluye varias rondas (style brief, construcción, capturas y correcciones), así que en la API no es una sola llamada.

Lo que no te cuenta el README

Las reglas están en indonesio

SKILL.md (551 líneas) y las ocho referencias (unas 2.850 líneas más) están escritas en indonesio. Claude, Codex o Gemini las siguen sin problema, pero si quieres ajustar una regla, por ejemplo cambiar el formato por defecto a 9:16, tendrás que traducir esa parte. Las frases que el agente pone en pantalla salen en el idioma que le pidas.

Necesita internet para reproducirse

Los starters cargan gsap@3.12.5 y three@0.161.0 desde jsDelivr y las fuentes desde Google Fonts. Abrir el index.html sin conexión rompe la animación. Si vas a proyectarlo en un evento, descarga las librerías y cambia las URLs por rutas locales (mejor como scripts clásicos que como módulos: los módulos locales se bloquean al abrir por file://).

GSAP es gratis, pero no es MIT

Desde la versión 3.13, tras la compra por Webflow, GSAP es gratis también para uso comercial bajo su propia licencia estándar "no charge", que no es MIT y tiene alguna restricción (por ejemplo, no usarlo en una herramienta que compita con el constructor visual de Webflow). Para openers y promos de clientes no hay problema. Si quieres ir a la última versión, actualiza la URL del CDN del starter. Three.js sí es MIT.

Los scripts de verificación necesitan Puppeteer

snap.mjs y export-frames.mjs importan puppeteer, que no viene en el repositorio (npm i puppeteer). snap.mjs abre el archivo por file://; export-frames.mjs espera un servidor en 127.0.0.1:5178. Sin Node, la verificación se hace a mano con ?debug=1.

Lo que no probamos

En esta revisión no ejecutamos los starters ni generamos un opener: el análisis es de código y documentación. Las imágenes de la galería son del propio repositorio y, según el README, cada una es una escena estática con marcas y datos ficticios; los retratos y fotos de producto están generados con GPT Image 2.5.

Preguntas frecuentes

¿El resultado es un archivo de vídeo? No directamente. Es un index.html que se reproduce como vídeo. Para MP4 usas export-frames.mjs + ffmpeg.

¿Puedo usarlo en trabajos para clientes? Sí. La skill es MIT y GSAP es gratis para uso comercial. Revisa la licencia de las fotos o clips que metas.

¿Funciona fuera de Claude Code? Sí: Codex CLI, Gemini CLI, Cursor o incluso un chat normal pegando SKILL.md y la referencia que toque.

¿Todos los vídeos se parecen? Es justo lo que intenta evitar: la paleta sale de tu marca, el concepto se elige por producto y cada proyecto debe diferenciarse del anterior.

¿Sirve para shorts verticales? Sí, los explainers admiten 9:16. Si buscas personajes en 3D, mira también Claude Animated Shorts.

Conclusión

Bang Motion es de las skills de vídeo más útiles que hemos visto para un negocio pequeño: no necesita GPU, no cobra por render y el entregable se abre con doble clic. Lo valioso no son las plantillas, sino que convierte el criterio de un motion designer en reglas verificables (determinismo, test anti-diapositivas, paleta con fuentes). Si quieres comparar enfoques, HyperFrames también hace vídeo desde HTML y OpenMontage orquesta una producción completa con agentes. Para un opener o una promo de 30 segundos sin presupuesto, empieza por Bang Motion.