Motion Studio
Animaciones de producto con Claude, escritas en código. Claude no hace el video:
escribe el programa que lo dibuja. Cada video es una página HTML con window.seek(t) que
pinta el fotograma exacto de cada instante; Chromium sin ventana fotografía cada
fotograma y ffmpeg los une en un MP4 9:16, 1:1 y 16:9. La música se compone en código y
los efectos caen sobre el beat. Antes de renderizar, Claude mira sus propios fotogramas en
hojas de contacto y se corrige.
Basado en la Guía MOTION de @saulautomatiza: el setup y
los prompts para que Claude arme el video de lanzamiento de tu producto con tu logo, tus
capturas y música, sin que se note hecho con IA.
Instalar
Como skill (Claude Code, Codex, Cursor, Gemini CLI, OpenCode…)
npx skills add webtaken/motion-studio
Luego pídele al agente: "monta el estudio de motion en ./motion-studio". La skill corre
init.mjs, que copia el estudio, instala Playwright + Chromium, prepara Python para el
audio, inicializa git y hace un render de prueba.
Como plugin de Claude Code
/plugin marketplace add webtaken/motion-studio
/plugin install motion-studio@motion-studio
Clonando este repo
git clone https://github.com/webtaken/motion-studio && cd motion-studio
npm install && npx playwright install chromium
uv venv .venv && uv pip install --python .venv/bin/python -r audio/requirements.txt
# (sin uv: python3 -m venv .venv && .venv/bin/pip install -r audio/requirements.txt)
npm run doctor
Requisitos: Node ≥ 22, ffmpeg con libx264, Python 3 con numpy (para música y sfx;
librosa es opcional). npm run doctor revisa todo y dice cómo arreglar lo que falte.
Usar
Abre Claude Code en la carpeta del estudio (claude --model claude-opus-5-5, esfuerzo
xhigh; max para lanzamientos). Claude lee CLAUDE.md / AGENTS.md en cada sesión.
Comandos
npm run doctor # ¿está todo instalado?
npm run new -- mi-video [--marca m] # video nuevo (plantilla showreel o producto)
npm run dev # preview con scrubber, beats y sfx en localhost:4321
npm run check -- mi-video # reglas + determinismo
npm run sheet -- mi-video # hoja de contactos: gancho + un fotograma por beat
npm run sheet -- mi-video --mobile # ¿se lee a 360 px?
npm run sheet -- mi-video --sfx # ¿cada sonido cae en su fotograma?
npm run render -- mi-video -f all # MP4 9:16, 1:1 y 16:9 en out/mi-video/
npm run render -- mi-video --from 4 --to 7 # re-render solo de esos segundos
npm run capture -- https://tuproducto.com marca # marca real → assets/marca/
npm run ref -- refs/lanzamiento.mp4 # estudia una referencia (fotogramas, cortes, paleta)
npm run music -- mi-video --style house # música en código (minimal, house, lofi, cinematic)
npm run beats -- mi-video pista.mp3 # o tu pista, con sus beats reales
npm run fonts -- "Inter" 400,700 # fuentes de Google Fonts a local
Cómo funciona
videos/<slug>/index.html ──defineVideo({ setup, render })──▶ window.seek(t)
│ │
│ Chromium sin ventana (Playwright): seek(t) → foto │ segmentos de 2 s,
▼ ▼ varios workers
video.json ─▶ audio/compose.py (música) ─▶ audio/mix.py ─▶ ffmpeg ─▶ out/<slug>/<formato>.mp4
ctx.sfx(t, tipo) ───────────────┘ H.264 · yuv420p · bt709 · AAC
- Determinista: en render se bloquean timers,
requestAnimationFrame, reloj real,
transiciones CSS y red; Math.random queda con semilla. npm run check compara
fotogramas dibujados en distinto orden y en otra pestaña.
- Re-render parcial: el video se arma en segmentos de 2 s;
--from/--to rehace solo
los que cambiaron.
- Audio sincronizado por construcción: los sonidos se registran en
setup con el
mismo ctx.beat(n) que mueve la imagen.
- Una línea de tiempo, tres formatos: la composición recibe
?w=&h= y adapta el
layout con ctx.pick() y unidades --u.
Referencia completa: docs/motor.md · Audio: docs/audio.md
· Problemas comunes: docs/problemas.md.
Estructura
AGENTS.md, CLAUDE.md reglas del estudio para el agente
lib/ motor del navegador (motion.js, easing, spring, escenas, cursor…)
scripts/ render, sheet, check, capture, ref, dev (preview), doctor…
audio/ síntesis de música y sfx, mezcla, detección de beats (numpy)
videos/_plantilla/ punto de partida "showreel"
videos/_producto/ punto de partida "producto" (5 beats con marca real)
videos/demo/ el showreel del GIF de arriba
prompts/ docs/ prompts de la guía, referencia, plantillas de estilo y crítica
skills/motion-studio/ la skill instalable (SKILL.md + plantilla + init.mjs)
.claude-plugin/ marketplace y manifiesto del plugin de Claude Code
Desarrollar la skill
El estudio en la raíz es la fuente de verdad. Después de cambiar el motor, los docs o las
plantillas:
npm run sync-skill # copia el motor a skills/motion-studio/template y regenera references/
npm run sync-skill -- --check # lo que corre la CI
Sube la versión en package.json (version y motionStudio.version) para que los
estudios existentes puedan actualizarse con init.mjs --update.
Apoyar el proyecto
Si el estudio te ahorra horas, puedes invitarme un café:
Licencia
MIT. Usa logos, fuentes y capturas solo de marcas propias o con permiso.
