HyperFrames for an AI Producer project

Copyright 2026 HeyGen, Inc. Modifications Copyright 2026 OpusClip. Modified by OpusClip for AIP; see source attribution, license, and changes.

HTML is the video: a composition is an HTML element with data-* timing attributes and one paused GSAP timeline the player drives. AI Producer's editor plays your HTML with its own player, and the export renders it with AI Producer's own pinned HyperFrames; they are two programs with separate playback and editing contracts. This page is the interface those two read, nothing more. What to draw, how it moves, where captions sit and what a moment looks like are your decisions.

What AI Producer accepts

• The project lives under render-engine/: index.html, compositions/*.html, and assets under public/. AI Producer stages public/source.mp4 (the recording) and public/source.mp3 (its audio) and puts GSAP at public/vendor/gsap.min.js; load GSAP from that path.
• The accepted files and upload limits are described in the AI Producer workspace format. Scripts from outside the project are refused, so a composition's logic is inline.
• Split each moment by what it draws. Text, labels, cards, counters, and anything the user may want to retype or restyle are DOM elements animated by GSAP, given real depth with CSS 3D (perspective, 3D rotation, translateZ stacking) rather than laid flat. A 3D object or space, a shader-driven surface, or data too dense for DOM is drawn on a <canvas> from script - Three.js for 3D - under code-drawn layers: the commit refuses a canvas that runs on its own clock or holds a WebGL context outside its window. One moment can mix both, a canvas scene with DOM labels over it. The editor treats a canvas as one leaf, so the user cannot select or restyle what it draws; keep anything they may want to edit in DOM.
• A user's image is staged at public/images/<name> and a user's clip at public/videos/<stem>.mp4, <name> being the filename reduced to ASCII letters, digits, -, _ and . (a space becomes -, anything else is dropped), because other characters change the URL the browser asks for. The hand-back check confirms every file a composition references through src or href is in the tree; a file referenced any other way (data-pip-src, a CSS url(...)) is not seen by it, so stage it in the same upload batch as the composition and confirm it in the listing after the commit.

What the editor recognises in index.html

• The root: <div id="stage" data-composition-id="finecut-root" data-start="0" data-duration="<total s>" data-width="W" data-height="H">. Place this root directly in the document body, not inside a <template>. The id is fixed: the editor seeks the root timeline as window.__timelines["finecut-root"], so a root transition lives on that timeline, and the root creates the registry before any composition registers: