EXPOSURE · Recurso de producción

Motion graphics con Remotion

El procedimiento que usamos para editar los videos de @alexmcarrera sin Premiere: Claude escribe la animación en código, sincronizada palabra por palabra con tu voz, y sale un MP4 en 4K. Son tres pasos y una revisión antes de exportar.

que-vender.tsx · 20,2 s · 3840×2160
VOZ
campañas
2 a 5 propiedades
chatbot
captación de leads
10.000
n8n
horas
ANIM
Anuncios + entrega
Robot · embudo · +$10.000
n8n · reloj
SFX
Cada animación arranca en el segundo exacto en que decís la palabra. Por eso el primer paso de la edición es transcribir con tiempos.
01

Instalar Remotion

Una sola vez por compu. Unos 10 minutos.

Remotion convierte componentes de React en video: cada cuadro es una página web que se fotografía. Vos no escribís código; se lo pedís a Claude Code y él lo escribe dentro de este proyecto.

  1. Instalá Node.js (versión 18 o más nueva; acá usamos la 24) desde nodejs.org.
  2. Creá el proyecto en una carpeta fuera de Google Drive. Con la carpeta espejada, los renders se cuelgan y los node_modules llenan la nube.
  3. Instalá las skills oficiales de Remotion para que Claude conozca la librería por dentro.
  4. Sumá fuentes, íconos y logos, que son los que hacen que se vea como una interfaz real.
# 1 · crear el proyecto (elegí la plantilla Blank, TypeScript) cd Documents npx create-video@latest cd mi-proyecto-remotion npm i # 2 · las skills oficiales para Claude Code (quedan en .claude/skills) npx skills add remotion-dev/skills # 3 · fuentes de Google, audio, íconos y logos de marcas npx remotion add @remotion/google-fonts @remotion/media npm i lucide-react simple-icons # 4 · abrir el estudio para ver las animaciones en vivo npm run dev

Licencia: Remotion es gratis para personas y equipos de hasta 3 empleados. Si el equipo crece, hay que pasar a la licencia de empresa.

02

Darle instrucciones y un prompt completamente claros

Lo que no está escrito, Claude lo inventa. Un buen pedido dice qué, dónde y cuándo.

Primero: transcribir y partir el video en frases

Pasale el video crudo a Claude y pedile la transcripción con el segundo de cada palabra. Usamos Whisper por Groq, que es gratis. Con eso Claude separa el clip en frases, y sobre esa tabla decidís qué animación va en cada una. Así quedó el video «Qué vender»:

TiempoFraseAnimación pedida
0,0–1,8 s«No tenés que vender campañas»A la izquierda, «Anuncios» con logos de Meta, Google Ads y TikTok
1,9–6,5 s«…captar de 2 a 5 propiedades en 90 días»A la derecha, la entrega del servicio: casitas que se suman y barra de 90 días
8,1–9,5 s«No vendés un chatbot»Robot flotando con un chat minimalista, a la izquierda
12,6–15,9 s«…aumenta 10.000 dólares al mes…»Subtítulo grande abajo, hasta la palabra «negocio»
18,0–20,2 s«Vendés horas recuperadas»Reloj con un + a la derecha

La plantilla del pedido

Completala una vez por video. Cada línea le saca una decisión a Claude.

VIDEO Archivo: [ruta del crudo, ej. Downloads/qué vender.mp4] Formato: [pantalla completa (reemplaza mi toma) / objetos al costado (sobre mi toma)] Estilo: Apple UI, SaaS motion, como los videos anteriores Sigue a: [nombre del video anterior, si es continuación] ANIMACIÓN POR FRASE Frase 1 «[texto]»: [qué aparece] · [dónde: izquierda, derecha, abajo, pantalla completa] · [cuándo: en la palabra X] · [cuándo se va] Frase 2 «[texto]»: … CONTENIDO REAL Prompt / doc que se muestra: [link al Doc y página] Resultado que se muestra: [link al artifact, PDF o captura] Cifras: solo las que digo en el audio NO HACER No tapar mi cara · sin textos de anuncio · sin inventar datos ENTREGA MP4 4K con voz · MP4 sin voz · capa transparente .mov

Qué tiene que decir un pedido claro

Qué aparece, con nombre: «un embudo con un logo de bot», no «algo de leads».
Dónde: a tu izquierda, a tu derecha, abajo, o reemplazando toda la pantalla.
Cuándo entra y cuándo se va, atado a una palabra del audio.
Si es continuación de otro video, cuál, para que arranque en el mismo cuadro.
De dónde sale el contenido: el Doc real, el artifact real, las cifras que decís.
Qué versiones necesitás para editar: con voz, sin voz, transparente.
03

Insertar referencias de lo que se quiere al final

Una referencia vale más que tres párrafos de descripción.

Estilo

Un video de referencia

Una grabación de pantalla de otro creador, aclarando qué parte copiar.

Ej.: Iman Gadzhi, «solo las partes en las que habla a cámara y aparecen objetos alrededor, no las de motion graphics».

Contenido

El documento real

El Doc con el prompt que se muestra en pantalla, con link y página. Claude lo baja y copia el texto tal cual.

Ej.: «el prompt de oferta está en la página 2 de este Doc».

Resultado

El artifact o el PDF final

Lo que «devuelve» Claude en el video. Se replica con sus textos, colores y tipografías.

Ej.: el artifact «Reactivación de Base», en su modo oscuro original.

Imagen

Fotos, logos y capturas

Tus fotos del banco de b-roll, logos de herramientas, capturas de tu CRM. Nada inventado.

Ej.: logo de n8n, emojis de Apple, tu foto frente a la compu.

Los dos formatos que usamos

Pantalla completaReemplaza tu toma. Ventanas de Windows, Docs, Claude y artifacts que se abren, se copian y se pegan. Ej.: «Armado de la oferta».
Objetos al costadoTu toma queda y los objetos aparecen a tus lados, sin taparte la cara. Ej.: «Qué vender».
✓

Revisar, exportar y montar

Lo que hace Claude después de tu pedido, y lo que te llega.

  1. Fotogramas de prueba. Antes de exportar, Claude renderiza 10 a 18 cuadros sueltos y los mira. Ahí aparecen los textos encimados, las ventanas fuera de lugar o un número mal.
  2. Corrección. Arregla lo que vio, no lo que adivina. Recién después exporta el video entero.
  3. Render en 4K. Se arma en 1920×1080 y se exporta al doble, igual que tu cámara.
  4. Efectos de sonido. Clics, whooshes y tipeo sintetizados en la compu y ubicados en los mismos segundos que la animación. Sin bancos con licencia.
# video final en 4K (con voz) npx remotion render MiVideo out/mi-video.mp4 --scale=2 # capa transparente para montar encima de tu toma npx remotion render MiVideoCapa out/capa.mov --scale=2 --codec=prores --prores-profile=4444 --pixel-format=yuva444p10le --image-format=png

Qué archivo usar en cada caso

ArchivoQué traePara qué
.mp4 con vozAnimación + tu voz + efectosSubir directo o revisar
.mp4 sin vozAnimación + efectosMontar debajo de tu audio en el editor
.mov ProRes 4444Solo la animación, fondo transparente (4K, ~900 MB)Premiere, After Effects, DaVinci, Final Cut
.mov AnimationIgual, más liviano (1080p)Editores que no leen ProRes 4444
.webm VP9Igual, el más livianoEditores web y Chrome

Los archivos transparentes no se abren con doble clic en Windows ni en el reproductor común, que muestra el fondo en negro. Se ven transparentes cuando los ponés en una pista arriba de tu clip dentro del editor.

!

Lo que aprendimos editando

Correcciones reales de los primeros cuatro videos, para pedirlas desde el principio.

Las ventanas se perdían contra el fondo claro.
«Sombras marcadas en las ventanas para que se despeguen del fondo.»
El artifact salió en colores claros y el original es oscuro.
«Replicá el artifact en su modo oscuro, como lo veo yo.»
El texto grande tapaba la cara en la toma.
«Los objetos van a mis costados; el subtítulo, abajo, sobre la remera.»
El .mov transparente «no se abría».
Decir con qué editor trabajás, para recibir el formato que ese editor lee.
El video siguiente arrancaba distinto al anterior.
«Es continuación de X: arrancá exactamente donde terminó.»