Cómo crear vídeos con Remotion y Codex: guía y prompts

Crear un vídeo de motion graphics con inteligencia artificial requiere algo más que pedir «una animación profesional». El resultado mejora cuando defines qué quieres contar, qué imágenes vas a utilizar y cómo debe moverse cada escena.

En esta guía explico cómo plantear un vídeo con Remotion y Codex, desde la preparación de las referencias hasta la exportación. El ejemplo es una pieza de 24 segundos para presentar tres servicios: desarrollo web, SEO y sistemas digitales. Puedes adaptar el proceso a un producto, una aplicación o una presentación de tu negocio.

El objetivo es que puedas escribir un encargo que la IA convierta en una primera versión concreta, revisarla con criterio y mejorarla mediante instrucciones precisas.

Qué encontrarás en esta guía

1. Qué aporta Remotion y qué hace Codex
2. Cómo preparar el proyecto
3. Qué imágenes y referencias necesitas
4. La estructura de un buen prompt
5. Prompt completo para copiar y adaptar
6. Cómo mejorar la primera versión
7. Exportación y montaje en Filmora
8. Errores frecuentes y revisión final

Qué aporta Remotion y qué hace Codex

Remotion permite crear vídeos mediante componentes de React. En lugar de colocar cada elemento manualmente en una línea de tiempo, defines escenas, textos, imágenes y movimientos mediante código. Puedes previsualizar la composición y renderizarla como vídeo.

Codex actúa como el agente que implementa ese proyecto a partir de tus instrucciones. Tú aportas el mensaje y la dirección visual; el agente escribe y modifica los componentes. Sigue siendo necesario revisar el resultado: una implementación que funciona puede tener un ritmo aburrido o una transición poco clara.

Filmora puede entrar después, para incorporar música, efectos de sonido y ajustes de montaje. También puedes gestionar audio dentro de Remotion, pero repartir el trabajo de esta manera resulta cómodo si prefieres editar el sonido visualmente.

Un buen primer proyecto es una pieza breve con un mensaje limitado. Para este ejemplo, 24 segundos permiten mostrar una introducción, tres servicios y un cierre sin convertir el vídeo en una presentación larga.

Cómo preparar el proyecto de Remotion

Necesitas un entorno compatible con Remotion, Node.js y un agente de programación con acceso al proyecto. Si ya tienes un repositorio de Remotion, pide al agente que lo inspeccione y lo reutilice antes de crear otra estructura.

Para iniciar un proyecto nuevo, puedes utilizar el asistente oficial:

npx create-video@latest

Selecciona una plantilla, entra en la carpeta generada y abre el proyecto en tu editor. Para una pieza personalizada, una plantilla sencilla suele ser un punto de partida cómodo.

Remotion también dispone de skills para agentes como Codex. Si no las has instalado durante la creación del proyecto, puedes añadirlas desde su carpeta:

npx skills add remotion-dev/skills

Estas instrucciones ayudan al agente a trabajar con las convenciones de Remotion. No sustituyen tu encargo creativo ni garantizan una determinada calidad visual.

Consulta los pasos de instalación y la documentación de las skills si tu entorno necesita una configuración específica.

Qué imágenes y referencias necesitas antes de escribir el prompt

Conviene separar dos tipos de material: los recursos que aparecerán en el vídeo y las referencias que explican cómo quieres que se vea o se mueva.

Recursos que aparecerán en pantalla

Para una pieza de servicios, prepara tu logo, capturas de proyectos y resultados reales. Usa imágenes con resolución suficiente, evita textos diminutos y elimina elementos que distraigan, como avisos de cookies.

En nuestro ejemplo, el material puede organizarse así:

Archivo	Función	Instrucción para la IA
logo-ab.png	Identidad y cierre	Conservar proporciones y comprobar fondo y bordes.
web-pablo.png	Proyecto web	Priorizar el hero y recortar elementos secundarios.
web-andrei.png	Segundo proyecto	Elegir un encuadre que muestre su identidad visual.
web-cbs-electrica.png	Tercer proyecto	Mostrarlo como parte de la variedad de trabajos.
search-console.png	Resultados SEO	Conservar métricas, etiquetas y periodo.

Puedes adjuntar estos archivos a la conversación del agente si tu herramienta lo permite. Para que el proyecto siga funcionando después, asegúrate de que quedan guardados en él y de que el prompt identifica sus rutas.

Una organización práctica es guardar los archivos utilizados en el vídeo dentro de public/assets/. Remotion permite acceder a recursos del directorio público mediante staticFile(). La ruta que se pasa a esa función es relativa a public, por ejemplo assets/logo-ab.png.

Si necesitas orientación técnica, consulta la documentación de staticFile().

Referencias de estética y movimiento

Una captura ayuda a explicar colores, tipografía y composición. Para explicar movimiento, utiliza un vídeo o un fragmento con tiempos concretos.

En lugar de escribir «quiero algo como este vídeo», especifica qué parte te interesa: «del segundo 4 al 7, quiero esa transición en la que una ventana se desplaza y la siguiente ocupa su lugar; adapta el movimiento a mis capturas y conserva mi paleta».

Guarda los enlaces y las indicaciones en un archivo como references/brief.md. Si el agente no puede reproducir el enlace, facilita un fragmento local o una secuencia de fotogramas y describe el movimiento. No des por hecho que pegar una URL permite analizar toda la animación.

Puedes encontrar ejemplos en la galería de prompts de Remotion y en los proyectos de Ordinary Folk. Úsalos para concretar decisiones, no para pedir una copia de toda la pieza.

La estructura de un buen prompt para crear un vídeo

Un encargo completo responde a ocho preguntas. No necesitas escribir una novela, pero sí resolver las decisiones que más influyen en el resultado.

1. Objetivo: qué debe entender o hacer el espectador.
2. Público: para quién estás creando la pieza.
3. Formato: duración, proporción, resolución y destino.
4. Dirección visual: colores, tipografía, densidad y ritmo.
5. Recursos: archivos disponibles y función de cada uno.
6. Guion: escenas, tiempos, textos y acciones.
7. Movimiento: cómo entran, cambian y salen los elementos.
8. Entrega: qué debe implementar, revisar y exportar el agente.

Traduce los adjetivos a acciones visibles

«Minimalista», «premium» y «dinámico» expresan una intención. Añade comportamientos observables para que la IA pueda interpretarla.

Petición vaga	Instrucción más útil
Que se vea premium	Usa fondo marfil, tipografía negra, márgenes amplios y un elemento protagonista por escena.
Que vaya rápido	Haz entradas breves con frenadas suaves y deja una pausa estable para leer cada mensaje.
Transiciones fluidas	Conserva un marco entre escenas y transforma su tamaño y posición para introducir el siguiente contenido.
Una gráfica animada	Revela las líneas de izquierda a derecha y evita que la cámara persiga cada pico y valle.

Prompt completo para crear un vídeo de servicios con Remotion y Codex

El siguiente prompt utiliza los nombres de archivo propuestos arriba. Cámbialos por los de tu proyecto y sustituye la oferta, las cifras y la marca por los tuyos. Las métricas de este ejemplo pertenecen a una captura concreta; no son resultados que debas atribuir a otros proyectos.

Crea una pieza de motion graphics en Remotion para mi portfolio.

OBJETIVO Y PÚBLICO
Quiero presentar a posibles clientes mi oferta: desarrollo web,
posicionamiento SEO y sistemas digitales para escalar negocios.
El vídeo debe comunicar los tres servicios y demostrar calidad visual.

CONTEXTO DE TRABAJO
Inspecciona primero el repositorio. Reutiliza la estructura existente.
Aplica las skills de Remotion disponibles en el proyecto.
Implementa una composición funcional; no te limites a proponer un plan.

FORMATO
24 segundos, 1920 x 1080, horizontal, 60 fps.
Debe entenderse sin audio. La música se añadirá después en Filmora.

DIRECCIÓN VISUAL
Minimalista y premium: fondo marfil, negro y grises cálidos.
Azul y violeta como acentos en la escena SEO.
Tipografía sans serif, mensajes grandes y espacio libre.
Movimiento rápido y fluido, con frenadas suaves y pausas para leer.
Evita rebotes exagerados y entradas repetitivas basadas solo en opacidad.

RECURSOS
public/assets/logo-ab.png: identidad; conserva diseño y proporciones.
public/assets/web-pablo.png: proyecto web; prioriza el hero.
public/assets/web-andrei.png: segundo proyecto web.
public/assets/web-cbs-electrica.png: tercer proyecto web.
public/assets/search-console.png: resultados SEO reales.
references/brief.md: referencias de estilo y movimiento, si existe.
Inspecciona las imágenes antes de decidir recortes y acercamientos.
Si falta un recurso esencial, indícalo; no inventes una captura equivalente.

GUION
0-3 s. Apertura: «Tu próximo salto digital.»
Revela el texto mediante una máscara y un desplazamiento corto.
Introduce el monograma discretamente. Transforma un elemento
de la composición en el marco de navegador de la siguiente escena.

3-9 s. Desarrollo web: «Creamos tu web.»
Presenta Pablo, Andrei y CBS Eléctrica en una secuencia ágil.
Da unos 1,5-1,8 segundos de protagonismo a cada proyecto,
con transiciones solapadas y una breve composición conjunta al final.
Alterna encuadres generales y acercamientos controlados.
Mantén el texto principal como hilo conductor.
Respeta proporciones; evita cookies y zonas que distraigan.
No inventes versiones móviles ni separes elementos de una captura
como si fueran capas independientes sin preparar los recortes.

9-15 s. SEO: «Hacemos que te encuentren.»
Muestra la gráfica real y revela sus líneas de izquierda a derecha.
Conserva los valores de la captura: 204 mil impresiones,
2,05 mil clics, CTR del 1 % y posición media de 10,1; periodo: 3 meses.
Anima las cuatro cifras desde cero hasta su valor final en unos 2 s.
Oculta las cifras incrustadas si necesitas reconstruirlas como texto.
Usa cifras tabulares y ancho estable para evitar saltos.
Mantén los valores finales quietos y legibles.
Los contadores son una presentación, no una evolución histórica.
No conviertas clics en clientes ni señales la subida de posición
numérica como una mejora.
La cámara avanza suavemente sin perseguir cada oscilación de las líneas.

15-21 s. Sistemas: «Creamos sistemas para escalar.»
Crea un flujo vectorial: «Solicitud recibida», «Cliente registrado»,
«Seguimiento programado». Activa tarjetas y conexiones en cadena.
Incluye discretamente «Ejemplo de automatización».
No lo presentes como una integración real de los proyectos mostrados.

21-24 s. Cierre: «Diseño. Visibilidad. Escala.»
Añade logo, «andresbasurto.com» y «Hablemos de tu proyecto».
Termina las entradas antes del segundo 22 y mantén el cierre legible.

MOVIMIENTO Y CONTINUIDAD
Usa máscaras, desplazamientos cortos, entradas escalonadas y zooms.
Las transiciones deben conectar posición, forma o escala entre escenas.
Evita que toda la composición desaparezca y se reinicie en cada cambio.
Mantén textos estables mientras se leen y márgenes seguros.

IMPLEMENTACIÓN Y ENTREGA
Centraliza tiempos, textos y colores para facilitar cambios.
Las animaciones deben depender del frame y ser deterministas.
Comprueba resolución de imágenes y evita ampliaciones pixeladas.
Revisa fotogramas de escenas y transiciones y reproduce la secuencia.
Corrige solapamientos, cortes de texto, saltos y fotogramas vacíos.
Entrega la composición lista para renderizar y el comando exacto
del proyecto. Si puedes, exporta un MP4 H.264 y una portada.
Si alguna verificación no es posible en tu entorno, explica cuál.
Toma decisiones rutinarias y completa una primera versión revisable.

Cómo mejorar la primera versión sin rehacer todo

La primera versión sirve para comprobar si el mensaje, el estilo y el ritmo funcionan juntos. Reprodúcela completa y después revisa los puntos concretos que fallan. Una captura estática no permite valorar la fluidez.

Cuando pidas un cambio, incluye el intervalo, el problema, la solución deseada y lo que debe conservarse. Así evitas que una corrección local transforme todo el vídeo.

Si la escena de las webs resulta aburrida

Mejora únicamente la escena de desarrollo web, entre los segundos 3 y 9.
La captura permanece demasiado tiempo con el mismo encuadre.
Presenta tres proyectos con transiciones laterales conectadas,
alternando una vista general y un acercamiento breve.
Deja un instante estable para reconocer cada web.
Conserva la duración total, el texto principal y las otras escenas.

Si la cámara de la gráfica da saltos

Corrige el seguimiento de cámara de la escena SEO.
Actualmente persigue cada pico y valle y produce movimientos nerviosos.
Haz que avance horizontalmente con una elevación vertical gradual,
manteniendo las líneas dentro del encuadre.
Conserva el trazado real, las métricas y la duración de la escena.

Guarda una versión antes de un cambio importante. Si pruebas varias propuestas, compara el mismo tramo para elegir por claridad y ritmo, no solo por cantidad de efectos.

Cómo exportar el vídeo y terminarlo en Filmora

Previsualizar la composición no genera por sí solo el archivo final. Desde la carpeta del proyecto puedes abrir Remotion Studio:

npx remotion studio

Cuando esté lista, renderiza la composición. Este es un ejemplo; cambia src/index.ts por la entrada real y PortfolioMotion por el identificador registrado en tu proyecto:

npx remotion render src/index.ts PortfolioMotion out/portfolio-motion.mp4 --codec=h264

La carpeta out es el destino elegido en este comando. Si ejecutas el render en tu ordenador, el MP4 quedará allí. Si trabajas en un entorno remoto, tendrás que descargarlo desde ese entorno.

Encontrarás las opciones en la documentación de Studio y la referencia del comando render.

Importa el MP4 en Filmora, añade la pista musical y coloca efectos discretos donde ayuden a reforzar las transiciones. Para una pieza rápida y minimalista, probaría música instrumental con percusión limpia y sin una introducción larga.

Haz coincidir los cambios importantes con acentos de la música. Si necesitas modificar mucho los tiempos visuales para conseguirlo, vuelve al proyecto de Remotion y ajusta las escenas en lugar de acelerar arbitrariamente todo el MP4.

Al exportar desde el editor, conserva la resolución y la frecuencia de fotogramas si quieres mantener el movimiento original. Revisa el peso del archivo y su calidad: el tamaño final depende especialmente de la duración, el contenido y la tasa de bits, no solo de los megabytes del archivo de entrada.

Antes de publicar, confirma que puedes utilizar la música en ese destino. El sonido debe ser una mejora opcional si el vídeo va a reproducirse silenciado en una web.

Errores frecuentes al crear motion graphics con IA

• Pedir calidad sin definirla. Describe composición, ritmo y comportamiento de los elementos.
• Adjuntar archivos sin explicar su función. Indica qué escena utiliza cada recurso.
• Usar una imagen para explicar movimiento. Añade un fragmento de vídeo o una descripción de inicio, trayectoria y final.
• Mostrar demasiados mensajes. Cada escena debe tener una idea principal que se pueda entender de un vistazo.
• Animar todo constantemente. Las pausas permiten leer y hacen que los cambios importantes destaquen.
• Inventar resultados para que la gráfica quede bonita. Conserva los datos y su contexto.
• Confundir previsualización con exportación. Revisa también el archivo renderizado y la versión final con sonido.

Checklist antes de publicar

• El mensaje se entiende sin sonido.
• Los textos se leen en una pantalla pequeña.
• Las imágenes conservan sus proporciones y tienen suficiente definición.
• Las transiciones no cortan elementos ni introducen saltos inesperados.
• Las cifras y etiquetas coinciden con las fuentes reales.
• El cierre deja claro qué hacer después.
• El MP4 final se reproduce correctamente y tiene un peso adecuado.

De una idea a un vídeo que comunica tu oferta

La parte más valiosa del proceso es decidir qué quieres enseñar y cómo lo va a entender el espectador. Un prompt útil convierte esa intención en escenas, archivos y movimientos concretos.

Empieza con una pieza pequeña, utiliza recursos reales y corrige una escena cada vez. Cuando la estructura funciona, puedes reutilizarla para presentar otros proyectos, productos o servicios cambiando el contenido y ajustando el ritmo.

¿Quieres una pieza así para presentar tu negocio? Puedo ayudarte a conectar tu web, tus resultados y tus sistemas digitales en una presentación visual. Visita mi portfolio y cuéntame tu proyecto.