¿Cómo funciona la exportación a MP4 de Canvas y HTML?

Utiliza la API WebCodecs nativa del navegador combinada con un codificador acelerado por GPU (VideoEncoder) y mp4-muxer. Si el código implementa seekTo(t), renderiza cada fotograma de forma determinista a 60 FPS sin perder frames.

¿Por qué no tiene CAPTCHAs ni publicidad como otros sitios?

A diferencia de sitios como onlineviewer, nuestra herramienta corre 100% en tu navegador y no sube tu código a ningún servidor ni crea URLs públicas compartibles, eliminando riesgos de phishing o abuso de bots.

Muss ich ein Programm installieren?

Nein. Der Editor läuft direkt in einem kompatiblen Desktop-Browser.

Welchen Browser brauche ich?

Wir empfehlen die neueste Version von Chrome oder Edge mit aktiviertem WebGPU und Hardwarebeschleunigung.

Kann ich mit Dateien von meinem Rechner arbeiten?

Ja. Du kannst eine Bibliothek auf deinem Rechner auswählen, um Projekte zu organisieren, zu öffnen und zu erstellen.

Funktioniert der Editor auf Telefonen?

Die aktuelle Version ist für Desktop-Computer mit Maus, Tastatur und großem Bildschirm optimiert.

Mini Remotion en el Navegador • Exportación 60 FPS

Reproductor Canvas & HTML a Video MP4
para Animaciones con IA

Pega tu código de Canvas 2D, Three.js, WebGL o animaciones generadas con ChatGPT, Claude y Gemini. Visualiza en tiempo real, controla la línea de tiempo y exporta a MP4 a 60 FPS acelerado por tu GPU.

Mis Plantillas (0):No tienes plantillas guardadas aún.

Formato de Lienzo:

60 FPS

Código HTML & Scripts (Aprovechamiento Horizontal Completo)20210 caracteres

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🔴 ERROR ROJO - Dopamine Bouncing AAA</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      background: #020309;
      overflow: hidden;
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }
    canvas {
      width: 100%;
      height: 100%;
      display: block;
      transition: transform 0.08s ease-out;
    }
    canvas.shake {
      animation: shakeAnim 0.5s cubic-bezier(.36,.07,.19,.97) both;
    }
    @keyframes shakeAnim {
      0%,100% { transform: translate(0,0) rotate(0); }
      10% { transform: translate(-8px,-6px) rotate(-1deg); }
      20% { transform: translate(10px,8px) rotate(1deg); }
      30% { transform: translate(-12px,4px) rotate(-0.5deg); }
      40% { transform: translate(9px,-7px) rotate(0.5deg); }
      50% { transform: translate(-6px,10px) rotate(-0.3deg); }
      60% { transform: translate(7px,-5px) rotate(0.3deg); }
      70% { transform: translate(-4px,3px) rotate(0); }
      80% { transform: translate(3px,-4px) rotate(0); }
      90% { transform: translate(-2px,2px) rotate(0); }
    }
  </style>
</head>
<body>
  <canvas id="c"></canvas>
  <script>
    const canvas = document.getElementById('c');
    const ctx = canvas.getContext('2d');
    let DURATION = 15.0;
    let isSeeking = false;
    let startLive = performance.now();

// ==========================================================
    // 🔊 AUDIO SYSTEM - Ping musical + Alarma de ERROR ROJO
    // ==========================================================
    let audioCtx = null;
    let lastPingTime = -1;
    let lastAlarmTime = -1;
    const PENTATONIC = [523.25, 659.25, 783.99, 1046.50, 1318.51, 1567.98, 1760.00];

function resumeAudio() {
      if (audioCtx && audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
    }

function triggerPing(noteIndex = 0) {
      if (isSeeking) return;
      initAudio();
      resumeAudio();
      if (!audioCtx) return;
      const now = audioCtx.currentTime;
      if (now - lastPingTime < 0.035) return;
      lastPingTime = now;

try {
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        const freq = PENTATONIC[noteIndex % PENTATONIC.length];
        osc.type = 'sine';
        osc.frequency.setValueAtTime(freq, now);
        gain.gain.setValueAtTime(0.25, now);
        gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.4);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start(now);
        osc.stop(now + 0.45);
      } catch(e) {}
    }

function triggerErrorAlarm() {
      if (isSeeking) return;
      initAudio();
      resumeAudio();
      if (!audioCtx) return;
      const now = audioCtx.currentTime;
      if (now - lastAlarmTime < 0.3) return;
      lastAlarmTime = now;

try {
        for (let i = 0; i < 3; i++) {
          const osc = audioCtx.createOscillator();
          const gain = audioCtx.createGain();
          osc.type = 'square';
          osc.frequency.setValueAtTime(200, now + i * 0.07);
          osc.frequency.setValueAtTime(130, now + i * 0.07 + 0.035);
          gain.gain.setValueAtTime(0, now + i * 0.07);
          gain.gain.linearRampToValueAtTime(0.2, now + i * 0.07 + 0.01);
          gain.gain.exponentialRampToValueAtTime(0.001, now + i * 0.07 + 0.07);
          osc.connect(gain);
          gain.connect(audioCtx.destination);
          osc.start(now + i * 0.07);
          osc.stop(now + i * 0.07 + 0.09);
        }
        const bass = audioCtx.createOscillator();
        const bassGain = audioCtx.createGain();
        bass.type = 'sawtooth';
        bass.frequency.setValueAtTime(58, now);
        bassGain.gain.setValueAtTime(0.38, now);
        bassGain.gain.exponentialRampToValueAtTime(0.001, now + 0.45);
        bass.connect(bassGain);
        bassGain.connect(audioCtx.destination);
        bass.start(now);
        bass.stop(now + 0.5);
      } catch(e) {}
    }

function resize() {
      canvas.width = window.innerWidth * (window.devicePixelRatio || 1);
      canvas.height = window.innerHeight * (window.devicePixelRatio || 1);
    }
    window.addEventListener('resize', resize);
    resize();

// ==========================================================
    // 🎨 PALETA DE COLORES SÓLIDOS (OPACIDAD 1.0)
    // ==========================================================
    const PALETTE = [
      '#00f5ff', // Cyan Neón
      '#ff0077', // Magenta Intenso
      '#39ff14', // Verde Eléctrico
      '#ffe600', // Amarillo Sol
      '#a855f7', // Violeta Deep
      '#ff5500', // Naranja Fuego
      '#00e5ff', // Aqua Neón
      '#ff0055', // Rosa Fucsia
      '#76ff03', // Lima Neón
    ];

// ==========================================================
    // ⚙️ MOTOR FÍSICO INFINITO (Sin límite de duración)
    // ==========================================================
    function simulatePhysics(targetT, w, h) {
      const cx = w / 2;
      const cy = h / 2;
      const R = Math.min(w, h) * 0.39;
      const ballR = Math.max(5, Math.min(w, h) * 0.013);
      const gapSize = 0.36; // Apertura adecuada (~20.6°)
      const ringSpeed = 0.62; // Giro del anillo
      const speed = Math.min(w, h) * 0.78; // Velocidad de rebote

const dt = 1 / 120;
      const totalSteps = Math.floor(Math.max(0, targetT) / dt);

let roundIndex = 0;
      let roundStartTime = 0;
      let escapedCount = 0;
      let lastEscapeEvent = null;

// Estado inicial
      let ball = {
        x: cx + 24,
        y: cy - 16,
        vx: Math.cos(0.92) * speed,
        vy: Math.sin(0.92) * speed,
        bounces: 0,
        escaped: false,
        escapeTime: -1,
        escapePos: null,
        trail: [{ x: cx + 24, y: cy - 16 }],
        scale: 1,
      };

for (let s = 0; s <= totalSteps; s++) {
        const tCurrent = s * dt;
        const gapCenter = (tCurrent * ringSpeed) % (Math.PI * 2);
        const gapStart = gapCenter - gapSize / 2;
        const gapEnd = gapCenter + gapSize / 2;

// Respawn de nueva ronda con nuevo color tras escapar
        if (ball.escaped && tCurrent - ball.escapeTime >= 1.4) {
          roundIndex++;
          roundStartTime = tCurrent;
          const newAngle = (roundIndex * 1.73 + 0.62) % (Math.PI * 2);
          const startDist = 20;
          const sx = cx + Math.cos(newAngle + 1.3) * startDist;
          const sy = cy + Math.sin(newAngle + 1.3) * startDist;
          ball = {
            x: sx,
            y: sy,
            vx: Math.cos(newAngle) * speed,
            vy: Math.sin(newAngle) * speed,
            bounces: 0,
            escaped: false,
            escapeTime: -1,
            escapePos: null,
            trail: [{ x: sx, y: sy }], // Nueva estela para la nueva ronda
            scale: 2.2,
          };
        }

if (ball.scale > 1.0) {
          ball.scale = Math.max(1.0, ball.scale - dt * 4);
        }

// Mover bola
        ball.x += ball.vx * dt;
        ball.y += ball.vy * dt;

// 🌟 Guardar estela continua SIN LÍMITE DE PUNTOS (basado en distancia para optimizar rendimiento)
        if (ball.trail.length > 0) {
          const last = ball.trail[ball.trail.length - 1];
          const ddx = ball.x - last.x;
          const ddy = ball.y - last.y;
          if (ddx * ddx + ddy * ddy >= 6.0) {
            ball.trail.push({ x: ball.x, y: ball.y });
          }
        }

if (ball.escaped) continue;

// Colisión con círculo interior
        const dx = ball.x - cx;
        const dy = ball.y - cy;
        const dist = Math.sqrt(dx * dx + dy * dy);

if (dist + ballR >= R) {
          let angle = Math.atan2(dy, dx);
          if (angle < 0) angle += Math.PI * 2;

let normGapStart = (gapStart % (Math.PI * 2) + Math.PI * 2) % (Math.PI * 2);
          let normGapEnd = (gapEnd % (Math.PI * 2) + Math.PI * 2) % (Math.PI * 2);
          let inGap = false;

if (normGapStart < normGapEnd) {
            inGap = angle >= normGapStart && angle <= normGapEnd;
          } else {
            inGap = angle >= normGapStart || angle <= normGapEnd;
          }

// 💥 ¡ESCAPE LIBRE POR EL HUECO!
          if (inGap) {
            ball.escaped = true;
            ball.escapeTime = tCurrent;
            ball.escapePos = { x: ball.x, y: ball.y };
            escapedCount++;
            lastEscapeEvent = {
              time: tCurrent,
              pos: { x: ball.x, y: ball.y },
              roundIndex: roundIndex,
            };

if (Math.abs(tCurrent - targetT) < dt * 1.5) {
              triggerErrorAlarm();
              canvas.classList.remove('shake');
              void canvas.offsetWidth;
              canvas.classList.add('shake');
            }
          } else {
            // 🔴 REBOTE CAÓTICO ORGÁNICO
            const nx = dx / dist;
            const ny = dy / dist;
            const dot = ball.vx * nx + ball.vy * ny;

if (dot > 0) {
              let rx = ball.vx - 2 * dot * nx;
              let ry = ball.vy - 2 * dot * ny;

// Desviación caótica calculada que no se repite
              const bounceChaos = Math.sin(ball.bounces * 2.37 + angle * 3.81 + roundIndex * 1.4) * 0.28;
              const cosC = Math.cos(bounceChaos);
              const sinC = Math.sin(bounceChaos);
              const deflX = rx * cosC - ry * sinC;
              const deflY = rx * sinC + ry * cosC;

const deflDot = deflX * nx + deflY * ny;
              if (deflDot < 0) {
                rx = deflX;
                ry = deflY;
              }

const curSpeed = Math.sqrt(rx * rx + ry * ry);
              if (curSpeed > 0) {
                ball.vx = (rx / curSpeed) * speed;
                ball.vy = (ry / curSpeed) * speed;
              }

ball.x = cx + nx * (R - ballR);
              ball.y = cy + ny * (R - ballR);
              ball.bounces++;

if (Math.abs(tCurrent - targetT) < dt * 1.5) {
                triggerPing(ball.bounces);
              }
            }
          }
        }
      }

return {
        ball,
        roundIndex,
        currentColor: PALETTE[roundIndex % PALETTE.length],
        escapedCount,
        lastEscapeEvent,
        R,
        cx,
        cy,
        gapCenter: (targetT * ringSpeed) % (Math.PI * 2),
        gapSize,
        ballR,
      };
    }

// ==========================================================
    // 🎨 RENDER AAA - PINTURA SÓLIDA OPACIDAD 1.0 (SIN TRANSPARENCIAS)
    // ==========================================================
    function render(t) {
      const w = canvas.width;
      const h = canvas.height;
      const {
        ball,
        roundIndex,
        currentColor,
        escapedCount,
        lastEscapeEvent,
        R,
        cx,
        cy,
        gapCenter,
        gapSize,
        ballR,
      } = simulatePhysics(t, w, h);

let errorIntensity = 0;
      let errorDt = 999;
      if (lastEscapeEvent) {
        errorDt = t - lastEscapeEvent.time;
        if (errorDt >= 0 && errorDt < 1.0) {
          errorIntensity = 1 - errorDt / 1.0;
        }
      }

// Fondo oscuro
      ctx.fillStyle = '#020309';
      ctx.fillRect(0, 0, w, h);

// Resplandor ambiental suave del color activo
      const bgGlow = ctx.createRadialGradient(cx, cy, 10, cx, cy, R * 1.4);
      bgGlow.addColorStop(0, 'rgba(0, 245, 255, 0.08)');
      bgGlow.addColorStop(0.6, 'rgba(0, 0, 0, 0)');
      ctx.fillStyle = bgGlow;
      ctx.fillRect(0, 0, w, h);

// ════════════════════════════════════════════════════════
      // 🎨 PINTURA SÓLIDA OPACIDAD 1.0 (COLOR PLANO VIBRANTE)
      // ════════════════════════════════════════════════════════
      if (ball.trail.length >= 2) {
        ctx.save();
        ctx.globalAlpha = 1.0; // 🌟 100% OPACIDAD SÓLIDA
        ctx.strokeStyle = currentColor;
        ctx.lineWidth = Math.max(15, ballR * 3.0);
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.shadowBlur = 0;

ctx.beginPath();
        ball.trail.forEach((pt, idx) => {
          if (idx === 0) ctx.moveTo(pt.x, pt.y);
          else ctx.lineTo(pt.x, pt.y);
        });
        ctx.stroke();
        ctx.restore();
      }

// ════════════════════════════════════════════════════════
      // ⭕ CÍRCULO GIRATORIO CON APERTURA
      // ════════════════════════════════════════════════════════
      const gapStart = gapCenter - gapSize / 2;
      const gapEnd = gapCenter + gapSize / 2;

ctx.save();
      ctx.lineWidth = Math.max(5, Math.min(w, h) * 0.013);

const isRed = errorIntensity > 0.3;
      ctx.strokeStyle = isRed ? '#ff0033' : currentColor;
      ctx.shadowColor = isRed ? '#ff0033' : currentColor;
      ctx.shadowBlur = isRed ? 25 : 18;
      ctx.lineCap = 'round';

ctx.beginPath();
      ctx.arc(cx, cy, R, gapEnd, gapStart + Math.PI * 2);
      ctx.stroke();

// Borde exterior decorativo fino
      ctx.shadowBlur = 0;
      ctx.lineWidth = 1.5;
      ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
      ctx.beginPath();
      ctx.arc(cx, cy, R + 6, gapEnd, gapStart + Math.PI * 2);
      ctx.stroke();
      ctx.restore();

// ════════════════════════════════════════════════════════
      // ⚪ 1 SOLA BOLITA BLANCA PURA
      // ════════════════════════════════════════════════════════
      // Shockwave si acaba de salir
      if (ball.escaped && t - ball.escapeTime < 0.7) {
        const dtEscape = t - ball.escapeTime;
        const flashAlpha = Math.max(0, 1 - dtEscape / 0.7);
        const flashR = ballR * (2.5 + dtEscape * 15);

ctx.save();
        ctx.strokeStyle = `rgba(255, 30, 60, ${flashAlpha})`;
        ctx.lineWidth = 3;
        ctx.shadowColor = '#ff0033';
        ctx.shadowBlur = 20;
        ctx.beginPath();
        ctx.arc(ball.escapePos.x, ball.escapePos.y, flashR, 0, Math.PI * 2);
        ctx.stroke();
        ctx.restore();
      }

// Bolita blanca pura brillante
      ctx.save();
      const currentR = ballR * ball.scale;
      ctx.fillStyle = '#ffffff';
      ctx.shadowColor = '#ffffff';
      ctx.shadowBlur = 14;
      ctx.beginPath();
      ctx.arc(ball.x, ball.y, currentR, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();

// ════════════════════════════════════════════════════════
      // 🔴 PARTÍCULAS DE ERROR ROJO
      // ════════════════════════════════════════════════════════
      if (lastEscapeEvent && errorDt >= 0 && errorDt < 0.9) {
        const particles = getDeterministicParticles(36, Math.floor(lastEscapeEvent.time * 1000));
        ctx.save();
        particles.forEach(p => {
          const px = lastEscapeEvent.pos.x + p.vx * errorDt;
          const py = lastEscapeEvent.pos.y + p.vy * errorDt + 180 * errorDt * errorDt;
          const life = Math.max(0, 1 - errorDt * p.decay);
          if (life > 0) {
            ctx.fillStyle = `rgba(255, ${Math.floor(30 + life * 60)}, 40, ${life})`;
            ctx.shadowColor = '#ff0033';
            ctx.shadowBlur = 12;
            ctx.beginPath();
            ctx.arc(px, py, p.size * life, 0, Math.PI * 2);
            ctx.fill();
          }
        });
        ctx.restore();
      }

// ════════════════════════════════════════════════════════
      // ⚡ FLASH ROJO EN TODA LA PANTALLA
      // ════════════════════════════════════════════════════════
      if (errorIntensity > 0) {
        ctx.save();
        ctx.fillStyle = `rgba(255, 0, 40, ${errorIntensity * 0.32})`;
        ctx.fillRect(0, 0, w, h);
        ctx.restore();
      }

// ════════════════════════════════════════════════════════
      // 🚨 TEXTO GIGANTE "¡ERROR!" AL ESCAPAR
      // ════════════════════════════════════════════════════════
      if (errorIntensity > 0.1) {
        ctx.save();
        const errFontSize = Math.floor(Math.min(w, h) * 0.16);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.font = `900 ${errFontSize}px ui-monospace, monospace`;
        ctx.fillStyle = `rgba(255, 20, 40, ${errorIntensity})`;
        ctx.shadowColor = '#ff0033';
        ctx.shadowBlur = 30;

const jitter = errorIntensity * 4;
        const ox = Math.sin(t * 50) * jitter;
        const oy = Math.cos(t * 60) * jitter;
        ctx.fillText('¡ERROR!', cx + ox, cy + oy);

const subFontSize = Math.floor(errFontSize * 0.32);
        ctx.font = `700 ${subFontSize}px ui-monospace, monospace`;
        ctx.fillStyle = `rgba(255, 120, 120, ${errorIntensity * 0.9})`;
        ctx.fillText('SE ESCAPÓ LA BOLA', cx + ox, cy + oy + errFontSize * 0.65);
        ctx.restore();
      }

// ════════════════════════════════════════════════════════
      // 🏷️ HUD VIRAL DE PODCAST
      // ════════════════════════════════════════════════════════
      const fontSize = Math.floor(Math.min(w, h) * 0.038);
      ctx.save();
      ctx.textAlign = 'center';
      ctx.textBaseline = 'top';

ctx.shadowBlur = 0;
      ctx.font = `700 ${Math.floor(fontSize * 0.65)}px ui-monospace, monospace`;
      ctx.fillStyle = currentColor;
      ctx.fillText('⚡ 1 BOLA BLANCA · PINTURA INFINITA · LOOP', cx, Math.max(16, h * 0.04) + fontSize * 1.3);
      ctx.restore();

// Viñeta
      ctx.save();
      const vg = ctx.createRadialGradient(cx, cy, R, cx, cy, Math.max(w, h) * 0.8);
      vg.addColorStop(0, 'rgba(0,0,0,0)');
      vg.addColorStop(1, 'rgba(0,0,0,0.5)');
      ctx.fillStyle = vg;
      ctx.fillRect(0, 0, w, h);
      ctx.restore();
    }

// ==========================================================
    // 🔧 API DE EXPORTACIÓN DETERMINISTA (60 FPS WebCodecs)
    // ==========================================================
    window.seekTo = function(t) {
      isSeeking = true;
      render(t);
    };

window.getDuration = function() {
      return DURATION;
    };

window.setDuration = function(d) {
      DURATION = d;
    };

window.getMarkers = function() {
      return [
        { time: 0, label: "🟢 Bola 1 (Cyan)", color: "#00f5ff" },
        { time: 3.5, label: "🔴 Error 1", color: "#ff0044" },
        { time: 5.0, label: "🌸 Bola 2 (Magenta)", color: "#ff0077" },
        { time: 8.5, label: "🔴 Error 2", color: "#ff0044" },
        { time: 10.0, label: "🍏 Bola 3 (Verde)", color: "#39ff14" },
        { time: 15.0, label: "🔄 Loop Infinito", color: "#a855f7" }
      ];
    };

function liveLoop(now) {
      if (!isSeeking) {
        render((now - startLive) / 1000);
        requestAnimationFrame(liveLoop);
      }
    }
    requestAnimationFrame(liveLoop);

document.addEventListener('click', () => {
      initAudio();
      resumeAudio();
    }, { once: true });
  </script>
</body>
</html>

00:00

04:00s

2 Pistas

DAW

0.0s

1.0s

2.0s

3.0s

4.0s

5.0s

Lienzo Canvas / WebGL (60 FPS)

4.00s

Render Determinista 60 FPS

Si implementas seekTo(t), el motor avanza cuadro por cuadro de forma matemática. Nunca perderás fotogramas ni habrá tirones por lentitud de la CPU.

100% Privado en tu Equipo

Cero servidores intermediarios. Tu código y tus animaciones no se suben a la nube ni generan URLs públicas, garantizando total confidencialidad.

Formatos Listos para Redes

Alterna entre 9:16 (TikTok/Reels/Shorts), 16:9 (YouTube/Cine) y 1:1 (Instagram) para exportar directamente en la relación de aspecto exacta.

Comparativa Técnica

¿Cómo se compara con Remotion o Puppeteer?

Remotion y Motion Canvas son increíbles herramientas de código abierto basadas en Node.js y React, pero requieren instalación y configuración compleja. Nuestro visor es la solución instantánea en el navegador.

Herramienta	Instalación	Renderizado	Uso de IA / Scripts Rápidos	Flujo de Edición
⭐ Nuestro Reproductor Mini Remotion	0 Instalación (Web)	WebCodecs GPU en el Cliente	Pega el HTML y listo	Directo a Editor WebGPU
Remotion (Código Abierto)	Requiere Node.js / React / NPM	SSR / Puppeteer / FFMPEG	Estructura React compleja	Programático
Puppeteer + FFMPEG Server	Servidor Linux dedicado	Lento en CPU de servidor	Configuración de Docker	Sin interfaz visual
Grabación de Pantalla (OBS)	Software de escritorio	Tiempo real (sufre lag si la PC se satura)	Manual	Importar a mano

¿Buscas un software donde pegas HTML y lo editas como video?

Muchos usuarios preguntan si existe un editor de código abierto que tome HTML directamente. Es importante diferenciar dos funciones:

1. Este Reproductor & Renderizador:

Su función es interpretar el HTML, Canvas 2D o Three.js y renderizarlo a un video MP4 limpio sin necesidad de compilar código.

2. Nuestro Editor de Video WebGPU:

Es el editor no lineal completo donde tomas tus videos exportados para cortar, mezclar pistas de audio, añadir subtítulos automáticos y aplicar efectos GPU.

Conocer el Editor de Video WebGPU Principal

Preguntas Frecuentes

Todo lo que necesitas saber sobre el renderizado de Canvas y animaciones web a MP4.

¿Qué librerías de animación son compatibles?

Cualquier librería accesible por CDN: Three.js, Pixi.js, GSAP, Anime.js, Paper.js, Tailwind CSS o código nativo en Canvas 2D y WebGL.

¿Qué pasa si mi código no tiene la función seekTo?

No hay problema. El reproductor detecta que es un HTML estándar y lo reproduce fluidamente en vivo, permitiendo grabar el stream en tiempo real.

¿El archivo de video tiene marcas de agua?

No. La exportación es 100% limpia, sin marcas de agua, sin límites de tiempo y sin publicidad.

¿Cómo paso el video generado al editor de video?

Al terminar la exportación verás el botón "Editar en el Editor WebGPU", que te permite llevar el video directo a la línea de tiempo para agregarle voz o música.

Reproductor Canvas & HTML a Video MP4 para Animaciones con IA