Claude Code puede crear videos de Remotion a partir de un prompt en español sencillo, siempre que tengas la skill instalada y el prompt se lea como una lista de planos. Mira los comandos de instalación, tres ejemplos de prompts, código React para copiar, un flujo de trabajo con metraje, soluciones a los fallos de render y los costos de la licencia.
Escribir un párrafo y recibir un MP4 renderizado suena a truco hasta que lo ves funcionar. Con la skill de Remotion para Claude Code, describes una escena en lenguaje sencillo, el agente escribe componentes de React y Remotion convierte cada fotograma en un archivo de video real. Sin línea de tiempo que arrastrar. Sin un cuadro de exportación que esconda el ajuste que necesitas. Este artículo muestra la instalación, los prompts que funcionan, código que puedes copiar y las trampas que te roban una tarde entera.
Si diriges un SaaS que necesita un clip de lanzamiento, un equipo de datos que quiere gráficos animados o un creador independiente cansado de editar la misma intro una y otra vez, crear videos con código te da algo que un editor de línea de tiempo nunca ofrecerá: un video que es un archivo de texto plano que puedes versionar, revisar y volver a renderizar en un minuto.
Remotion es un framework que renderiza video a partir de código React. Escribes componentes, Remotion los reproduce fotograma a fotograma en un navegador sin interfaz, captura cada fotograma y une el resultado en MP4, WebM, GIF o una imagen fija. Todo lo que una página web puede dibujar, como SVG, diseños con CSS, gráficos, fuentes web y canvas, se convierte en material de video.
La documentación de Remotion resume la idea central en una frase: un video es una función de imágenes en el tiempo. Tu componente lee el número del fotograma actual y devuelve cómo debería verse ese fotograma. Si cambias un valor de un fotograma a otro, tienes una animación.
Cada composición necesita cuatro números:
El primer fotograma es 0 y el último es durationInFrames - 1. Un clip de 5 segundos a 30 fps son 150 fotogramas. Esa aritmética importa más adelante, porque es lo primero que un prompt impreciso hace mal.
Claude Code ya escribe React sólido. Lo que no conoce de fábrica son las reglas internas de Remotion. La animación debe controlarse con useCurrentFrame(), porque las transiciones de CSS no se renderizan de forma determinista. Los medios locales deben cargarse con staticFile(). Los clips de video van en <OffthreadVideo>, no en una etiqueta <video> normal. Si fallas en una de estas reglas, la vista previa se ve bien mientras el render final se rompe.
La skill es un conjunto de instrucciones que el agente carga cuando detecta una tarea de video. Abarca las mejores prácticas de Remotion, la creación de proyectos y composiciones, el inicio de Studio, el render y extras como subtítulos y actualizaciones de paquetes. El agente deja de adivinar y empieza a seguir las convenciones del framework.
💡 La skill es una guía, no un renderizador. Tu proyecto, tu instalación de Node.js y el propio Remotion siguen siendo los que producen el video. La skill solo evita que el agente escriba código que pelee con el framework.
Necesitas Node.js, una terminal y Claude Code, que requiere un plan de pago de Anthropic o créditos de API. Todo lo demás se instala desde npm.
npx create-video --yes --blank my-video
cd my-video
npm install
La marca --blank te da un proyecto mínimo en lugar de una demo, así el agente no tiene nada que desenredar antes de empezar.
Desde dentro de la carpeta del proyecto:
npx remotion skills add
Existen dos alternativas. El paquete de skills se instala con npx skills add remotion-dev/skills, y el plugin oficial de Claude Code se instala con estos dos comandos:
claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion
Abre dos terminales en la carpeta del proyecto. Deja la vista previa ejecutándose en la primera e inicia el agente en la segunda:
# terminal 1
npm run dev
# terminal 2
claude
Studio abre una vista previa en el navegador que se recarga cada vez que el agente guarda un archivo. Inicia una sesión nueva de Claude Code después de instalar, o es posible que la skill no se cargue. La skill aparece como comandos de barra: /remotion-create, /remotion-studio, /remotion-render, /remotion-docs y /remotion-best-practices, que engloba a todos los demás cuando no sabes cuál aplica.
Los prompts vagos producen videos genéricos. Los prompts que funcionan se leen como la lista de planos de un director: duración, dimensiones, fotogramas por segundo, orden de las escenas con tiempos, texto exacto, rutas de los recursos, colores, fuentes, estilo de movimiento y una lista corta de cosas que evitar.
| Ingrediente | Versión débil | Versión sólida |
|---|---|---|
| Duración | "un video corto" | "15 segundos a 30 fps" |
| Tamaño | "formato para redes" | "1080 por 1920, vertical" |
| Escenas | "intro y demo" | "2 s de título, 8 s de demo, 5 s de llamada a la acción" |
| Texto | "un titular" | "Notas, por fin rápidas" |
| Movimiento | "animaciones geniales" | "entradas con resorte contenidas, sin rebote" |
| Límites | nada | "sin música de archivo, una sola familia tipográfica" |
Di qué debes evitar. "Sin degradados, sin emoji, no más de dos colores" evita más retrabajo que cualquier instrucción en positivo.
Este prompt está basado en el que aparece en el recorrido de Tella:
/remotion-create
Create a 15-second, 1920x1080, 30 fps launch video for a note-taking app.
Three scenes: a 2-second title card, an 8-second product demo section,
and a 5-second call to action. Dark background, large readable type,
restrained spring animations. One file per scene under src/scenes,
all text passed in as props.
Lo que devuelve es predecible: tres componentes de escena, una composición raíz de 450 fotogramas y un objeto defaultProps que contiene el texto. Previsualízalo en Studio y luego ajusta con seguimientos breves como "haz que el título entre 10 fotogramas después" o "ralentiza el resorte de la llamada a la acción".
En los videos de datos, el código supera a un editor de línea de tiempo, porque los números son una entrada real en lugar de barras dibujadas a mano.
Read data/sales.json and build a 10-second, 1920x1080 bar chart at 30 fps.
Bars grow from zero with a spring, staggered by 4 frames each.
Show the value above each bar once it stops moving. Hold the final state
for 1 second. White background, one accent color, no gridlines.
Cambia el archivo JSON, vuelve a renderizar y tendrás el video del informe del próximo mes. El escalonado es una idea de una sola línea para un agente: el retraso es el índice de la barra por cuatro fotogramas.
La skill incluye orientación sobre subtítulos, así que un prompt como este funciona bien: "Añade subtítulos palabra por palabra a public/clips/interview.mp4 usando captions.json. Resalta la palabra activa en amarillo y mantén los subtítulos dentro del tercio inferior." Dale al agente tiempos reales de palabras en un archivo en lugar de pedirle que los invente. Los tiempos inventados se desincronizan en cuestión de segundos.
Aunque el agente escriba todo, deberías poder leerlo. Tres patrones aparecen en casi todos los proyectos.
import {AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion';
export const TitleCard: React.FC<{title: string}> = ({title}) => {
const frame = useCurrentFrame();
const {fps} = useVideoConfig();
const enter = spring({frame, fps, config: {damping: 200}});
const opacity = interpolate(frame, [0, 15], [0, 1], {extrapolateRight: 'clamp'});
return (
<AbsoluteFill style={{backgroundColor: '#0f172a', justifyContent: 'center', alignItems: 'center'}}>
<h1 style={{color: 'white', fontSize: 96, opacity, marginTop: (1 - enter) * 60}}>
{title}
</h1>
</AbsoluteFill>
);
};
Un damping de 200 da una entrada suave sin rebote. interpolate asigna los fotogramas 0 a 15 a una opacidad de 0 a 1, y extrapolateRight: 'clamp' impide que el valor siga superando 1 después.
import {AbsoluteFill, Sequence} from 'remotion';
export const LaunchVideo: React.FC = () => (
<AbsoluteFill>
<Sequence from={0} durationInFrames={60}>
<TitleCard title="Notes, finally fast" />
</Sequence>
<Sequence from={60} durationInFrames={240}>
<ProductDemo />
</Sequence>
<Sequence from={300} durationInFrames={150}>
<CallToAction />
</Sequence>
</AbsoluteFill>
);
Dentro de un Sequence, useCurrentFrame() se reinicia en cero, así que cada escena puede escribirse y probarse por separado. A 30 fps, estos bloques duran 2, 8 y 5 segundos, lo que suma los 450 fotogramas del prompt de lanzamiento.
import {Composition} from 'remotion';
import {TitleCard} from './TitleCard';
export const Root: React.FC = () => (
<Composition
id="TitleCard"
component={TitleCard}
durationInFrames={90}
fps={30}
width={1920}
height={1080}
defaultProps={{title: 'Hello from code'}}
/>
);
Ahora sustituye el texto en el momento del render y recorre una lista:
for name in "Spring sale" "Black Friday" "New arrivals"; do
npx remotion render src/index.ts TitleCard "out/${name// /-}.mp4" --props="{\"title\":\"$name\"}"
done
Tres videos a partir de un solo componente, sin abrir un editor.
💡 Dile al agente desde el principio: "Cada cadena, color y número va en props." No cuesta nada y después facilita mucho las variantes en lote, las pruebas A/B y las traducciones.
Remotion anima lo que le das: texto, formas, gráficos, imágenes y clips. Para metraje de aspecto real o un storyboard más nítido, traes el material desde fuera. PicassoIA cubre ambos extremos, con una página de Claude Sonnet 5 para redactar las especificaciones de escena y el código, y una página de Seedance 2.0 para generar clips.
high cuando necesites recuento exacto de fotogramas en muchas escenas, y en low para reescrituras rápidas. Deja los max tokens en el valor predeterminado de 8192 para especificaciones largas./remotion-create.El modelo también acepta una imagen, así que una captura de la interfaz de tu producto puede alimentar el storyboard directamente.
16:9 para 1920x1080, o 9:16 para vertical.720p.public/clips/ dentro de tu proyecto de Remotion.Para mantener un aspecto de marca coherente, sube una imagen fija como primer fotograma. Seedance 2.0 la trata como la imagen de apertura del clip.
💡 Genera un plano por clip y únelos en Remotion. Los clips cortos con un movimiento de cámara claro superan a un solo clip largo con cinco ideas.
import {AbsoluteFill, OffthreadVideo, staticFile} from 'remotion';
export const HarborShot: React.FC = () => (
<AbsoluteFill>
<OffthreadVideo src={staticFile('clips/harbor.mp4')} />
</AbsoluteFill>
);
Después, superpón texto, rótulos en el tercio inferior y subtítulos sobre el metraje con React normal. Para un acabado fuera de Remotion, estas páginas encajan en el flujo de trabajo:
| Tarea | Página |
|---|---|
| Voz en off a partir de un guion | Speech 2.8 HD |
| Recortar un clip a una longitud exacta | Trim Video |
| Unir las escenas renderizadas | Video Merge |
| Cambiar o mezclar una banda sonora | Video Audio Merge |
| Incrustar subtítulos en un render | Autocaption |
Studio sirve para iterar y la línea de comandos para la salida final. Estos son los comandos que más usarás:
| Objetivo | Comando |
|---|---|
| Vista previa en vivo | npm run dev |
| Renderizar un MP4 | npx remotion render src/index.ts LaunchVideo out/launch.mp4 |
| Exportar una imagen fija | npx remotion still src/index.ts LaunchVideo out/frame.png --frame=60 |
| Sustituir props | --props='{"title":"Hello"}' |
| Reducir el uso de memoria | --concurrency=2 |
También puedes escribir /remotion-render y dejar que el agente ejecute el render por ti. Cuando algo falle, estos son los cinco fallos que encontrarás primero:
npm install primero y revisa la terminal por si hay un problema de versión de Node.js o de puerto ocupado.Sequence.Cuando el agente sigue adivinando, /remotion-docs le entrega la documentación oficial para que la compare.
La licencia de Remotion decide si esto es gratis para ti. Según la página de licencias del proyecto, es gratis para particulares, para organizaciones con fines de lucro de hasta 3 empleados, para entidades sin ánimo de lucro y para cualquiera que lo esté evaluando. Las empresas más grandes necesitan una licencia empresarial. En el momento de escribir esto, Remotion publica estos niveles:
| Plan | Para quién es | Precio |
|---|---|---|
| Free | Particulares, hasta 3 empleados, entidades sin ánimo de lucro | $0 |
| Creators | 4 o más personas que hacen videos a mano | $25 por puesto al mes |
| Automators | Aplicaciones que renderizan automáticamente | $0,01 por render, mínimo mensual de $100 |
| Enterprise | Condiciones personalizadas y soporte | Desde $500 al mes |
Revisa la página de precios vigente antes de publicar, ya que las condiciones cambian. Los otros costos son el uso de Claude Code, el tiempo de render en tu propio equipo y los créditos para cualquier metraje de IA.
Los límites también son reales. Este flujo de trabajo brilla en gráficos en movimiento, videos explicativos, videos de datos, subtítulos y variantes con plantilla. Es mala opción para la edición de acción real con varias cámaras, donde el metraje filmado o generado debe llevar la imagen y Remotion solo debe añadir la capa gráfica. Y el agente no es determinista: dos ejecuciones del mismo prompt dan dos diseños distintos, así que revisa siempre en Studio antes de renderizar.
Empieza poco a poco. Crea el proyecto, añade la skill y pide una tarjeta de título de cinco segundos con tu propio texto. Cuando se renderice, amplíala: añade una escena, pasa el texto como props y luego recorre una lista para obtener diez variantes.
Después incorpora material externo. Genera un fondo en bucle con Seedance 2.0, narra un guion con Speech 2.8 HD y deja que Remotion ensamble todo con tiempos exactos. ¿Prefieres imágenes fijas? Crea tus propias imágenes y arte de escena en PicassoIA a través de la lista completa de modelos y colócalas en public/ como fondos para tus composiciones. Experimenta, rompe cosas y vuelve a renderizar. Un video que vive en código cuesta un minuto arreglarlo, así que prueba la versión que nunca intentarías en una línea de tiempo.
Elige tu idioma
