Author a Video template
Package a HyperFrames composition with a stable timeline, local assets, and editor-facing variables.
A video template is a HyperFrames project that opens in the Video surface. Its root entry is always index.html, and its manifest must set both category and surface to video.
Required composition structure
<html data-composition-variables='[
{"id":"title","type":"string","label":"Title","default":"Product Reveal"},
{"id":"accent","type":"color","label":"Accent","default":"#3a9fca"}
]'>
<body>
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="6">
<section id="scene-main" class="clip" data-start="0" data-duration="6" data-track-index="1" style="color: var(--accent)">
<h1 id="title" data-var-text="title">Product Reveal</h1>
</section>
</div>
</body>
</html>
window.__timelines = window.__timelines || {};
window.__timelines.main = gsap.timeline({ paused: true });
Every variable needs an id, type, label, and default. An enum variable also needs its options. Use data-var-text and data-var-src when an editor should bind a variable directly to text or media.
Keep the runtime inside the package
The Video Studio owns the preview. Do not start a second preview server from template instructions. Keep every composition asset inside the package and use relative paths so a copied session can run in isolation.
Run the strict check before import:
npx --yes hyperframes@0.7.52 check . --strict --at-transitions
Release checklist
index.htmlis at the archive root.- The manifest specifies
category: "video"andsurface: "video". data-composition-variablesis non-empty and complete.- Each scene has a stable identifier and timing data.
- Media is local to the package and all paths are relative.
- The strict HyperFrames check passes before import.
- A fresh session copy previews and accepts variable edits correctly.