AI KID
RE/MAX Patagon
Mateo Caño
Le pedís la transición, la animación y tu branding, y Remotion te devuelve el MP4 terminado: así lo resume el anuncio que te trajo hasta acá. Esta guía es ese pedido completo, con las frases exactas para copiar.
Por atrás corren las mismas dos herramientas de siempre: Claude Code, el agente de Anthropic que trabaja en tu compu, y Remotion, que convierte código en video. Si todavía no instalaste nada, la guía de instalación completa te deja el proyecto listo en cinco comandos; esta guía arranca donde esa termina.
#01¿Qué es una transición animada para Remotion?
El paso entre dos clips, escrito como código
Una transición es lo que ves entre el final de un plano y el arranque del siguiente: un fundido, un deslizamiento, un wipe. En edición tradicional la armás a mano, cuadro por cuadro, en un timeline. Con Remotion, esa transición es un componente de React: una instrucción de cuánto dura y cómo se comporta, no un dibujo.
Claude Code escribe ese componente por vos cuando le describís qué transición querés, entre qué dos clips y cuánto tiene que durar. El video final sigue siendo un MP4 normal; lo que cambia es cómo se construyó. Remotion documenta este flujo en su guía oficial para prompotear agentes de código, y el soporte de Claude Code se instala como plugin oficial de Remotion desde el directorio de plugins o por terminal.
| Pieza | Qué hace | ¿Es obligatoria? |
|---|---|---|
| Claude Code | Escribe el componente de la transición a partir de tu pedido | Sí |
| Remotion | Renderiza esa transición como parte del video | Sí |
| @remotion/transitions | Trae los presets de fundido, deslizamiento, wipe y flip | Muy recomendado |
| Tu carpeta marca | Guarda color, tipografía y logo para repetirlos en cada corte | Recomendado |
#02¿Qué paquete escribe las transiciones?
@remotion/transitions, el oficial de Remotion
Adentro de tu proyecto, sumá el paquete con transiciones ya armadas:
- agrega los presets oficiales de transición al proyecto
- deja disponibles fade, slide, wipe y flip para que Claude los use
La documentación oficial de transiciones lista cada preset con su nombre técnico. Claude Code lee esos nombres cuando le pedís un efecto puntual, así que no hace falta que vos los memorices: alcanza con describir el efecto en castellano.
| Transición | Cómo la pedís | Cuándo usarla |
|---|---|---|
| Fundido (fade) | "Unilos con un fundido de medio segundo" | Para pasar de una escena tranquila a otra |
| Deslizamiento (slide) | "Que el segundo clip entre deslizándose desde la derecha" | Para cambios de tema dentro del mismo video |
| Wipe | "Un wipe diagonal entre los dos clips" | Para separar secciones de un tutorial |
| Flip | "Que el clip gire como una tarjeta hacia el siguiente" | Para el cambio entre hook y desarrollo |
#03¿Qué le pedís para una transición?
Una frase con los tres datos: efecto, clips y duración
Con npm run dev corriendo en una terminal, abrí claude en otra y describile la transición completa:
- identifica los dos clips dentro del proyecto
- escribe el componente de transición con @remotion/transitions
- ajusta la duración a 0.4 segundos
- deja el cambio guardado en el proyecto, listo para previsualizar
"Ponele una transición linda." Claude tiene que adivinar el efecto, la duración y entre qué clips.
"Deslizamiento desde la derecha de 0.4 segundos entre el hook y la explicación." Sale a la primera.
- Garantía: cada transición es un pedido más en texto. No perdés el corte ni el color que ya tenías armado.
#04¿Cómo mantenés el branding en cada corte?
Tu color, tu tipografía y tu logo, guardados una vez
Metela en una carpeta dentro del proyecto (por ejemplo marca/) con tu paleta de color, el archivo de tu tipografía y tu logo en PNG. Después pedile a Claude que los use en cada transición y en cada placa de texto:
- lee la paleta, la tipografía y el logo de la carpeta marca
- aplica esos colores a los fondos de cada transición
- usa tu tipografía en los títulos animados
- deja tu logo disponible para las placas de cierre
Como el pedido queda guardado en el componente del proyecto, el próximo clip que unís con una transición sale con la misma cara, sin que lo repitas cada vez. Esto es lo que no muestran los tutoriales en inglés sobre Remotion Agent Skills: instalar y renderizar sí, pero no cómo pedirle a Claude que una identidad fija atraviese varias transiciones del mismo video.
- Garantía: tu marca queda en el proyecto, no en un pedido suelto que se pierde en el próximo render.
#05¿Cómo sacás el MP4 terminado?
Un solo render junta transición, animación y branding
Pedile a Claude "renderizá el video final" o corrélo vos:
- renderiza el video completo, con transiciones, animación y branding
- lo guarda en la carpeta out
Según la documentación de render de Remotion, el archivo queda local, en la carpeta out de tu proyecto, sin pasar por ningún servidor externo. Ese MP4 ya trae los tres pedidos de esta guía juntos, igual que promete el anuncio: transición, animación y branding en el mismo video.
- Garantía: tu video no sale de tu compu para renderizarse.
#06¿Cuándo conviene pedir transiciones por texto?
Cuando repetís el mismo tipo de corte seguido
Un efecto muy particular que necesitás una sola vez, con ajustes a mano cuadro a cuadro. Ahí After Effects sigue ganando.
Un deslizamiento o un fundido que repetís en cada video de la semana. Ahí describirlo una vez y reusarlo gana tiempo real.
Si recién estás arrancando con Claude Code y Remotion, instalá todo primero con la guía completa de edición de reels y volvé después a pedir tu primera transición.
#07¿Qué conviene recordar?
- La transición, el título animado y el branding son componentes de código dentro del mismo proyecto de Remotion; Claude Code los escribe a partir de lo que le describís en castellano.
- @remotion/transitions trae los presets de fundido, deslizamiento, wipe y flip; vos elegís cuál con una frase.
- Guardar tu color, tipografía y logo en una carpeta de marca hace que todas tus transiciones salgan con la misma cara.
- El render final junta las tres cosas en un único MP4, guardado local en la carpeta
out.
Si todavía no instalaste Claude Code ni Remotion, la guía de instalación paso a paso es el punto de partida. Para entender el enfoque general de editar video con IA antes de pedir tu primera transición, mirá cómo funciona un editor de video con IA dentro de Claude Code. Y si querés sumar más skills al mismo proyecto, repasá las mejores skills de Claude.
Quiero aplicar a mi caso la guía "Transiciones animadas con Claude Code y Remotion: guía paso a paso" de Claura. Guía: https://claura-ai.com/resources/transiciones-animadas-claude-code-remotion Mi caso: [a qué me dedico, qué herramientas uso y qué quiero lograr] La guía cubre: - ¿Qué es una transición animada para Remotion? - ¿Qué paquete escribe las transiciones? - ¿Qué le pedís para una transición? - ¿Cómo mantenés el branding en cada corte? - ¿Cómo sacás el MP4 terminado? - ¿Cuándo conviene pedir transiciones por texto? Lee la guía (si no puedes abrir el link, trabaja con los temas de arriba). Si te falta información sobre mi caso, hazme hasta 3 preguntas antes de empezar. Después arma un plan para aplicar la guía paso a paso a mi caso y dime qué puedo hacer hoy en menos de una hora.
Cópialo y pégalo en tu agente: te pregunta lo que le falta de tu caso y arma el plan con los pasos de esta guía. ¿Prefieres que lo armemos nosotros? Agenda una llamada.
También te puede interesarContadores y animaciones con IA para CapCut: SRT, conteo y Remotion?Preguntas frecuentes sobre Transiciones con Claude Code y Remotion
¿Qué transiciones puede escribir Claude Code con Remotion sin que yo toque código?
Las que trae el paquete oficial @remotion/transitions: fundido (fade), deslizamiento (slide), wipe y flip, además de combinaciones entre ellas. Vos no escribís ninguna línea: le describís a Claude Code en castellano qué dos clips tenés que unir, qué tipo de transición querés y cuánto tiene que durar, y Claude escribe el componente de Remotion que arma ese efecto. La documentación oficial de transiciones de Remotion lista cada preset con su nombre técnico, que es el mismo que usa Claude cuando genera el código. Si nunca instalaste nada de esto, arrancá por la guía completa de instalación de Claude Code y Remotion, que deja el proyecto listo antes de pedir la primera transición. Una vez instalado, el pedido de transición es una frase más, igual que pedirle que corte silencios o sume subtítulos, con el ejemplo exacto de ese pedido un poco más abajo en esta misma guía.
¿Cómo hago para que todas mis transiciones usen mi mismo color, tipografía y logo?
Guardás tu color, tu tipografía y tu logo en una carpeta dentro del proyecto, una sola vez, y le pedís a Claude que los lea de ahí cada vez que escribe una transición o una placa de texto. Como el video es código, ese pedido queda guardado en el componente que Claude armó: el próximo clip que unís con una transición sale con la misma cara, sin que lo repitas. Esto es justo lo que falta en la mayoría de los tutoriales en inglés sobre Remotion Agent Skills, que explican la instalación y el render pero no cómo mantener una identidad fija a lo largo de varias transiciones, según compara la guía de Apidog sobre Claude Code como director de video. Si todavía no armaste esa carpeta de marca, el mismo pedido de colores, tipografía y logo está detallado en los seis pedidos para editar reels.
¿Necesito saber After Effects o motion design para pedir esto?
No. Vos describís el efecto en una oración, como le describirías a un editor de video lo que querés ver, y Claude Code traduce eso al componente de Remotion que lo escribe en código. No abrís un timeline ni movés keyframes a mano. La ventaja frente a After Effects es la misma que con cualquier edición por texto: una vez que Claude armó la transición, el próximo video repite esa misma transición cambiando solo el contenido, en vez de rehacer la animación cuadro por cuadro. Para la instalación completa de Claude Code, Node.js y el proyecto de Remotion, seguí la guía paso a paso de instalación. Si además querés entender el enfoque general de editar video con IA antes de instalar nada, mirá cómo funciona un editor de video con IA dentro de Claude Code.
¿El render final junta la transición, la animación y el branding en un solo video?
Sí, en el mismo render. Como cada pieza (la transición entre clips, el título animado y el branding) es un componente de código dentro del mismo proyecto de Remotion, Claude Code los combina todos cuando corre el render y entrega un único archivo MP4 terminado en la carpeta out de tu compu. No hay que exportar por partes ni unir videos después en otro programa. El comando de render es el mismo que ya usa la guía de edición de reels con Claude Code y Remotion, y según la documentación de render de Remotion el archivo nunca se sube a un servidor: queda local, en tu proyecto.
Fuentes e inspiración
Un envío al mes con guías de Claude, prompts y automatización. Cero spam.
