HyperFrames

Render Studio

Convierte una URL en una plantilla editable o pega tu HTML HyperFrames y genera un MP4.

URL publica

Formato actual: 1920x1080. YouTube, web y presentaciones.

HTML HyperFrames

Puedes usar tokens {{WIDTH}} y {{HEIGHT}}. Si hay narracion, se genera como narration.wav.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
</head>
<body style="margin:0;background:#101820;overflow:hidden;">
  <div
    data-composition-id="demo"
    data-start="0"
    data-duration="8"
    data-width="{{WIDTH}}"
    data-height="{{HEIGHT}}"
    style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#101820;color:white;font-family:Arial,sans-serif;overflow:hidden;"
  >
    <div class="panel" style="width:82%;padding:72px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);">
      <p class="label" style="margin:0 0 24px;color:#B38B21;font-size:34px;font-weight:800;text-transform:uppercase;">HyperFrames Render Studio</p>
      <h1 id="title" style="margin:0;font-size:110px;line-height:.95;letter-spacing:0;">Hola Render!</h1>
      <p id="subtitle" style="margin:32px 0 0;max-width:900px;font-size:38px;line-height:1.12;color:#e8ecf0;">Edita este HTML, elige formato y genera un MP4.</p>
    </div>
    <script>
      window.__timelines = window.__timelines || {};
      const tl = gsap.timeline({ paused: true });
      tl.fromTo(".panel", { opacity: 0, y: 70, scale: 0.97 }, { opacity: 1, y: 0, scale: 1, duration: 0.9, ease: "power3.out" }, 0);
      tl.fromTo("#title", { opacity: 0, y: 40 }, { opacity: 1, y: 0, duration: 0.75, ease: "power3.out" }, 0.35);
      tl.fromTo("#subtitle", { opacity: 0, y: 28 }, { opacity: 1, y: 0, duration: 0.65, ease: "power2.out" }, 0.75);
      tl.to(".panel", { scale: 1.025, duration: 6.2, ease: "none" }, 0.9);
      tl.to(".panel", { opacity: 0, y: -40, duration: 0.5, ease: "power2.in" }, 7.35);
      window.__timelines.demo = tl;
    </script>
  </div>
</body>
</html>

Narracion y subtitulos

Este texto se convierte en audio TTS y la plantilla generada ya incluye subtitulos visibles.

Resultado

Preview MP4 y descarga

Aun no hay video

Genera una plantilla desde una URL o pega HTML HyperFrames y pulsa renderizar.