pn-html-to-video

HTML-to-video (programmatic video)

When to use

• Repeatable marketing cuts, plugin demos, changelog videos, social variants where same input = identical output is a requirement.
• Data-driven explainers: chart races, annotated screen recordings, caption-synced narration.
• You own the visual — it is an HTML/CSS/JS layout you authored, not a model-generated scene.
• Animation runtime is already GSAP, Lottie, CSS, or Three.js and you want to record it frame-accurately.

Use pn-generative-video-pipelines instead when the scene must be invented by a model (characters, environments, stylized footage) and some frame-to-frame variation is acceptable.

Stack comparison

Choose Hyperframes when the agent is authoring compositions autonomously (non-interactive CLI, catalog hyperframes add), or when the composition is HTML-first. Choose Remotion when the codebase is already React and the team prefers component-based composition. Choose Motion Canvas when the animation is diagram- or explainer-heavy with precise timing control.

HTML composition contract

All three tools share a similar concept: a stage with timed clips. The canonical attributes (illustrated via Hyperframes) are:

<!-- Stage declares composition identity and dimensions -->
<div id="stage"
     data-composition-id="my-video"
     data-start="0"
     data-width="1920"
     data-height="1080">

  <!-- Video clip on track 0 -->
  <video
    id="clip-1"
    data-start="0"
    data-duration="5"
    data-track-index="0"
    src="intro.mp4"
    muted playsinline>
  </video>

  <!-- Image overlay on track 1, appears at 2s -->
  <img
    id="overlay"
    class="clip"
    data-start="2"
    data-duration="3"
    data-track-index="1"
    src="logo.png">

  <!-- Audio bed on track 2 at 50% volume -->
  <audio
    id="bg-music"
    data-start="0"
    data-duration="9"
    data-track-index="2"
    data-volume="0.5"
    src="music.wav">
  </audio>
</div>