Claude Opus 5.5 y Remotion: flujo completo para crear vídeos de producto con código

Conclusión práctica: Claude Opus 5.5 con Remotion funciona muy bien para explicaciones de producto, animaciones de interfaz, recorridos de código, gráficos, vídeos de lanzamiento y plantillas reutilizables. Opus 5.5 interpreta el brief y escribe o corrige el proyecto React/TypeScript; Remotion convierte ese código en fotogramas y genera el vídeo. Ninguno de los dos es un modelo de vídeo por difusión, por lo que un prompt no devuelve por sí solo un MP4 fotorrealista.

Si el valor principal está en actores, localizaciones realistas, movimientos de cámara cinematográficos o escenas imposibles de describir con precisión mediante código, produce esos recursos por separado. Después puedes usar Remotion o HyperFrames para títulos, subtítulos, transiciones, identidad visual y ensamblaje repetible.

El flujo de este artículo está verificado con documentación oficial. El criterio real de éxito es un MP4 renderizado y comprobado en tu equipo o en CI; no se presentan demos no verificadas, tiempos fijos ni un supuesto precio universal por vídeo.

Elige la herramienta en un minuto

Necesidad	Punto de partida	Motivo
Tour de producto, UI, código o datos	Remotion	Ecosistema React, composiciones, props y render maduro
Motion graphics con HTML/CSS y entrega sencilla por un agente	HyperFrames	Autoría HTML directa, sin obligar a usar React
Muchos vídeos a partir de una plantilla	Cualquiera de los dos	Ambos permiten render determinista si el contenido está parametrizado
Personas y escenas realistas o lenguaje cinematográfico	Producción o generación de recursos aparte	Esas imágenes no son el terreno natural del vídeo generado con código
Una pieza corta que no se reutilizará	Prototipo mínimo	Una plataforma de lotes puede ser innecesaria

La frontera útil es esta: ¿puedes describir cada plano con código, recursos, datos y tiempo? Cuanto más se parezca el resultado a una web, presentación, dashboard, editor de código, subtítulos o gráfica de marca, mayor será la ventaja.

Qué hace Claude Opus 5.5 en este flujo

Anthropic publicó Claude Opus 5.5 el 22 de septiembre de 2026. El ID exacto de API es claude-opus-5-5. Para este caso, sus tareas relevantes son:

1. Convertir el brief en escenas, componentes, tiempos y criterios de aceptación.
2. Editar un repositorio de varios archivos de Remotion o HyperFrames.
3. Sustituir textos rígidos por props, JSON y manifiestos.
4. Ejecutar comprobaciones, previsualizar y reparar errores de render a partir de logs.
5. Mantener reglas visuales coherentes entre variantes.

El límite es esencial: el modelo produce texto, código o parches; no produce el MP4 final. El render se ejecuta en tu ordenador, un runner de CI, un servidor o una infraestructura de render. Los tokens del modelo y los costes de CPU, navegador, FFmpeg, almacenamiento y tráfico son partidas distintas.

Define el brief antes de abrir Claude Code

Crea un brief.md con un resultado comprobable:

# Brief del vídeo

- Objetivo: explicar cómo un usuario crea una clave API y envía su primera solicitud.
- Audiencia: desarrolladores que evalúan el producto por primera vez.
- Formato: 1920x1080, 30 fps, 8 segundos, sin audio.
- Composition ID: ProductExplainer
- Escenas:
  1. Problema y promesa, 0–2 s
  2. Flujo del producto en tres pasos, 2–6 s
  3. Resultado final y CTA, 6–8 s
- Entradas: productName, headline, steps, accentColor, rutas de capturas
- Restricciones: usar solo recursos locales; no hacer solicitudes de red durante el render.
- Aceptación:
  - El texto permanece dentro de los márgenes seguros.
  - No hay errores en la consola.
  - La composición se renderiza a MP4 desde la CLI.
  - Una segunda variante se renderiza cambiando solo props.json.

Resolución, FPS, duración, ID de composición, rutas de recursos, política de red y comando de verificación deben ser entradas explícitas. Así el agente sabe qué significa “terminado”.

Proyecto mínimo de Remotion siguiendo la guía oficial

Instala Node.js y Claude Code. Después ejecuta la secuencia oficial de Remotion para coding agents:

npx create-video --yes --blank my-video
cd my-video
npm install
npx remotion skills add
npm run dev

En otra terminal, abre Claude Code en el mismo repositorio:

cd my-video
claude

Empieza con una sola composición de ocho segundos y sin recursos remotos:

Lee brief.md e inspecciona el proyecto Remotion existente antes de editarlo.
Crea una composición con el ID exacto ProductExplainer.
Usa 1920x1080, 30 fps y 240 frames.
Construye un vídeo explicativo limpio de tres escenas solo con React, CSS y SVG inline.
La composición debe aceptar productName, headline, steps y accentColor como props,
con valores predeterminados razonables para la vista previa en Studio.
Mantén todo el texto dentro de un margen seguro de 120px. No cargues recursos remotos durante el render.
Usa APIs de Remotion basadas en frames para que cada frame sea determinista.
Al terminar, indica los archivos modificados, el comando de vista previa y el comando exacto de render.
No declares éxito salvo que el comando de render termine con código 0.

El ID estable permite automatizar. La animación basada en fotogramas mantiene la reproducibilidad. Los recursos locales eliminan variables de red, CORS y URL caducadas durante la primera prueba.

Previsualiza, renderiza y verifica

Comprueba ProductExplainer en Remotion Studio y luego ejecuta:

npx remotion render ProductExplainer out/product-explainer.mp4

En automatización conviene indicar siempre la composición y el archivo de salida. El ejemplo solo está completo cuando el comando termina con código 0, el MP4 existe y se reproduce, no hay texto cortado ni recursos ausentes, no quedan excepciones y una segunda variante funciona cambiando solo los props.

Añade una verificación técnica:

ffprobe -v error \
  -show_entries stream=codec_name,width,height,r_frame_rate \
  -show_entries format=duration \
  -of json out/product-explainer.mp4

Así CI puede rechazar un archivo vacío, con resolución errónea o sin pista de vídeo.

Parametriza la plantilla

Remotion combina los props de entrada con los valores predeterminados. Para empezar, guarda los datos en props.json:

{
  "productName": "Acme API",
  "headline": "Tu primera solicitud en tres pasos",
  "steps": [
    "Crea una clave API",
    "Elige un modelo",
    "Envía la solicitud"
  ],
  "accentColor": "#6D5EF9"
}

Renderiza con:

npx remotion render ProductExplainer out/acme-api.mp4 --props=props.json

Remotion advierte que el JSON inline puede perder comillas en shells de Windows; un archivo JSON es más fiable. Para varias lenguas, conserva una única composición y separa los contenidos:

src/
  components/
  ProductExplainer.tsx
  Root.tsx
content/
  en.json
  ru.json
  de.json
public/
  screenshots/
render-manifest.json

Los componentes controlan la animación, los archivos de idioma controlan texto y recursos, y el manifiesto relaciona composición, locale, props y nombre de salida.

Cómo depurar un render fallido

Activa primero el log detallado:

npx remotion render ProductExplainer out/debug.mp4 --log=verbose

Si la concurrencia repite mensajes, reduce temporalmente a un hilo:

npx remotion render ProductExplainer out/debug.mp4 \
  --log=verbose \
  --concurrency=1

Después comprueba, en este orden: ID exacto de la composición; render con props predeterminados antes del JSON; eliminación progresiva de vídeo, fuentes, gráficos y efectos; diferencias entre navegador interactivo y Chrome headless; esperas asíncronas; y conservación del comando, props, commit, primer error causal y versiones del entorno.

Al volver a pedir ayuda al agente, entrega el comando exacto y la primera causa, no cientos de líneas repetidas. Pide una explicación, el parche mínimo y la repetición del mismo comando de validación.

Remotion, HyperFrames o vídeo por difusión

HyperFrames es un framework open source de HeyGen orientado a HTML. Convierte HTML, CSS, medios y animaciones seekable en MP4 deterministas. Su flujo mínimo actual es:

npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render

El README actual exige Node.js 22+ y FFmpeg, y admite GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI y adaptadores propios.

Criterio	Remotion	HyperFrames	Vídeo por difusión
Autoría	React/TypeScript	HTML/CSS/JS	Prompts de texto, imagen o vídeo
Reproducibilidad	Alta con entradas fijas	Alta por diseño	Menor; una repetición puede cambiar
Mejor uso	UI, código, datos y plantillas complejas	Motion web, piezas de marca y handoff de agentes	Personas y escenas realistas
Parámetros	props, datos y componentes	data attributes, HTML y scripts	Parámetros del modelo y recursos
Coste principal	Ingeniería y render	Ingeniería y render	Créditos de generación y posproducción

Elige Remotion si tu equipo ya usa React o necesita un sistema duradero de componentes. Prueba HyperFrames si el diseño es web y prefieres entregar un index.html. Si el vídeo depende de imágenes realistas, crea esos recursos aparte y usa uno de los dos para ensamblarlos.

Para lotes, la API es solo una etapa

Una arquitectura segura separa:

briefs / recursos / reglas de marca
            ↓
Claude API: generar o revisar código y parches
            ↓
validación: schema, allowlist, typecheck, lint, revisión
            ↓
workers de render de Remotion o HyperFrames
            ↓
ffprobe / revisión visual / almacenamiento / publicación

No ejecutes la salida del modelo directamente en producción. Limita los directorios, evita secretos en prompts, fija dependencias, revisa comandos y usa entornos aislados. El Message Batches API de Anthropic procesa solicitudes Messages de forma asíncrona; no es una cola de render de vídeo.

Lee la clave sin mostrarla:

read -rs ANTHROPIC_API_KEY
export ANTHROPIC_API_KEY
printf '\n'

Instala el SDK:

python -m pip install anthropic

briefs.json:

[
  {
    "id": "launch-en",
    "brief": "Crea un parche para la variante inglesa usando content/en.json."
  },
  {
    "id": "launch-de",
    "brief": "Crea un parche para la variante alemana usando content/de.json."
  }
]

Script completo para crear, consultar y guardar por custom_id:

#!/usr/bin/env python3
import json
import time
from pathlib import Path

import anthropic
from anthropic.types.message_create_params import MessageCreateParamsNonStreaming
from anthropic.types.messages.batch_create_params import Request

MODEL = "claude-opus-5-5"
briefs = json.loads(Path("briefs.json").read_text(encoding="utf-8"))
client = anthropic.Anthropic()

requests = []
for item in briefs:
    requests.append(
        Request(
            custom_id=item["id"],
            params=MessageCreateParamsNonStreaming(
                model=MODEL,
                max_tokens=8000,
                system=(
                    "Mantienes un proyecto de vídeo generado con código. "
                    "Devuelve un plan de implementación conciso y un unified diff. "
                    "No incluyas secretos ni comandos que descarguen y ejecuten código desconocido."
                ),
                messages=[{"role": "user", "content": item["brief"]}],
            ),
        )
    )

batch = client.messages.batches.create(requests=requests)
Path("batch-id.txt").write_text(batch.id, encoding="utf-8")
print(f"creado: {batch.id}")

while True:
    current = client.messages.batches.retrieve(batch.id)
    if current.processing_status == "ended":
        break
    print(f"procesando: {current.request_counts}")
    time.sleep(60)

out_dir = Path("batch-results")
out_dir.mkdir(exist_ok=True)

for result in client.messages.batches.results(batch.id):
    outcome = result.result
    if outcome.type == "succeeded":
        text = "".join(
            block.text for block in outcome.message.content if block.type == "text"
        )
        (out_dir / f"{result.custom_id}.txt").write_text(text, encoding="utf-8")
        print(f"guardado: {result.custom_id}")
    else:
        print(f"no guardado: {result.custom_id} -> {outcome.type}")

Tras revisar y aplicar los parches, un worker puede renderizar variantes validadas:

for dir in variants/*; do
  [ -d "$dir" ] || continue
  (
    cd "$dir"
    npm ci
    npx remotion render ProductExplainer \
      "out/$(basename "$dir").mp4" \
      --props=props.json
  )
done

Un Batch admite actualmente hasta 100.000 solicitudes o 256 MB. La mayoría termina en menos de una hora, pero puede procesarse hasta 24 horas; los resultados se conservan 29 días. Relaciona siempre la respuesta mediante custom_id y trata errored, canceled y expired como fallos.

Costes: separa cada tipo de token

Precios verificados el 28 de septiembre de 2026, en USD por millón de tokens y para el ID exacto claude-opus-5-5:

Concepto	Anthropic estándar	BetterToken, precio efectivo estándar	Definición
Entrada normal	$4.00	$2.72	Tokens de entrada sin caché
Salida	$20.00	$13.60	Tokens generados
Escritura de caché 5 min	$5.00	$3.40	Primera escritura del prefijo
Escritura de caché 1 h	$8.00	$5.44	Primera escritura de una hora
Lectura/refresh de caché	$0.20	$0.136	Reutilización del prefijo

La configuración pública de BetterToken aplica precios base por tramo y el multiplicador actual del grupo Claude 0.68. model_ratio=0 no significa uso gratuito. Revisa de nuevo BetterToken Pricing y Anthropic Pricing antes de producir.

model_cost =
  input_tokens / 1,000,000 × input_price
+ output_tokens / 1,000,000 × output_price
+ cache_write_5m_tokens / 1,000,000 × cache_write_5m_price
+ cache_write_1h_tokens / 1,000,000 × cache_write_1h_price
+ cache_read_tokens / 1,000,000 × cache_read_price

Con 20 briefs, 30.000 tokens de entrada y 8.000 de salida por cada uno, sin caché:

• Anthropic síncrono estándar: $5.60
• Anthropic Batch, con 50% de descuento en entrada y salida: aproximadamente $2.80
• BetterToken síncrono al precio efectivo estándar: $3.808

No es un precio fijo por vídeo. Faltan reintentos, CPU/GPU, navegador, almacenamiento, tráfico, recursos y revisión humana.

Límite de BetterToken en este flujo

BetterToken puede evaluarse como ruta Anthropic-compatible para Claude Code. El Base URL actual es https://bettertoken.ai; cada usuario crea su cuenta y su API Key. No es una suscripción Claude.ai ni Claude Max.

La existencia de /v1/messages no demuestra que BetterToken sea compatible con Message Batches. Por eso el ejemplo Batch anterior se basa únicamente en la API oficial de Anthropic. No cambies el Base URL suponiendo soporte hasta que BetterToken publique contrato, endpoint, límites y facturación específicos.

Para usuarios de Rusia, BetterToken ofrece documentación en ruso y pagos en rublos; métodos, mínimo, tipo de cambio, comisión y plazo dependen de lo que muestre el panel al pagar.

Lista de control antes de escalar

• Brief con objetivo, audiencia, formato, escenas y criterios verificables.
• Recursos locales, licencias claras, fuentes y capturas fijadas.
• Una única composición con props y contenidos separados por idioma.
• Lock file en el repositorio y npm ci en CI.
• Render CLI, ffprobe y revisión visual aprobados.
• Errores guardados con comando, props, log, commit y entorno.
• Modelo fijado como claude-opus-5-5.
• Entrada, salida y caché contabilizadas por separado.
• Uno o dos requests síncronos antes de enviar un Batch.
• Respuestas Batch unidas por custom_id.
• Coste del modelo separado del coste del render.

Siguiente paso recomendado

Implementa el mismo brief de ocho segundos una vez en Remotion y otra en HyperFrames. Compara el tiempo hasta el primer MP4 válido, el trabajo para crear la segunda versión y los fallos en diez renders consecutivos. Después elige y añade parámetros, CI y lotes.

Primero demuestra un vídeo reproducible, verificable y parametrizado. Escalar a cien variantes será mucho más sencillo.

Fuentes oficiales

• Claude Opus 5.5
• Precios de Anthropic
• Anthropic Messages API
• Anthropic Message Batches
• Remotion con coding agents
• Remotion CLI render
• Render parametrizado de Remotion
• Depuración de Remotion
• Repositorio oficial de HyperFrames
• Precios actuales de BetterToken