Concepts in one page
Composition, timing, and adapters — the three ideas behind HyperFrames, explained on a single screen with a live demo for each.
HyperFrames has three ideas. Read them in order. Skip nothing.
What you'll learn
- What a composition is (and is not)
- How timing flows from a seek event, not a clock
- How adapters let the same HTML target different platforms
Composition
A composition is a single HTML document. The first element with data-width, data-height, and data-duration is the root. Everything outside the root is discarded. Everything inside is rendered.
There is no scene graph, no component tree, no DSL. If the browser can paint it, the renderer can capture it.
Timing
The renderer steps frame by frame from t=0 to t=duration. On each frame it dispatches a hf-seek event on window carrying the current time in seconds. Your job is to update the DOM so it reflects that moment.
This is the opposite of normal browser animation. There is no real-time clock, no requestAnimationFrame, no setInterval. Frame N looks the way it looks because you wrote a function from time to pixels.
Because frames are a pure function of time, the same input always produces the same output. Determinism is not a feature you opt into. It is the consequence of writing your animation this way.
Adapters
One composition, many delivery formats. An adapter is a small wrapper that sets dimensions, safe areas, and platform conventions — captions in TikTok's safe zone, square aspect for Instagram, 16:9 for YouTube — without rewriting the inner markup.
In practice the adapter is two lines: set data-width/data-height on the root and toggle a CSS class. The rest of the composition does not know — or care — what platform it is going to.
Putting it together
A composition declares what to render. Timing declares when. Adapters declare where it ships. Master these three and every other concept in HyperFrames is a small refinement on top.