HyperFrames Render Pipeline

Source — index.html
<!-- Composition HyperFrames -->
<div id="root"
     data-composition-id="main"
     data-start="0"
     data-duration="15"
     data-width="1080"
     data-height="1920">

  <div id="title" class="clip"
       data-start="0.5"
       data-duration="5"
       data-track-index="1">
    Vibe Code Your Video
  </div>

  <div id="sub" class="clip"
       data-start="1.5"
       data-duration="4"
       data-track-index="1">
    Write HTML. Animate with GSAP.
  </div>

  <div id="cta" class="clip"
       data-start="2.5"
       data-duration="12"
       data-track-index="1">
    Render → MP4
  </div>

</div>

<script>
  window.__timelines = {};
  const tl = gsap.timeline({
    paused: true  // ← critique
  });
  tl.from("#title", {
    opacity: 0, y: 60,
    duration: 0.9
  }, 0.5);
  window.__timelines["main"] = tl;
</script>
Init
→
Compose
→
Preview
→
Lint
→
Render
$ npx hyperframes render
Puppeteer: launching Chrome headless-shell
Frame 0-449 / 450 (30fps × 15s)  ████████████████████ 100%
FFmpeg: encoding... done
Audio: muxed

✅ Rendered: out/main.mp4 (2.4 MB, 1080×1920, 15s)

Vibe Code
Your Video

Write HTML. Animate with GSAP. Render to MP4. Built for AI agents and automated pipelines.

01HTML-native — no React, no DSL

02GSAP timelines — deterministic seeking

03Puppeteer + FFmpeg → MP4

Start free →

0.0s

Scena × HyperFrames