🎞️ Motion Graphics Skills — Animaciones de Lanzamiento Hechas con Código
15 skills, cero After Effects
charlie947/motion-graphics-skillses un pack de 15 skills para Claude Code y Codex que produce motion graphics de nivel lanzamiento escribiendo código, no editando vídeo.
- Escala: 459 ⭐ y 64 forks; MIT; creado el 26-sep-2026 y actualizado el 11-oct-2026.
- Autor: Charlie Hills, que escribe la newsletter MarTech AI para ~71.000 lectores.
- La idea: cada frame es código. Claude dibuja un HTML con
window.seek(seconds)y se renderiza a MP4.- Cero dependencias de pago: no hace falta generador de vídeo, ni After Effects, ni claves de API.
Tres cifras para el mismo repo
La descripción de GitHub dice 13 skills. El README dice 15. La propia tabla del README dice «Fourteen skills». El árbol de
skills/tiene 15SKILL.md.Gana 15: es lo que realmente se instala. La descripción está desactualizada y el «fourteen» es un residuo de cuando había 14.
🧭 Qué es y qué no es
| Es | No es |
|---|---|
| Un pack de 15 skills instalable | Una lista de enlaces |
| Un workflow de marca → brief → vídeo | Un generador de vídeo por IA |
| Código (HTML + JS) que se puede editar | Un plugin de After Effects o Premiere |
| Un conjunto de reglas de diseño probadas | Un curso o una plantilla cerrada |
| MIT, gratis y sin claves de API | Un servicio con render en la nube |
No hay modelo de difusión, ni texto-a-vídeo, ni avatares. Claude escribe la animación como escribiría una web: capas, transformaciones, tiempos y tipografía. El resultado es determinista y re-renderizable.
flowchart TD B["🎨 brand-intake<br/>brand.md + MOTION.md"] --> P["📝 Plan<br/>motion-brief-writer · reference-to-motion<br/>motion-prompt-writer"] B --> L["🚀 Launch<br/>launch-video · apple-launch-film"] B --> E["🎓 Explain<br/>vox-explainer · animated-chart<br/>milestone-reveal · motion-effects"] B --> O["🎬 Open<br/>title-sequence-3d"] B --> C["⚔️ Compare<br/>model-showdown"] B --> R["📣 Promote<br/>newsletter-promo · loop-cover · reel-export"]
🎬 La idea: cada frame es código
El flujo técnico es siempre el mismo:
- Claude escribe un HTML con la escena completa.
- Ese HTML expone una función
window.seek(seconds): le pasas un segundo y dibuja el frame exacto de ese instante. - Un renderizador recorre el tiempo frame a frame y lo convierte en MP4.
Eso significa que la animación no es un vídeo que se «guarda»: es una función del tiempo. Cambiar una palabra, un color o un ritmo es cambiar una línea y volver a renderizar, sin rehacer nada.
| Pieza | Para qué | Obligatoria |
|---|---|---|
HTML + window.seek() | La escena y su línea de tiempo | Sí |
HyperFrames (npx skills add heygen-com/hyperframes) | Exportar a MP4 | Recomendada |
| ffmpeg + Chrome | Alternativa de export | Solo si no usas HyperFrames |
| Opus 5.5 | Calidad de animación que el autor considera necesaria | Recomendada |
brand.md + MOTION.md | Que el resultado sea de tu marca | Sí para «on-brand» |
Lo que sí necesitas
Nada de claves de API. Ni vídeo, ni imagen, ni voz. El coste es tu suscripción al modelo y el tiempo de render. Ese es el punto fuerte real del pack.
🗂️ Las 15 skills, en orden de uso
| Etapa | Skill | Qué produce | Frase que la activa |
|---|---|---|---|
| Setup | brand-intake | brand.md + MOTION.md; el resto las lee primero | «Set up my brand for motion» |
| Plan | motion-brief-writer | Un brief de construcción preciso, en tu marca | «Write me a motion brief» |
| Plan | reference-to-motion | Desmonta un vídeo que admiras y lo convierte en prompt escena a escena | «Break down this reference» |
| Plan | motion-prompt-writer | Prompt completo de 8 partes: barra, formato, regla, look, motion, never, self-check, escena | «Write me a Motion prompt» |
| Launch | launch-video | Lanzamiento de producto, oferta o cohorte, 30–45 s | «Make a launch video» |
| Launch | apple-launch-film | Film estilo keynote: menú, notch y widgets, todo código | «Make it look like an Apple keynote» |
| Explain | vox-explainer | Explicador documental de 30–60 s | «Make a Vox-style video» |
| Explain | animated-chart | Gráfico animado en bucle, con tus cifras exactas | «Animate my chart» |
| Explain | milestone-reveal | Cielo de puntos que se junta en tu número real | «Make a milestone video» |
| Explain | motion-effects | 16 efectos premium de 8 s en tu marca | «Build the search-to-results effect» |
| Open | title-sequence-3d | Intro 3D cinematográfica de 8–15 s | «Make a cinematic 3D intro» |
| Compare | model-showdown | Un brief, tres modelos de IA, apilados en un vídeo | «Same prompt, three AIs» |
| Promote | newsletter-promo | Promo de 12–20 s que lleva a una edición | «Make a promo for this newsletter» |
| Promote | loop-cover | Tu portada como GIF en bucle sin costura | «Make my cover a looping GIF» |
| Promote | reel-export | Cualquier vídeo a 1080×1920 limpio | «Make this a reel» |
Empieza por
brand-intake, no por el vídeo
brand-intakeescribebrand.md(quiénes eres, qué vendes, tus assets) yMOTION.md(colores, tipografía, timings y reglas de movimiento), y añade una regla enCLAUDE.mdpara que Claude los lea antes de animar nada.Sin esos dos archivos, cualquier skill te pedirá hex, fuente y logo — y no llamará al resultado «on-brand». Es la diferencia entre un vídeo bonito y un vídeo tuyo.
🧠 Las 7 reglas de la casa
Esto es lo que de verdad vale del repo. No son prompts: son reglas destiladas de borradores rechazados.
| # | Regla | Por qué |
|---|---|---|
| 1 | Datos primero | Cada nombre, fecha y cifra en pantalla sale de una lista que tú apruebas. Nada inventado. |
| 2 | Tu marca, no la media | Colores y fuentes vienen de brand-intake o de ti. Si no hay nada, pregunta. |
| 3 | Defaults prohibidos | Texto máquina de escribir, glow, bounce, degradados sobre texto y fondos violeta→azul. |
| 4 | Motion on twos | Lo que debe parecer hecho a mano aguanta cada pose 2 frames a 24 fps. |
| 5 | Los primeros 3 segundos llevan el gancho | Si el primer frame está vacío, se corta. |
| 6 | Revisar antes de exportar | Un frame del medio de cada plano, buscando texto cortado, solapes y datos falsos. |
| 7 | Solo assets reales | Logos y capturas salen de tus archivos; nunca se redibujan de memoria. |
La regla 3 es la que más se nota
Los «defaults prohibidos» son exactamente el catálogo de vicios del vídeo generado por IA. Que el pack los nombre y los bloquee explica por qué el resultado no parece genérico.
🚀 Instalación
La vía corta, ~30 segundos:
npx skills add charlie947/motion-graphics-skillsDespués: abre Claude Code, elige Opus 5.5 con /model y ejecuta brand-intake primero.
| Método | Cuándo usarlo | Cómo |
|---|---|---|
npx skills | Lo normal | El comando de arriba |
| Copia manual | Quieres control | Copiar las 15 carpetas de skills/ a ~/.claude/skills/ o .claude/skills/ |
| Claude Desktop | Una skill suelta | zip -r brand-intake.skill brand-intake y subirlo en Customise → Skills |
| Codex | Proyecto concreto | Copiar a .agents/skills/<nombre>/SKILL.md |
Para MP4, añade HyperFrames una vez:
npx skills add heygen-com/hyperframesDetalle completo
Plugins por agente, CLI, coste y límites están en HyperFrames.
Instalación manual: no borra nada, pero tampoco actualiza
Los scripts del README preservan las skills que ya tengas en el destino. Eso está bien para no pisar tu trabajo, pero significa que no actualizan una versión anterior: si ya existe, se salta. Para actualizar, borra la carpeta a mano.
Qué necesita cada workflow
| Workflow | Necesita | Si falta |
|---|---|---|
| Cualquier skill, on-brand | brand.md + MOTION.md | Pide hex, fuente y logo; no lo llama on-brand |
| Construir la animación | Claude Code con Opus 5.5 | No hay con qué construir |
| Exportar a MP4 | HyperFrames, o ffmpeg + Chrome | Te queda el HTML con seek(), export pendiente |
loop-cover (medición) | ffmpeg y Python 3 | GIF hecho, pero sin medir costura ni movimiento |
reel-export / model-showdown | ffmpeg y ffprobe | Layout en HTML, encode final pendiente |
model-showdown | Acceso a cada modelo con tus cuentas | Compara solo los que alcanzas, y lo dice |
apple-launch-film (motion) | La skill gratuita apple-design | Construye, pero sin validar contra las reglas de Apple |
🧪 La prueba externa: 7,0 minutos, 4/4
El 11-oct-2026, el catálogo Awesome Claude Video Skills metió este pack en su test de 16 skills: mismo brief (promo de 15 s, 1920×1080, 30 fps, cinco líneas fijas), mismo sandbox, sin claves de API.
| Métrica | Resultado |
|---|---|
| Comprobaciones superadas | 4/4 |
| Líneas de copy legibles | 5/5 |
| Sonido | Sí |
| Look | Cercano al vídeo sin skill |
| Tiempo | 7,0 min |
| Estrellas en ese momento | 174 (hoy 459) |
Cómo leerlo sin engañarte
Pasó todo, pero su look quedó cerca del que produce Claude Code sin ninguna skill. La ventaja aquí no es «se ve mejor»: es que el resultado es reproducible, editable y coherente con tu marca. Si buscas sorpresa visual, este no es el pack; si buscas un sistema, sí.
⚖️ Lectura crítica
Lo bueno:
- Resuelve el problema correcto: motion graphics sin After Effects, sin generador y sin claves.
- 15 skills con un workflow real, no 15 prompts sueltos:
brand-intakealimenta a todas. - Reglas concretas y accionables (defaults prohibidos, motion on twos, revisión por frame).
- Salida editable: HTML +
window.seek()es infinitamente más reutilizable que un MP4. - MIT, un solo autor, repo limpio: 56 archivos, sin dependencias raras.
- Cero issues abiertos y
validate-skills.shpara comprobaciones internas.
Lo que hay que tener en cuenta:
- Tres cifras contradictorias (13 / 14 / 15) en descripción, README y tabla. Señal de prisa editorial.
- Depende de Opus 5.5 en la recomendación del autor; no hay datos de qué tal va con modelos menores.
- El test externo lo deja en «look cercano al default»: no es el pack más llamativo del mercado.
- 17 días sin push (11-oct) y creado hace un mes: proyecto joven, ritmo aún por demostrar.
- 0 issues también puede significar poca señal de uso, no perfección.
- Solo en inglés; los prompts y las reglas no están traducidos.
- Un límite declarado por el autor: una cara humana fotorrealista sigue necesitando un modelo de imagen. El código hace motion, tipografía y UI; no personas.
- Dependencia de HyperFrames o ffmpeg+Chrome para el MP4: sin eso no hay vídeo final.
model-showdownnecesita cuentas de varios modelos, así que su utilidad depende de a cuántos tengas acceso.
La lectura de fondo
Este repo no compite por el vídeo más espectacular: compite por convertir el vídeo en código de proyecto. Esa es la diferencia entre «pedirle un vídeo a una IA» y tener una animación versionada, editable y re-renderizable con tu marca dentro. Las 7 reglas de la casa valen más que las 15 skills: si solo te llevas una cosa, llévate los defaults prohibidos y la revisión frame a frame. El test externo confirma que funciona; también confirma que no hace magia.
🔗 Enlaces
- Repositorio — motion-graphics-skills
- Newsletter de Charlie Hills
- Los 16 efectos (board + PDF gratis)
- Evidencia del test externo
- HyperFrames (export a MP4)
- 21st.dev (componentes reales para UI en vídeo)
🔗 Notas relacionadas
- 🎬 Awesome Claude Video Skills — el catálogo donde se probó este pack.
- 🚀 AI Product Development Toolkit — incluye
/remotion-video, otra vía de vídeo en código. - 🗺️ Awesome Claude Code — el mapa general de herramientas y skills.
- 🧠 Claude Code Best Practices — cómo se estructura una skill por dentro.
- 📥 Vault Ingest — cómo se guardó esta nota.