Use Video
Create, inspect, and revise HyperFrames video compositions inside the session that owns them.
The Video surface is for HyperFrames-based compositions. A video project stays session-owned: the editable composition lives at video/<session-id>/index.html. This avoids a design session or unrelated conversation accidentally editing the wrong video project.
The session owns the playable composition, timeline structure, variables, and local assets.
- 01Script
Define the message, duration, aspect ratio, and scene sequence.
- 02Composition
Generate or open the session video index and its local assets.
- 03Variables
Expose safe text, color, enum, or media inputs for revision.
- 04Timeline
Preview and refine scenes without opening a second preview server.
Describe an actual video outcome
Start with information that controls the composition rather than only naming a style:
Create a 12-second 16:9 launch video.
Use three scenes: problem, product action, final call to action.
Keep the headline and accent color editable.
Use the assets in ./launch-assets and do not open another browser preview server.
Declare composition variables
Video templates use a non-empty data-composition-variables list on the root HTML element. Variables are the contract between the template, Video Studio, and the running composition.
<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="12">
<section id="scene-intro" data-start="0" data-duration="4">
<h1 data-var-text="title">Product Reveal</h1>
</section>
</div>
</body>
</html>
Scalar values become CSS variables on the composition root. Use data-var-text for text bindings and data-var-src for media bindings. An enum variable must also declare its allowed options.
Validate the composition
Before packaging a reusable video template, run the project’s strict structural check from the template directory:
npx --yes hyperframes@0.7.52 check . --strict --at-transitions
Keep assets in the composition package and use the embedded preview that iPolloWork owns. The same package can then be prepared as an .ipwt archive in Author a video template.