Motion Architect

Imagina un animador que ya tiene tu logo, tus colores y los videos que te gustan. Antes de animar, te enseña el guion en dibujitos. Eso se llama storyboard. Cuando le dices que sí, anima. Al final te da el video en los cuatro tamaños de redes.

Motion Architect es ese animador, pero dentro de Claude Code. Es un agente: un ayudante con su propio método de trabajo. Le hablas como le hablarías a una persona.

Hace motion graphics. Son videos de textos y formas que se mueven: títulos que entran con ritmo, un logo que aparece, un número que sube.

Por dentro usa Remotion, una herramienta que arma videos con código. El código lo escribe Claude, no tú. Tú dices qué quieres, apruebas el guion y miras el resultado.

Trabaja en tu computadora. Ahí mira tus videos, arma la animación y guarda el archivo final.

Para qué lo vas a usar

Instalar es traer al animador a tu computadora. No tienes que hacerlo tú: le pegas un prompt a Claude y él hace los pasos.

Sirve en la app de Claude Code o en la terminal (la ventana negra donde se escriben comandos). Abre una sesión en cualquier carpeta y pega esto:

Quiero instalar Motion Architect, un agente para Claude Code que hace videos animados. Hazlo por mí, un paso a la vez, y explícame en frases cortas qué haces.

1. Revisa qué computadora tengo. Si es Windows, dímelo y detente: Motion Architect solo funciona en Mac y Linux.
2. Revisa si tengo Node 18 o más nuevo, ffmpeg, Python 3, yt-dlp y git. Dime cuáles faltan. Si estoy en Mac, ofréceme instalarlos con Homebrew (y si no tengo Homebrew, dime cómo instalarlo). Si estoy en Linux, dame el comando. No instales nada hasta que te diga que sí.
3. Clona https://github.com/Hainrixz/motion-architect.git en mi carpeta de inicio, para que quede en ~/motion-architect. Avísame que no debo mover ni borrar esa carpeta.
4. Antes de correr el instalador, explícame en tres líneas qué va a instalar ./install.sh y espera mi sí. Puede tardar unos minutos.
5. Entra a ~/motion-architect y corre ./install.sh --yes. Al terminar, dime qué quedó bien y qué no.
6. Dime que reinicie Claude Code y qué escribir primero: /motion con mi idea.

No abras ningún archivo con contraseñas ni me pidas llaves por el chat.

Cuando termine

1. 1

   Cierra Claude Code y ábrelo otra vez

   Así carga al agente nuevo. Puedes abrirlo en cualquier carpeta: el agente encuentra solo su estudio.

2. 2

   Escribe /motion

   Si aparece el comando con su descripción, quedó. Ya puedes pedirle tu primer video.

Tu primer video de prueba

El agente trae un video de ejemplo ya hecho. Sacarlo es la forma más rápida de saber que todo funciona. Pégale esto a Claude:

Quiero probar que Motion Architect quedó bien. Entra a la carpeta studio de ~/motion-architect y renderiza el video de ejemplo que trae: la composición Demo en horizontal (Demo-landscape).

Avísame cuando termine y dime dónde quedó el archivo para abrirlo.

El video queda dentro de studio/out. Ábrelo como cualquier video.

Si prefieres hacerlo tú en la terminal

Son los mismos pasos, a mano. Corre uno por uno. El instalador revisa lo que falta y, en Mac, te pregunta si lo instala con Homebrew.

Al final dice "Listo" y marca con palomita lo que quedó. Luego reinicia Claude Code.

Cada vez que escribes /motion, el animador sigue el mismo orden. Casi todo lo hace solo. Te busca en tres momentos: al principio, cuando tiene el guion y cuando ya puedes ver el video.

1. 1

   Te pregunta lo que falte, todo junto

   Son ocho preguntas en un solo mensaje. Lo que ya dijiste no lo vuelve a preguntar. Lo que no contestes, lo decide él y te avisa.

   Contestas lo que quieras. También puedes decir: "lo demás decídelo tú".

2. 2

   Mira tus ejemplos

   Si le pasas un video (un link o un archivo), lo baja y lo mira en fotos, una por cada cambio de escena. Así entiende el ritmo, los colores y cómo se mueven las cosas. Si son varios videos, manda un ayudante a mirar cada uno al mismo tiempo.

3. 3

   Arma tu marca

   Anota tus colores y tus letras en un archivo del estudio. Los saca de lo que le des: códigos de color, una foto o tu página web. Si no le das nada, te propone una marca según el estilo que pediste.

4. 4

   Te enseña el guion y espera tu sí

   Escribe el storyboard: cada escena con lo que se ve, el texto, cómo entra, el sonido y cuántos segundos dura. Lo guarda en studio/storyboards, con el nombre de tu video. Lo puedes abrir y leer completo.

   Lo lees y dices que sí o pides cambios. Cambiar el guion es fácil. Cambiar un video terminado cuesta más.

5. 5

   Hace la animación

   Escribe el código del video. Usa piezas que el estudio ya trae, como títulos, logo, contador y tarjetas. La prepara en cada tamaño que pediste.

6. 6

   Se revisa antes de enseñarte

   Toma de 3 a 5 fotos de momentos clave y las mira. Si un texto no se lee o queda donde estorban los botones de la red, lo arregla. Las fotos quedan en studio/out (check-1.png, check-2.png...). Tú también las puedes abrir.

7. 7

   Te deja ver el video

   Abre la vista previa en tu navegador. Ahí ves el video en cada tamaño y lo puedes adelantar o regresar. Cada cambio que hace Claude aparece al momento.

   Lo ves y pides ajustes con tus palabras: "más lento", "otro color", "quita esa escena".

8. 8

   Te entrega los archivos

   Saca un video mp4 por cada tamaño, cada uno con su foto de portada. Todo queda en studio/out. Te dice qué archivos hizo, cuánto duran y cuánto pesan.

Las ocho preguntas, y qué pasa si no contestas

Si dices "para Reels" o "para TikTok", entiende vertical. "Para YouTube", horizontal. "Para el feed", 4:5. Si pides varios, diseña primero el vertical, que es el más apretado.

La misma animación sale en los cuatro tamaños. No pides cuatro videos: dices cuáles quieres y salen por separado.

El nombre al exportar es el que usas con /motion-render. Si escribes all, salen los cuatro.

Los estilos

El estilo cambia cuántas escenas hay, qué tan rápido pasan y cómo se ven las letras. Escríbelo con su nombre en inglés, como está en la tabla.

Cambia lo que está entre corchetes. Para pasarle un archivo, arrástralo a la ventana de Claude Code: su ubicación se pega sola.

Crea la carpeta studio/public/brand dentro de ~/motion-architect y copia ahí mi logo: [arrastra aquí tu logo].

Llámalo logo.svg si es svg, o logo.png si es png. Avísame cuando esté.

/motion anima mi logo: [arrastra aquí tu logo], 5 segundos, 16:9 y 9:16

Mira este video [pega el link del reel o arrastra el archivo] y hazme algo con ese ritmo pero con mi marca. Vertical, 12 s.

Antes del guion, dime en cinco líneas qué viste: cada cuánto cambia de escena, qué colores usa, cómo entran los textos y por qué funciona.

/motion intro para mi canal de YouTube, estilo editorial, colores de esta imagen: [arrastra aquí la imagen]

/motion un dato animado: "pasamos de 0 a 10,000 usuarios en 30 días", 4:5 para el feed

/motion Quiero un reel para anunciar [nombre], [qué hace en una frase].
- Formato: vertical 9:16, y también 4:5 para el feed
- Duración: 15 s
- Tono: polished
- Referencia: este video me gusta por el ritmo: [pega un link o arrastra un archivo]
- Marca: fondo [#código], texto [#código], acento [#código], fuente para títulos "[nombre de la fuente]"
- Texto: "[frase principal]" / "[nombre]" / "[qué hacer después]"
- Sin música

Antes de animar nada, arma mi marca en el estudio de Motion Architect a partir de mi página: [dirección de tu página].

Saca el color de fondo, el del texto y el de acento, y las dos fuentes. Revisa que el texto se lea bien sobre el fondo. Enséñame los colores antes de guardar.

Vi la vista previa de [nombre del video]. Quiero estos cambios:
- [por ejemplo: la escena 2 va muy rápido, que dure un segundo más]
- [por ejemplo: el logo entra muy brincado, que sea más suave]
- [por ejemplo: cambia el texto final por "..."]

Cambia el guion, haz los cambios, revisa las fotos otra vez y avísame cuando lo pueda ver. Todavía no saques el archivo final.

Para sacar el archivo sin repetir todo

Si el video ya existe y solo quieres el archivo, escribe /motion-render con el nombre del video y el tamaño. Si no te acuerdas del nombre, Claude te enseña la lista.

Saber qué trae te ayuda a pedir mejor. Si sabes que tiene un contador, lo pides por su nombre.

Todo viene en una sola carpeta. No tienes que instalar otras skills ni herramientas aparte: con el instalador queda completo.

Sus cuatro partes

Lo que trae para trabajar

Las piezas animadas del estudio

Claude arma cada video juntando estas piezas, como bloques. Solo hace una nueva cuando ninguna sirve. Si ya sabes cuál quieres, pídela por su nombre.

• KineticTitle

  Un título que entra palabra por palabra.

• LogoReveal

  Tu logo entra con un rebote y el nombre aparece después.

• Counter

  Un número que cuenta hacia arriba.

• CardStack

  Tarjetas que llegan una por una.

• Caption

  Una etiqueta para subtítulos y textos chicos.

• ImagePan

  Un acercamiento lento sobre una foto.

• Background

  Un fondo con tus colores y un brillo que se mueve despacio.

• SafeArea

  Los márgenes para que nada quede bajo los botones de la red.

Nada de esto hace falta para usarlo. Está aquí por si quieres saber más o algo no salió.

De qué está hecho (open source)

• Motor de visión

  Basado en claude-video, de Bradley Bonanno

  MIT

• Motor de diseño y sus datos

  Basado en ui-ux-pro-max-skill, de Next Level Builder

  MIT

• Reglas de movimiento

  De emilkowalski/skills, de Emil Kowalski

  MIT

• Guion y tonos

  Inspirados en latent-spaces/brag, de Shunit Haviv Hakimi

  MIT

• Efectos de sonido

  Kenney (kenney.nl) y Keyboard Soundpack #1 de unicae_games

  CC0

• Motor de video

  Remotion

  Licencia de Remotion