HyperFrames
HyperFrames explained: why an HTML page needs a video clock
Understand how HyperFrames turns HTML and seekable animation into MP4, what reproducibility requires, and when a document-like video workflow is useful.
What you will learn
- A renderer needs explicit frame time, not only an animation that plays.
- Composition timing and animation control are separate but connected contracts.
- Reproducibility includes assets, fonts, data and rendering settings.
Before you start
- Basic HTML, CSS and JavaScript
- Node.js 22+ and FFmpeg for the local exercise
Explain the chapter boundary and use its checklist to evaluate a repeatable video workflow.
Key takeaways
- A renderer needs explicit frame time, not only an animation that plays.
- Composition timing and animation control are separate but connected contracts.
- Reproducibility includes assets, fonts, data and rendering settings.
From a page that plays to a frame you can request
HyperFrames is an open-source framework for authoring video with HTML, CSS, media and seekable animations. The README describes a renderer that positions the composition at a requested time in headless Chrome and encodes captured frames with FFmpeg. The important idea is not simply recording a browser window: a renderer must be able to ask for a particular frame.
A wall-clock animation advances because time passes. A seekable composition instead derives its visible state from an explicit time value. That difference matters when rendering skips ahead, revisits a frame or distributes work. An animation that only looks correct after playing from the beginning is not yet a reliable frame-addressable composition.
HTML supplies structure; timing supplies the video contract
The documented composition uses data attributes to identify the composition, its dimensions, clip start times, durations and track positions. Its GSAP example creates a paused timeline and registers it by composition ID. Those two surfaces connect familiar web authoring with a timeline that the renderer can control.
The project includes several layers: a CLI, core runtime, capture engine, producer, reusable catalog, editor, player and distributed rendering package. You can evaluate a local composition without adopting an editor or a cloud service. Keep authoring assistance, preview and final rendering separate in your mental model; they have different dependencies and failure modes.
Use it where a repeatable visual system helps
An HTML-first approach is attractive for templated product announcements, chart explainers, captions and repeatable motion graphics. A team can review composition source and reuse typography or layout rules. It is less attractive when the main task is hand-editing long footage with fine manual cuts in an established editing application.
The README presents deterministic video as a project objective. In practice, reproducibility also requires fixed assets, fonts, library versions, data and renderer settings. A remotely changing image or a randomly initialized scene can change output even when the HTML file is identical. Treat repeatability as something to verify on a fixture, not a property granted by an MP4 extension.
Implementation steps
- 1
Choose a short repeatable visual rather than a complex editing project.
- 2
Define its dimensions, duration and known visual states.
- 3
Keep dependencies and assets fixed for the first evaluation.
Copy-ready example
<div data-composition-id="intro" data-start="0"
data-width="1920" data-height="1080"
style="width:1920px;height:1080px;background:#101827;color:white">
<h1 class="clip" data-start="0" data-duration="6"
data-track-index="0">A six-second title</h1>
</div>Frequently asked questions
Is this just a screen recorder?
The documented workflow seeks a composition to frame times before capture. That is different from recording whatever a freely running page happens to display.
Does identical HTML guarantee identical video?
Not by itself. Assets, fonts, scripts, data, animation state and renderer configuration also affect the result.
Sources
- Fixed READMESource checked 2026-09-07
- GSAP adapterSource checked 2026-09-07
- Seek dispatcherSource checked 2026-09-07
- Three.js adapterSource checked 2026-09-07
- GSAP testsSource checked 2026-09-07
- Seek dispatcher testsSource checked 2026-09-07