Remotion con Claude Code en español: cómo empezar y la alternativa que usamos

Qué es Remotion

Remotion es un framework que convierte componentes de React en vídeo. La idea es sencilla: cada fotograma es lo que pinta tu componente en ese instante. Con useCurrentFrame() sabes en qué fotograma estás y calculas a partir de ahí dónde va cada cosa, su tamaño y su opacidad.

Trae tres cosas que se agradecen mucho:

• Remotion Studio, una vista previa en el navegador para mover la barra de tiempo y ver cada instante;
• el render a MP4 desde la línea de comandos (por dentro, un Chrome sin ventana y ffmpeg);
• render en la nube y un reproductor para incrustar en webs, si algún día lo necesitas.

Encaja de maravilla con Claude Code porque todo es código: Claude lo escribe, lo ejecuta, mira el resultado y lo corrige.

Cómo empezar con Remotion y Claude Code

1. Node.js. Remotion lo necesita. Si no lo tienes, pídele a Claude Code que revise tu equipo y lo instale.
2. Un proyecto nuevo con las skills. En una carpeta vacía, npx create-video@latest --skills crea el proyecto y añade las skills sin preguntar. Si ya tienes un proyecto de Remotion, dentro de él: npx remotion skills add.
3. Abre Claude Code en esa carpeta y describe el vídeo: formato (vertical u horizontal), duración, qué dice, qué estilo buscas y, si puedes, un vídeo de referencia.
4. Mira la vista previa en Remotion Studio (npx remotion studio) y dale notas concretas: «la cifra entra medio segundo antes de que la digas», «el fondo es demasiado oscuro».
5. Renderiza cuando te guste (npx remotion render) y revisa el MP4 en el móvil, que es donde se va a ver.

Las skills oficiales

Remotion mantiene sus propias skills para agentes como Claude Code, en su documentación. Las que más vas a usar:

• remotion-best-practices: las engloba todas; si dudas, esta;
• remotion-create: crear un proyecto o una composición;
• remotion-markup: animaciones, tipografía, imágenes, audio y tiempos;
• remotion-captions: subtítulos;
• remotion-render y remotion-studio: renderizar y abrir la vista previa;
• remotion-docs: buscar en la documentación al día, antes de inventarse una función.

La licencia: léela antes de montar nada

Es lo que más se pasa por alto. Según su página de licencia y precios (consultada el 15 de noviembre de 2026):

En las colaboraciones se suma la gente de los dos lados. Si eres una persona sola, no te afecta. Si montas vídeo para clientes o con un equipo que crece, conviene tenerlo claro desde el principio.

La alternativa que usamos: HTML por fotograma

Nosotros no usamos Remotion. No porque sea malo, sino porque instalamos el sistema a otras personas y equipos, y no queríamos que nadie dependiera de una licencia ni de React. La idea de fondo es la misma, con piezas estándar:

1. La escena es una página web (HTML, CSS y algo de JavaScript) con una función que recibe el tiempo y deja la página exactamente como debe verse en ese instante. Por ejemplo, seek(3.2): el titular a medio entrar, la cifra en 1.240 y el subtítulo con la palabra «clientes» resaltada.
2. Un navegador sin ventana (Chrome, manejado con Playwright) abre la página, llama a esa función para cada fotograma y hace una captura.
3. ffmpeg recibe las capturas por tubería, sin guardarlas en disco, y las une con el vídeo grabado y el sonido.

Claude escribe HTML y CSS con mucha soltura, así que cualquier cosa que se pueda hacer en una web se puede animar: tipografía, degradados, canvas, SVG o escenas 3D.

Remotion o HTML por fotograma

Elige Remotion si trabajas solo o en un equipo pequeño, te sientes cómodo con React o quieres resultados hoy. Elige HTML por fotograma si vas a instalarlo a clientes o a un equipo grande, quieres cero dependencias o te interesa usar cualquier tecnología web sin adaptarla a React.

Reglas que valen para los dos

Da igual la herramienta: casi todos los fallos de un vídeo hecho con código vienen de lo mismo.

• Todo depende del tiempo. Nada de animaciones CSS que corren solas, setTimeout o la hora del sistema: cada fotograma tiene que salir igual cada vez que se pinta.
• El azar, con semilla. Si algo se mueve «al azar», que sea siempre el mismo azar.
• Las fuentes, cargadas antes del primer fotograma. Si no, el primer segundo sale con la letra de reserva.
• Los vídeos dentro de la escena, fotograma a fotograma. Un vídeo que «se reproduce» mientras se captura da saltos.
• Revisa con hojas de contacto de varios fotogramas por segundo en las transiciones. A velocidad normal, los fallos de un solo fotograma no se ven, pero se notan.
• Mide lo que importa: que los textos queden dentro de la zona segura, que la letra no baje de 36 px en un vídeo de 1080 de ancho y que el volumen esté a −14 LUFS.

Si vienes de editar a mano y quieres ver el cuadro completo (limpieza, subtítulos, sonido y revisión), empieza por editar vídeos con Claude. Y si lo tuyo son los reels, sigue con editar reels con Claude Code.

Preguntas frecuentes