Cómo generar vídeo con Claude Code: Remotion o HyperFrames

Hacer vídeo suele significar abrir un editor, mover clips en una línea de tiempo y exportar a mano cada vez que cambia un dato. Funciona para piezas únicas, pero se vuelve un suplicio en cuanto necesitas veinte versiones del mismo anuncio con distintos precios, o un resumen de resultados nuevo cada mes. La alternativa que usamos cuando el vídeo tiene que ser repetible, o cuando queremos que se mueva con la precisión de una web, es generarlo por código y dejar que un asistente de IA como Claude Code escriba ese código por nosotros.

En 2026 hay dos herramientas serias para hacerlo: Remotion y HyperFrames. Las hemos usado las dos en trabajos reales, y este artículo es la guía que nos habría gustado encontrar: qué es cada una, cómo se trabaja con ellas, cuándo conviene una u otra y qué problemas nos encontramos por el camino.

Qué significa hacer vídeo por código

La idea es la misma en las dos herramientas: el vídeo se describe con código en lugar de montarse a mano. Deja de ser un archivo cerrado que editas en una línea de tiempo y pasa a ser una especie de "receta" que se puede ejecutar las veces que quieras. Al final, esa receta produce un MP4 normal, idéntico al que daría cualquier editor.

Esa diferencia tiene tres consecuencias muy prácticas:

• El vídeo es reproducible. Se guarda como texto, se puede recuperar cualquier versión anterior y se reconstruye exactamente igual en cualquier ordenador. Nada de "¿dónde está el proyecto final de verdad?".
• El vídeo es dinámico. Si el contenido viene de una hoja de cálculo o de otro sistema, el mismo diseño genera infinitas variantes sin volver a montarlo.
• El vídeo se automatiza. Crear uno es dar una orden, así que el proceso puede lanzarse solo: en serie, de noche, o cuando llegan datos nuevos.

La contrapartida es que cada herramienta tiene sus propias reglas, distintas de las de una web o una animación corriente. Un asistente de IA genérico no las conoce y mete la pata; por eso, como veremos, el paso clave es darle el contexto adecuado.

Las dos opciones: Remotion y HyperFrames

Las dos hacen lo mismo —convertir unas instrucciones en un vídeo MP4— y con las dos se trabaja igual: le describes el vídeo a Claude Code y revisas el resultado. Remotion es la veterana, en desarrollo desde 2020. HyperFrames es la recién llegada: la publicó en 2026 HeyGen, la empresa de los avatares de vídeo con IA. Donde se separan es en cinco puntos.

1. Plantilla o pieza única. Es la diferencia que más pesa. Remotion está pensada para repetir: defines qué cambia de un vídeo a otro —un nombre, una cifra, una imagen— y genera cientos de variantes del mismo diseño, comprobando que cada una recibe los datos correctos. HyperFrames está pensada para diseñar: brilla en el vídeo único y cuidado plano a plano, como un promocional o un lanzamiento. También admite variantes, pero no es su punto fuerte.

2. Una aplicación o una página web. Remotion construye el vídeo como una pieza de aplicación, con React. HyperFrames lo construye como una página web y la graba fotograma a fotograma. Para ti, la consecuencia práctica es una: si ya tienes algo hecho en web —un diseño, un prototipo, una landing—, en HyperFrames se aprovecha casi tal cual y en Remotion hay que rehacerlo. Y todo lo que sabe hacer una web, de las tipografías a los efectos en 3D, está disponible en HyperFrames sin esfuerzo extra.

3. Cómo se retoca. Las dos tienen un estudio en el navegador para ver el vídeo antes de generarlo. En el de Remotion cambias los datos que la plantilla deja cambiar. En el de HyperFrames puedes pulsar cualquier texto o elemento del vídeo y modificarlo a mano, sin pedírselo al asistente: corregir una errata o ajustar un tamaño lleva segundos.

4. Lo que cuesta. HyperFrames es de código abierto y gratuita sin condiciones, también para uso comercial. Remotion es gratuita para particulares, empresas de hasta tres empleados y organizaciones sin ánimo de lucro; a partir de ahí hace falta una licencia de empresa.

5. Madurez. Remotion lleva años en uso, con una comunidad grande, muchas plantillas y una documentación muy completa. HyperFrames es joven y cambia muy rápido —publica versiones nuevas casi a diario—: avanza deprisa, pero conviene fijar la versión con la que trabajas para que un proyecto no cambie de un día para otro.

Las diferencias, de un vistazo

Si ya tienes vídeos hechos con Remotion y quieres probar HyperFrames, no hace falta empezar de cero: HyperFrames ofrece una skill que traduce el proyecto y, según su documentación, convierte automáticamente alrededor del 80 % y avisa de lo que no puede traducir.

Dónde encaja Claude Code

Crear vídeos así, a mano, exige saber programar. Aquí entra Claude Code, el asistente de IA de Anthropic que trabaja directamente sobre tu proyecto: entiende el conjunto del trabajo, escribe y modifica los archivos, y —esto es lo importante— corrige solo sus errores hasta que algo funciona. Da igual que el vídeo sea React o HTML: el asistente escribe los dos.

El cambio de mentalidad es este: dejas de montar cada animación y pasas a dirigir. Le dices "crea una intro de 5 segundos con el logo entrando desde abajo con un rebote suave y el eslogan apareciendo medio segundo después", y el asistente lo construye. Tú revisas el resultado y pides ajustes: "el rebote es demasiado brusco, suavízalo". Es una conversación, en lenguaje natural, sobre un resultado que siempre puedes deshacer y rehacer sin miedo.

Instala la skill de la herramienta antes de empezar

Hay un paso previo que marca una diferencia enorme en la calidad del resultado: instalar la skill de la herramienta. Una skill (habilidad) es un paquete de conocimiento que el asistente carga cuando detecta que trabajas con esa herramienta. Le enseña las reglas y las buenas prácticas, para que no improvise. No satura al asistente con un manual gigante: le va dando solo la parte que necesita en cada momento (animación, audio, subtítulos…).

El equipo de Remotion publica la suya en skills.sh:

npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices

HyperFrames publica una veintena de skills en su repositorio. El comando básico instala el núcleo, y el resto se carga cuando el encargo lo pide:

npx skills add heygen-com/hyperframes

En Claude Code también se pueden instalar como plugin, que agrupa todas las skills en un paquete con versión y se puede actualizar solo:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

Estas son las que más se usan y para qué sirve cada una:

Nuestro promocional salió del flujo product-launch-video. Un aviso práctico: en el directorio de skills.sh siguen apareciendo skills del mismo repositorio, como gsap o graphic-overlays, que ya no están en su carpeta de skills. Instala desde el repositorio con los comandos de arriba en lugar de buscarlas sueltas.

La skill de entrada de HyperFrames va un paso más allá de las reglas. Antes de escribir nada, hace unas preguntas sobre el objetivo del vídeo, propone un guion visual (storyboard) escena a escena y no construye hasta que lo apruebas. En nuestro promocional, ese guion quedó guardado en el propio proyecto junto a las escenas, así que cada ronda de cambios partía de lo ya aprobado.

Un complemento para HyperFrames: las skills oficiales de GSAP

Como HyperFrames anima casi todo con GSAP, la librería de animación web más usada, merece la pena darle al asistente el conocimiento a fondo de esa librería. GreenSock, sus creadores, publica skills oficiales con la API completa, las líneas de tiempo y los plugins. Desde que Webflow compró GSAP, todos sus plugins son gratuitos, también los que antes eran de pago, como SplitText (animar un texto letra a letra) o MorphSVG (transformar una forma en otra).

Hay un matiz importante: están escritas para la web, donde las animaciones arrancan solas o con el scroll. En un vídeo mandan las reglas de HyperFrames: una sola línea de tiempo en pausa, nada de valores aleatorios ni bucles infinitos. Por eso conviene instalar solo las partes que encajan y dejar fuera las de scroll o React:

npx skills add https://github.com/greensock/gsap-skills --skill gsap-core --skill gsap-timeline --skill gsap-plugins

La capa que separa un buen vídeo de uno soso

Conocer las reglas garantiza un vídeo correcto, pero no necesariamente bonito. Sin guía, un asistente tiende a producir animaciones planas y robóticas: textos que aparecen con un fundido aburrido, movimientos sin ritmo. Para subir el listón existen skills de diseño que codifican el oficio de la animación profesional en reglas concretas. No hace falta entenderlas a fondo, pero estas son las ideas que convierten un vídeo soso en uno de aspecto comercial:

• Movimiento con física, no mecánico. Lo que entra, gira o crece lo hace con una pizca de inercia, como en el mundo real, en lugar de deslizarse de forma rígida.
• Aparecer con varios gestos a la vez. Un elemento no solo se desvanece: aparece combinando opacidad, una ligera subida y un pequeño crecimiento. Se nota más vivo.
• Entradas escalonadas. Cuando entran varios elementos, lo hacen uno detrás de otro con un pequeño desfase, creando una cascada que se lee mejor que un aluvión simultáneo.
• Salidas más rápidas que las entradas. Lo que se va, se va con decisión, para dejar paso a lo siguiente con energía.
• Una marca centralizada. Colores, tipografías y tiempos viven en un único sitio, así que reajustar el estilo de todos los vídeos es cambiar una cosa, no cien.

Estas skills se instalan igual, con un solo comando, y sirven para las dos herramientas. Dos que merece la pena tener a mano:

• ui-ux-pro-max, un catálogo de criterios de diseño de interfaces (estilos, paletas, tipografías y reglas de UX) que ayuda al asistente a tomar decisiones estéticas con fundamento. Su ficha está en skills.sh:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

• frontend-design, la skill de diseño de interfaces de Anthropic, pensada para generar interfaces y composiciones cuidadas que huyen del aspecto genérico. Disponible también en skills.sh:

npx skills add https://github.com/anthropics/skills --skill frontend-design

Y una tercera, específica del movimiento:

• review-animations, de Emil Kowalski, ingeniero de diseño y autor del curso de animación web animations.dev. Revisa el código de una animación con un listón muy alto —tiempos, curvas, qué sobra— y por defecto señala problemas en lugar de dar el visto bueno. Está pensada para interfaces, pero sus criterios valen igual para un vídeo:

npx skills add https://github.com/emilkowalski/skills --skill review-animations

Con una de estas cargadas junto a la de la herramienta, el asistente no solo respeta las reglas técnicas: aplica un criterio visual que se nota en el resultado.

El flujo con Remotion, paso a paso

1. Crear el proyecto

Remotion incluye un asistente que monta un proyecto en blanco en segundos. Puedes pedírselo a Claude Code o lanzarlo tú con un comando:

npx create-video@latest

2. Describir el vídeo

Con el proyecto abierto, le explicas a Claude Code qué quieres. Cuanto más concreto seas con la duración, el formato y el estilo, menos vueltas hará falta dar. Un buen primer encargo se parece a esto:

Crea un vídeo vertical (formato reel) de 6 segundos. Fondo degradado azul oscuro. En el centro, el texto "Lanzamiento 2026" que aparece con un fundido y una subida suave durante el primer segundo, se mantiene, y desaparece en el último medio segundo.

A partir de esa frase, el asistente escribe todo lo necesario. Tú no tocas el código: das instrucciones y revisas.

3. Previsualizar

Antes de generar el vídeo final, conviene verlo en directo. Remotion incluye un estudio en el navegador con su línea de tiempo y su botón de reproducción:

npx remotion studio

Ahí ves el resultado al instante y vas pidiendo ajustes. Así se ve el estudio con el vídeo de prueba que montamos para este artículo: a la izquierda la lista de composiciones, en el centro la previsualización y abajo la línea de tiempo.

4. Generar el vídeo final

Cuando convence, crear el MP4 es dar una orden y esperar:

npx remotion render

Y si prefieres no tocar la terminal, el propio estudio tiene un botón Render. Al pulsarlo se abre un panel con los ajustes de exportación —el formato (vídeo, audio, imagen suelta o secuencia de imágenes), el códec, qué tramo exportar, el nombre del archivo, la calidad o la resolución— y se genera con un clic.

El ordenador genera el vídeo imagen a imagen y las une en el archivo final, exactamente como se veía en la previsualización. Este es el resultado real, con las entradas escalonadas y la salida rápida de las que hablamos antes:

El flujo con HyperFrames, paso a paso

Los pasos son los mismos; cambia lo que hay dentro.

1. Crear el proyecto

npx hyperframes init mi-video

Necesitas tener instalados Node.js 22 o superior y FFmpeg, el programa que une los fotogramas en el vídeo final. Con las skills ya puestas, lo normal es no lanzarlo tú: le describes el vídeo a Claude Code y él crea el proyecto, el guion visual y las escenas.

2. Describir el vídeo

El encargo puede ser el mismo que antes, palabra por palabra. Lo que cambia es lo que el asistente escribe por dentro —una página web en vez de una aplicación—, pero no necesitas leerlo: el resultado se revisa en el estudio, que es el paso siguiente.

3. Previsualizar y retocar en el estudio

npx hyperframes preview

Abre HyperFrames Studio en el navegador. Esta es nuestra propia composición, el vídeo promocional de yuGraphik, abierta en el estudio: cada escena es un archivo HTML independiente, y abajo se ven las siete escenas en la línea de tiempo junto a la pista de música.

Lo más práctico del estudio es el panel de la derecha. Al pulsar cualquier elemento del lienzo, el inspector muestra sus propiedades y permite cambiarlas a mano: el texto, la tipografía, el tamaño, el peso. O pedirle el cambio al agente sobre ese elemento concreto. Es la forma más rápida de corregir una errata o ajustar un tamaño sin pedírselo al asistente.

4. Generar el vídeo final

npx hyperframes render --output video.mp4

Desde el estudio, la pestaña de renders tiene los ajustes de exportación —formato, resolución, fotogramas por segundo y calidad— y el historial de los vídeos ya generados.

Dos casos reales: lo que hicimos con cada una

La teoría ayuda, pero donde de verdad se ven las diferencias es al usarlas. Estos son dos trabajos nuestros, publicados en nuestra propia web.

Con Remotion: los vídeos de nuestros proyectos

En nuestra página de proyectos, cada trabajo reproduce un vídeo al pasar el ratón: la web real del cliente dentro de una ventana de navegador, recorriendo varias páginas, con una etiqueta para cada una y transiciones entre ellas.

Es el caso perfecto para Remotion: seis vídeos con la misma estructura. Hay una sola composición que recibe el nombre del proyecto y, a partir de él, carga las capturas de sus páginas, su dominio y su logotipo. Las capturas se sacan automáticamente de cada web con un navegador controlado por código. Añadir un séptimo proyecto es añadir una entrada de datos, no montar otro vídeo.

Como estos vídeos se ven en una tarjeta y no a pantalla completa, los exportamos en WebM con AV1 a dos tamaños, de 1600 y 960 píxeles de ancho. Cada uno pesa entre 180 y 670 KB. Afinando el codificador (SVT-AV1 con preset 0 y CRF 52) bajamos el peso un 23 % respecto a nuestros primeros ajustes, con una nota VMAF —la métrica de calidad percibida de Netflix— de entre 96,8 y 99 frente al original.

Con HyperFrames: el vídeo promocional de yuGraphik

El promocional es lo contrario: una pieza única con mucho diseño. Son 37,5 segundos en siete escenas, con búsquedas reales en Google, datos reales de Search Console y las webs de nuestros clientes, con movimientos de cámara en 3D. Casi todo lo que aparece son cosas que ya son web: resultados de búsqueda, una gráfica, ventanas de navegador. Escribirlo en HTML y CSS fue lo natural, y el inspector nos dejó retocar textos y tamaños en segundos.

Dos lecciones del render que no vienen en ningún tutorial:

• El 4K a 60 fps necesita disco. El primer intento de generar el máster para YouTube falló porque guardaba los fotogramas en disco antes de codificarlos: unos 9 GB para menos de 40 segundos. Con el modo de captura en streaming, que envía cada fotograma directamente a FFmpeg (en la versión que usamos se activa con la variable HF_CAPTURE_PARALLEL_STREAM=true), el render completo tardó 1 minuto y 11 segundos en local.
• Cuidado con las imágenes gigantes dentro de capas 3D. Capturas de página completa de 2880×9600 píxeles colgaban el render dentro de los movimientos de cámara. Recortarlas a la parte que se ve lo resolvió.

Qué formato exportar para la web: MP4/H.264 o WebM/AV1

Terminado el render, queda una decisión que no aparece en ningún prompt y que es igual con las dos herramientas: en qué formato subes el vídeo. Para este mismo artículo probamos las dos rutas con el reel de "Lanzamiento 2026", así que las cifras que siguen son reales, no de laboratorio.

• MP4 con códec H.264. Es el que exportan Remotion y HyperFrames por defecto y el más compatible: se reproduce en cualquier navegador, móvil o programa de edición sin sorpresas, con descodificación por hardware hasta en los dispositivos más modestos. Es la opción segura cuando el vídeo puede acabar en cualquier sitio fuera de tu control, y la que usamos para subir el promocional a YouTube, que vuelve a comprimir todo lo que recibe.
• WebM con códec AV1. Comprime notablemente mejor que H.264 —entre un 30 % y un 50 % menos peso a calidad similar— a cambio de más tiempo de codificación. Su soporte ya es sólido en Chrome, Firefox y Edge, pero todavía cojea en versiones antiguas de Safari e iOS. Antes de descartar el H.264 como reserva, conviene comprobar la compatibilidad real en caniuse.com/av1.

Sobre el reel de este artículo hicimos cuatro pasadas, y cada ajuste quitó peso de verdad:

El salto más grande no vino de subir el CRF, sino de bajar la resolución. El vídeo se muestra en esta página a un máximo de 520 px de alto: exportarlo a 1920 px era gastar bits en detalle que nadie llega a ver. Ajustar la resolución de salida al tamaño real en el que se va a reproducir el vídeo suele quitar más peso que apretar el códec.

La recomendación práctica: si necesitas compatibilidad máxima, o vas a subir el vídeo a una plataforma, exporta en MP4/H.264. Si priorizas el peso mínimo y controlas dónde se reproduce, como en este artículo o en nuestra página de proyectos, exporta en WebM/AV1.

El detalle que lo cambia todo: el asistente revisa su propio trabajo

Aquí está la diferencia real entre pedirle algo a un chatbot y usar un asistente que trabaja sobre tu proyecto. Un fallo visual —un texto que se sale del recuadro, dos elementos que se solapan, un color que no se lee— no salta como un "error": el archivo es válido, pero el vídeo queda feo. Un asistente a ciegas te lo entregaría tan tranquilo.

Claude Code, con la skill cargada, cierra ese hueco revisándose a sí mismo:

1. Monta el vídeo.
2. Genera imágenes fijas de los momentos clave (npx remotion still en Remotion, npx hyperframes snapshot en HyperFrames).
3. Las mira —sí, las observa de verdad— buscando textos desbordados, solapamientos o contrastes pobres.
4. Si algo no cuadra, lo corrige, vuelve a comprobarlo y repite hasta que queda bien.

HyperFrames añade una comprobación automática, npx hyperframes check, que valida la composición antes de renderizar: animaciones que no se pueden llevar a un instante concreto, problemas de contraste o elementos fuera de su sitio. En nuestro promocional, lo pasamos después de cada cambio. Es la diferencia entre "esto debería verse bien" y "he comprobado que se ve bien".

Por qué el movimiento se siente natural

No necesitas dominar esto para dirigir al asistente, pero entenderlo te ayuda a pedir mejor. La clave de que una animación se sienta agradable es el tipo de movimiento. Frente a un desplazamiento mecánico y constante, Remotion imita muelles: elementos que llegan con inercia y se asientan con naturalidad, como objetos reales. HyperFrames usa las curvas de aceleración de GSAP, que consiguen lo mismo con otro nombre: un power3.out arranca rápido y frena con suavidad; un expo.out frena todavía más tarde.

Ese movimiento se puede ajustar para conseguir distintas sensaciones, y le puedes pedir a Claude el carácter que buscas:

Es justo el tipo de matiz que un editor profesional ajusta a mano durante horas y que aquí se resuelve con una frase.

El superpoder: vídeos con plantilla, a escala

Todo lo anterior ya es cómodo, pero el motivo de peso para adoptar este enfoque es la producción masiva de variantes. La idea: conviertes tu diseño en una plantilla y le indicas qué partes cambian —un titular, una cifra, un color, una imagen—.

A partir de ahí, el mismo vídeo sirve para un anuncio con "Ahorra un 20 %" en azul y para otro con "Envío gratis" en verde. Y con una lista de datos se generan cientos de vídeos de una tacada. Cada herramienta lo resuelve a su manera:

• En Remotion, lo que cambia son las props de la composición, con sus tipos validados. La duración también puede calcularse a partir de los datos, así que un vídeo con más contenido dura más sin tocar nada. Es lo que usamos en los vídeos de proyectos.
• En HyperFrames, la composición declara sus variables y cada render las recibe con --variables. Con --batch y un archivo JSON, genera un vídeo por cada fila.

El resultado deja de ser un archivo muerto: es una pieza viva que se reconstruye infinitas veces a partir de tus datos. Aquí un editor de vídeo tradicional simplemente no compite: hacer cien versiones a mano es inviable; con plantilla, es automático. Para este uso concreto, Remotion sigue llevando ventaja: es su terreno desde hace años y está mejor documentado.

Tu marca dentro del asistente: una skill con tu manual corporativo

Vimos que una skill es un paquete de conocimiento que el asistente consulta. Pues bien: además de las de Remotion o HyperFrames, puedes crear la tuya propia con la identidad de tu marca. Es, probablemente, la idea más valiosa de todo este enfoque para una empresa.

La idea es meter en esa skill dos cosas:

• Las reglas de tu marca (tu manual corporativo en versión que el asistente entiende): los colores exactos, las tipografías, el tono, cómo y cuándo usar el logotipo, los márgenes de seguridad, qué está permitido y qué no.
• Los recursos de marca a los que el vídeo puede acceder directamente: el logotipo en sus distintas versiones, los iconos, las tipografías, fondos o texturas, fotografías de producto…

Con eso instalado, no tienes que volver a explicar tu marca cada vez. Le pides "haz un reel anunciando el nuevo servicio" y el asistente ya sabe qué azul es el tuyo, qué tipografía usar, qué versión del logo poner según el fondo y dónde encontrar el icono que necesita. El vídeo sale on-brand por defecto, no por casualidad. Y la skill no depende de la herramienta: los vídeos de proyectos, hechos con Remotion, y el promocional, hecho con HyperFrames, salieron de la misma skill de marca, y por eso comparten azul, tipografía y fondo sin que nadie lo revisara a mano.

Las ventajas se notan enseguida:

• Coherencia automática. Todos los vídeos respiran la misma identidad, sin revisiones interminables para corregir un color o un logo mal puesto.
• Nada de assets sueltos. Se acabó el "¿dónde estaba el logo en blanco?" o usar una versión antigua: el asistente tira siempre del recurso correcto.
• Escala sin perder el hilo. Cien vídeos personalizados que, aun siendo distintos, parecen claramente de la misma marca.
• Coherencia entre personas. Da igual quién pida el vídeo: el resultado sigue las mismas reglas, porque el criterio vive en la skill, no en la cabeza de una persona.
• Una marca, un sitio. Si la identidad evoluciona —nuevo color, nuevo logo—, se actualiza la skill una vez y todos los vídeos futuros heredan el cambio.

Es la versión llevada al vídeo de algo que ya defendemos en web: la marca como sistema reutilizable, no como un archivo que cada cual interpreta a su manera.

Más allá de lo básico: voz, datos y subtítulos

Remotion no vive aislado: tiene paquetes oficiales que lo conectan con servicios externos, y Claude Code sabe cablearlos por ti. No necesitas saber qué hace cada uno, pero conviene conocer el mapa de lo que se puede enchufar a un vídeo de marca:

En HyperFrames, el mapa es el mismo pero el enchufe es otro. No hay paquetes específicos porque no hacen falta: como el vídeo es una página HTML, las tipografías se cargan como en cualquier web, Lottie funciona tal cual y cualquier API que devuelva texto, imágenes o audio se integra igual que en una web. Para la voz y los subtítulos, sus skills incluyen flujos propios de audio y de subtítulos sobre vídeo grabado.

Más allá de esa tabla, hay tres cosas que conviene tener claras sobre cómo trabaja el asistente con estas piezas:

• Los subtítulos pueden ser locales o en la nube. Si prefieres no enviar el audio a ningún servicio, Whisper corre en tu propio ordenador; si priorizas comodidad, la API de OpenAI o de ElevenLabs lo resuelve en segundos. Tú eliges la balanza entre privacidad y rapidez.
• Gráficos y datos. Animar barras, líneas o contadores a partir de una tabla es directo, ideal para resúmenes de resultados; con los datos llegando de una hoja de cálculo o un panel, el gráfico se redibuja solo. La gráfica de Search Console de nuestro promocional está hecha así, con los datos reales.
• Imágenes, audio y clips de vídeo. Se integran, se recortan y se combinan con las animaciones; el asistente se encarga de los detalles técnicos para que, por ejemplo, los vídeos insertados no parpadeen.

La gracia es que tú no instalas ni configuras nada de esto: le dices a Claude Code "añade voz en off con ElevenLabs y subtítulos automáticos" y él elige la pieza adecuada, la conecta y la deja funcionando.

Producir mucho: el trabajo en la nube

Crear vídeos en tu ordenador está bien para piezas sueltas, pero generar cientos a la vez lo satura. Para producir a gran escala, el trabajo pesado se delega a la nube, que lo reparte entre muchas máquinas trabajando en paralelo. Lo que en local tardaría minutos se resuelve en segundos.

Las dos herramientas lo permiten. Remotion lo hace sobre AWS Lambda con un sistema muy maduro y documentado. HyperFrames renderiza en AWS Lambda, en Google Cloud Run y en la nube de HeyGen. Para cualquier servicio que genere vídeo bajo demanda o campañas con miles de variantes, esto no es un lujo: es lo que hace viable la idea.

Cuándo conviene cada opción (y cuándo ninguna)

No hay una herramienta para todo. Esta es la frontera que usamos para decidir:

La regla corta: si el vídeo se repite con variaciones, Remotion; si es una pieza única con mucho diseño, HyperFrames; si es metraje grabado, un editor de toda la vida.

Por qué nos gusta este flujo en una agencia

En yuGraphik trabajamos con la misma filosofía en web: generamos sitios por código en lugar de depender de constructores visuales, porque el resultado es más rápido, fiable y barato de mantener (lo contamos en Next.js vs WordPress). El vídeo por código es la extensión natural de esa idea: la marca vive en piezas reutilizables y producir la versión número cien cuesta lo mismo que la primera.

Tener dos herramientas no es un problema, es una ventaja: el criterio de marca vive en la skill, no en la herramienta, así que elegimos la que mejor encaja con cada vídeo sin que el resultado cambie de estilo. Y sumarle un asistente como Claude Code derriba la barrera que tenía este enfoque —había que saber programar—: ahora describes lo que quieres, el asistente lo construye, comprueba que se ve bien y tú diriges.

Conclusión

Generar vídeo con Claude Code no sustituye al editor de vídeo para la pieza grabada, pero resuelve de forma elegante lo que ese editor no sabe abordar. Remotion es la opción madura para el vídeo repetible y a escala: plantillas con datos, cientos de variantes, render en la nube muy probado. HyperFrames es la opción nueva para el vídeo con mucho diseño: todo lo que sabe hacer una web, convertido en vídeo, con un estudio visual y licencia libre. El flujo es el mismo en las dos —crear, describir, previsualizar, generar— y en las dos el asistente revisa su propio trabajo.

Si en tu negocio el vídeo se ha convertido en una tarea repetitiva, o necesitas una pieza que presente tu marca con el mismo cuidado que tu web, es justo el escenario donde este enfoque ahorra más tiempo. En nuestro servicio de desarrollo web aplicamos estas mismas ideas de automatización; si quieres explorar cómo encajaría en tu marca, hablemos.