Crea un estudio de animación de paralaje 2.5D en una sola sesión con Claude Code: 3 fragmentos de código clave para exportar MP4 de forma determinista fotograma a fotograma

Nota del autor: desde la indicación inicial y la fórmula de compensación de profundidad de campo hasta la exportación fotograma a fotograma con Playwright + ffmpeg, aquí está el desglose completo de cómo montar con Claude Code un estudio de animación de paralaje 2.5D que «exporta sin perder fotogramas».

Mucha gente que usa por primera vez un asistente de programación con IA para hacer animaciones se encuentra con lo mismo: en el navegador la vista previa va fluida, pero al exportar el vídeo aparecen tirones, saltos de fotogramas y una duración que no cuadra. El problema suele estar en la arquitectura: desde el principio no se pensó la «exportación» como parte del diseño. Este artículo gira en torno a la idea central de función pura renderAt(t) + captura con seek fotograma a fotograma y explica cómo montar, en una sola sesión de Claude Code, un estudio de animación de paralaje 2.5D y exportar MP4 de forma estable.

Esto no es otra demo de «pídele a la IA que te escriba una animación». Aquí desmenuzamos la derivación de la fórmula de compensación de profundidad de campo, un bug de desplazamiento muy típico y la diferencia de fondo entre la reproducción en tiempo real y la exportación fotograma a fotograma.

Valor principal: al terminar de leerlo tendrás una estructura de indicaciones reutilizable, una cadena de exportación reproducible y una lista de verificación que podrás trasladar a otros proyectos de vídeo programático.

Puntos clave del estudio de animación con parallax 2.5D en Claude Code

La práctica que sirve de referencia viene de un artículo publicado el 2026-11-09. El autor usó Claude Code con Opus 5.5 y, en una sola sesión, creó un estudio en un único archivo HTML, más un script de exportación con Playwright de unas 25 líneas. En el portátil del autor, un vídeo de 6 segundos a 720p (180 fotogramas) se exportó en unos 20 segundos. No indica las especificaciones del equipo, así que ese tiempo solo sirve como orden de magnitud.

El principio del parallax 2.5D

El enfoque 2.5D consiste en colocar recursos 2D planos a distintas profundidades de un espacio 3D y hacer que una cámara virtual los atraviese. Las capas más cercanas a la cámara se mueven rápido y las más lejanas, despacio. El ojo humano interpreta esa diferencia de velocidad como profundidad, y eso es el parallax. En todo el proceso no hay modelado, ni iluminación, ni motor 3D: con perspective y preserve-3d de CSS en el navegador es suficiente.

La diferencia entre un «estudio» y una «animación de un solo uso» está en si tiene completas tres piezas: el grafo de escena, la línea de tiempo y el renderizador determinista. Muchos tutoriales se saltan la tercera, pero es la que decide si el MP4 exportado se verá entrecortado o no. Por eso, al escribir la primera línea de la indicación, conviene dejarla fijada como requisito obligatorio.

Configuración del entorno y del modelo para el estudio 2.5D con Claude Code

El material de referencia recomienda usar Opus 5.5 para la primera construcción. En su resumen de modelos, Anthropic lo presenta como un modelo para «programación con agentes de larga duración y trabajo del conocimiento», con 1M de tokens de contexto y hasta 128K de salida. El precio oficial es de 4 / 20 dólares por millón de tokens de entrada / salida; para el precio real, consulta siempre la página oficial.

Conviene fijar el ID concreto del modelo al arrancar, para evitar que un cambio de alias a mitad del proyecto altere el comportamiento:

claude --model claude-opus-5-5 --effort high

Opus 5.5 usa por defecto un esfuerzo (effort) medio. En la primera construcción, el agente tiene que acertar de una vez con las matemáticas de proyección, el motor de fotogramas clave y el pipeline de exportación, así que lo mejor es subirlo a high. Después, para ajustes pequeños como cambiar valores de fotogramas clave o colores, puedes volver a medium y ahorrar tokens.

El material de referencia no ofrece datos comparativos sobre qué tal funcionan otros modelos en una construcción equivalente ni cuánto cambia el coste. Si quieres cambiar de modelo, lo más sensato es ejecutar la misma indicación con cada uno y comparar punto por punto con el método de validación por fotogramas estáticos que se explica más adelante.

La estructura del prompt para construir un estudio 2.5D con Claude Code

Un prompt bien concreto rinde más que cinco prompts vagos. La especificación de construcción del material de referencia es un único párrafo largo. Esta es una versión que conserva su sentido original:

Build a 2.5D motion studio as one file, studio.html, with no dependencies.
- Scene: 6 layers (sky, moon, hills, city skyline, a title card "Ship it.",
  foreground foliage), each at its own z depth, using CSS perspective and preserve-3d.
- Camera: keyframes for x, y, z (dolly) and yaw (orbit around the card).
- Per-layer tracks: opacity, scale, y. Easings: linear, easeInOutCubic,
  easeInOutSine, easeOutBack.
- A timeline bar with keyframe markers, a playhead, click to scrub, space to play or pause.
- renderAt(t) must be pure in t. Expose window.__seek(t) that resolves after
  the frame paints, and a ?capture mode that hides the UI.
Then write export.mjs: Playwright opens ?capture, seeks every frame at 30 fps,
screenshots it and pipes PNGs to ffmpeg as H.264.

Este prompt se puede dividir en cuatro capas: escena, cámara, pistas con easings e interfaz interactiva, y por último el contrato de exportación. Lo que de verdad marca la diferencia son las dos últimas líneas. Piden que renderAt(t) sea una función pura de t, que se exponga un __seek que solo devuelva el control «cuando el fotograma ya se ha pintado» y que exista un modo ?capture que oculte la interfaz. Así, la capacidad de exportar pasa a ser una restricción de arquitectura, y el agente diseña el código en torno a ella.

Si vas a llevar esto a tu propio proyecto, puedes usar esta estructura como plantilla: primero deja claro «qué dibujar» y, al final, fija en dos o tres líneas «cómo se extraen los fotogramas de forma determinista».

Análisis del código central 2.5D generado por Claude Code

Todo el estudio ronda las 150 líneas, y lo importante está en estas tres partes.

Muestreo de fotogramas clave y suavizado (easing)

Cada pista es un array de fotogramas clave ordenado por tiempo. sample() primero busca los dos fotogramas clave que rodean a t, calcula el progreso con la función de suavizado del fotograma anterior y luego interpola todos los campos numéricos:

function sample(keys, t) {
  if (t <= keys[0].t) return keys[0];
  for (let i = 0; i < keys.length - 1; i++) {
    const a = keys[i], b = keys[i + 1];
    if (t <= b.t) {
      const p = (easings[a.ease] || easings.linear)((t - a.t) / (b.t - a.t));
      const out = {};
      for (const k in b)
        if (typeof b[k] === 'number' && k !== 't') out[k] = a[k] + (b[k] - a[k]) * p;
      return out;
    }
  }
  return keys[keys.length - 1];
}

Esta función no lee la hora actual, no depende del estado del fotograma anterior y tampoco usa números aleatorios. Para un mismo t siempre obtiene el mismo conjunto de valores, y de ahí viene el determinismo de renderAt(t).

Compensación de profundidad: la fórmula central del paralaje 2.5D

La idea es que la cámara no se mueve y es el mundo entero el que se desplaza en sentido contrario. Además de trasladarse en el eje z, cada capa se multiplica por una escala de compensación:

const PERSPECTIVE = 1200; // debe coincidir con la perspective de #viewport
world.style.transform =
  `translate3d(${-cam.x}px, ${-cam.y}px, ${cam.z}px) rotateY(${-cam.yaw}deg)`;
const comp = 1 - L.z / PERSPECTIVE;
el.style.transform = `translate(-50%,-50%) ` +
  `translate3d(${x * comp}px, ${y * comp}px, ${L.z}px) scale(${comp * s})`;

Esta es la derivación. Con una distancia de perspectiva CSS p, un punto a profundidad z (un z negativo significa que se aleja del observador) se proyecta en pantalla escalado por un factor p / (p - z). Si tomamos p = 1200 y z = -900, obtenemos 1200 / 2100 ≈ 0.571, es decir, la capa queda reducida a un 57 % aproximadamente de su tamaño original.

Para compensar esa reducción, multiplicamos por su inverso: (p - z) / p = 1 - z/p = 1 + 900/1200 = 1.75. Ese es el valor de comp en el código. Como 0.571 × 1.75 = 1, con la cámara quieta cada capa aparece con el tamaño y la posición que hayas definido.

¿Y de dónde sale el paralaje? Cuando la cámara se mueve, todo el world se desplaza el mismo dx, pero el desplazamiento de cada capa en pantalla sigue multiplicándose por su propio p/(p - z). Las capas lejanas tienen un coeficiente pequeño, así que se mueven poco; las cercanas tienen un coeficiente grande, así que se mueven mucho. La compensación solo corrige la composición en reposo y no afecta a la diferencia de velocidades durante el movimiento, que es justo lo que da el efecto 2.5D.

(Los valores de la tabla están calculados con p = 1200; las filas de -300 y -1800 son derivaciones de ejemplo.)

Un bug que vale la pena recordar: compensar solo el tamaño, no el desplazamiento

La primera versión del código solo aplicaba scale(comp) a las capas, pero los desplazamientos x/y no se multiplicaban por comp. El resultado: el desplazamiento de las colinas lejanas quedaba comprimido por la perspectiva, la composición se descolocaba por completo y las colinas iban subiendo hasta tapar aproximadamente dos tercios del cielo. La solución es sencilla: multiplicar también x e y por comp, porque la perspectiva escala la posición y el tamaño con el mismo coeficiente.

Lo más interesante es cómo se descubrió el bug. El autor lo detectó al ver un solo fotograma renderizado; leyendo el código no lo había notado. Por eso, antes de fiarte de cualquier movimiento de cámara, pídele al agente que renderice tres imágenes fijas: la del inicio, la del punto medio y la del final.

Exportación determinista fotograma a fotograma de animaciones de paralaje 2.5D a MP4

Diferencias de fondo entre la reproducción en tiempo real y la exportación fotograma a fotograma

La vista previa en tiempo real usa requestAnimationFrame, y cuando la máquina va justa de recursos se pierden fotogramas. En la fase de previsualización es aceptable, pero al exportar no se puede perder ni un fotograma. Si grabas la pantalla, lo que capturas es «lo que casualmente se está mostrando en pantalla en ese instante real», así que si te retrasas un fotograma, el resultado es un fotograma repetido o uno que falta.

Script de exportación mínimo

El tiempo del exportador lo marca el número de fotograma. En cada fotograma se hace primero un seek, se espera a que termine de dibujarse la imagen, se captura y luego se escribe el PNG en la entrada estándar de ffmpeg:

import { chromium } from 'playwright';
import { spawn } from 'node:child_process';
import { pathToFileURL } from 'node:url';

const out = process.argv[2] || 'out.mp4';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
await page.goto(pathToFileURL('studio.html').href + '?capture');

const { duration, fps } = await page.evaluate(() => window.__scene);
const ffmpeg = spawn('ffmpeg', ['-y', '-f', 'image2pipe', '-framerate', String(fps),
  '-i', '-', '-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-crf', '18', out],
  { stdio: ['pipe', 'ignore', 'inherit'] });

const frames = Math.round(duration * fps);
for (let i = 0; i < frames; i++) {
  await page.evaluate(t => window.__seek(t), i / fps);
  ffmpeg.stdin.write(await page.screenshot({ type: 'png' }));
}
ffmpeg.stdin.end();
await new Promise(r => ffmpeg.on('close', r));
await browser.close();

Hay varios detalles que conviene tener en cuenta. window.__seek(t) solo se resuelve después de dos fotogramas de animación, de modo que la captura siempre recoge el transform nuevo. image2pipe hace que ffmpeg lea la secuencia de PNG desde stdin. yuv420p garantiza que el archivo generado se reproduzca sin problemas en el navegador. Si Playwright todavía no tiene el navegador instalado, ejecuta antes una vez npx playwright install chromium.

// Dentro de studio.html: seek determinista, que vuelve después de dibujar dos fotogramas
window.__seek = (t) => new Promise(resolve => {
  renderAt(t);                       // Función pura: depende solo de t
  requestAnimationFrame(() =>
    requestAnimationFrame(resolve)); // Asegura que los estilos se han aplicado y dibujado
});

// stills.mjs: renderiza tres fotogramas fijos (inicio / punto medio / final); primero mira la imagen y luego confía en la cámara
import { chromium } from 'playwright';
import { pathToFileURL } from 'node:url';

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
await page.goto(pathToFileURL('studio.html').href + '?capture');
const { duration } = await page.evaluate(() => window.__scene);

for (const [name, t] of [['start', 0], ['mid', duration / 2], ['end', duration - 1e-3]]) {
  await page.evaluate(t => window.__seek(t), t);
  await page.screenshot({ path: `still-${name}.png` });
}
await browser.close();

Resultados medidos por el autor: 180 fotogramas, 1280×720, 30 fps, duración de 6,0 segundos; el MP4 resultante pesa unos 420 KB y el proceso completo tarda unos 20 segundos. En la imagen, las torres de la ciudad se desplazan menos que las colinas oscuras del primer plano, y estas acaban saliendo por completo del encuadre: eso es justo el efecto de paralaje.

Añadir una función de «describir plano» al estudio 2.5D

El siguiente paso es dejar que el guionista escriba una frase describiendo el plano y que el modelo devuelva un JSON con los fotogramas clave. En el material de referencia se hace llamando directamente a la API Messages de Anthropic:

curl https://api.anthropic.com/v1/messages \
  -H "x-api-key: $ANTHROPIC_API_KEY" \
  -H "anthropic-version: 2026-10-21" \
  -H "content-type: application/json" \
  -d '{
    "model": "claude-opus-5-5",
    "max_tokens": 4096,
    "output_config": { "effort": "low" },
    "system": "Return only JSON: {\"camera\": [{\"t\",\"x\",\"y\",\"z\",\"yaw\",\"ease\"}], \"tracks\": {}}. Times in seconds, 0 to 6.",
    "messages": [{ "role": "user", "content": "Slow push-in, slight orbit right, title fades up in the first second." }]
  }'

Hay dos trampas fáciles de pisar. La primera: effort va dentro de output_config.effort. La segunda: Opus 5.5 usa siempre pensamiento adaptativo, así que si envías thinking: {"type": "disabled"} te devuelve un error 400, y además los tokens de pensamiento cuentan dentro de max_tokens. Si pones un max_tokens demasiado bajo, el JSON se corta a mitad del array y stop_reason será "max_tokens".

Una respuesta truncada, o con texto de más mezclado, hará que sample() falle al renderizar, así que conviene acompañar esta llamada con una prueba de contrato. En el material de referencia se usa Apidog CLI para que la misma sesión de Claude Code cree y ejecute las pruebas, con estas aserciones: código de estado 200, stop_reason distinto de "max_tokens", que el texto devuelto se pueda parsear como JSON y que la t del array camera crezca de 0 a 6. Con otra herramienta de pruebas de API, o con un script de aserciones propio, se consigue lo mismo. Vuelve a ejecutar las pruebas cada vez que cambies la indicación de sistema (system prompt) o el effort, porque ambos modifican lo que devuelve el modelo.

Preguntas frecuentes (FAQ)

Claude Code 2.5D: puntos clave del estudio de animación con paralaje

• La exportación es parte del diseño: en las últimas líneas de la indicación, fija una función pura renderAt(t) y un contrato de seek.
• Fórmula de compensación de profundidad: comp = 1 − z/perspective; hay que multiplicarla tanto por el tamaño como por los desplazamientos x/y.
• De dónde sale el paralaje: la compensación solo corrige la composición estática; cuando hay movimiento, cada capa se muestra con una velocidad distinta según su profundidad.
• Primero mira los fotogramas fijos, luego confía en el movimiento de cámara: tres imágenes (inicio, mitad y final) revelan bugs que no se ven leyendo el código.
• Controla el tiempo por número de fotograma: Playwright hace seek y captura la pantalla; ffmpeg lo codifica en H.264 mediante image2pipe.
• Ajusta el effort por fases: usa high para la primera construcción, medium para los retoques y empieza con low en las interfaces JSON estructuradas.
• Añade pruebas de contrato a la salida del modelo: evitan que un truncado por max_tokens rompa el análisis de los fotogramas clave.

Resumen

Para montar un estudio de animación 2.5D con paralaje usando Claude Code, hay tres ideas centrales:

1. Arquitectura: grafo de escena, línea de tiempo y renderizador determinista. La tercera pieza es la que decide la calidad del vídeo final.
2. Matemáticas: el coeficiente de compensación de perspectiva 1 - z/p actúa a la vez sobre el tamaño y el desplazamiento. En reposo la composición es exacta, y en movimiento el paralaje aparece de forma natural.
3. Pipeline: se hace seek fotograma a fotograma con i/fps, se captura la pantalla y se pasa a ffmpeg para codificar. Así el resultado no depende del rendimiento de la máquina.

Te recomiendo que primero sigas la estructura de indicaciones de este artículo hasta sacar un clip de prueba de 6 segundos, y que adquieras el hábito de «mirar tres fotogramas fijos antes de tocar la cámara». Después puedes añadir más capas, integrar una interfaz de «descripción de plano», o trasladar esta misma idea determinista a otras soluciones de vídeo programático como Remotion.

📚 Referencias

1. How to Build a 2.5D Motion Studio With Opus 5.5: fuente práctica de este artículo
2. Enlace: apidog.com/blog/build-2-5d-motion-studio-opus-5-5

3. Descripción: incluye las indicaciones completas, el código del estudio, el script de exportación y ejemplos de la interfaz «describir plano»

4. Documentación de modelos y effort de Anthropic: posicionamiento del modelo, ventana de contexto, precios y explicación del parámetro effort

5. Enlace: docs.anthropic.com

6. Descripción: sirve para verificar el ID del modelo claude-opus-5-5, la cabecera de versión de la API y el uso de output_config

7. Documentación de formatos de ffmpeg: explicación de formatos de entrada como image2pipe

8. Enlace: ffmpeg.org/ffmpeg-formats.html

9. Descripción: ayuda a entender cómo se lee una secuencia de PNG desde stdin y los parámetros de codificación H.264

10. Documentación de Playwright: automatización del navegador y API de capturas de pantalla

11. Enlace: playwright.dev
12. Descripción: cubre page.evaluate, page.screenshot y el comando de instalación del navegador

Artículos relacionados

• Claude crea vídeos sin depender de modelos de vídeo: 1 función temporal + renderizado fotograma a fotograma en 4 pasos; el principio, explicado de una vez.: Desglosa el funcionamiento completo de Claude para crear vídeos: cada fotograma es una función pura del tiempo seek(t), renderizado fotograma a fotograma en cuatro pasos con un navegador sin interfaz y ffmpeg, resortes de forma cerrada y sincronización con el ritmo para lograr animaciones fluidas, y un proceso práctico de 5 pasos para empezar.