Skip to main content
HyperFrames renders by seeking to one frame at a time. A well-authored composition can therefore reproduce the same state whenever the renderer seeks to the same frame. This is what makes a slow animation safe to render: the renderer does not need to play it in real time, and it does not drop frames when a frame takes longer to produce.

​
The rendering model

For each output frame, HyperFrames:
  1. converts the frame number to a time;
  2. seeks the registered animation adapter to that state;
  3. updates time-based media and composition state;
  4. captures the frame;
  5. sends the result to the encoder.
The preview and renderer use the same composition runtime. Preview performance can still depend on your computer, while the final render advances frame by frame.

​
What your composition must control

The frame must be reproducible from its inputs and current time.
  • Use a paused, registered timeline instead of animation driven by requestAnimationFrame.
  • Do not use Date.now() or the current system time.
  • Seed random values instead of calling unseeded Math.random().
  • Keep assets local or make sure they are fully available before rendering.
  • Give the composition a finite duration, dimensions, and frame rate.
  • Make custom frame adapters safe to seek in any order.
Run both checks before a final render:

​
What “repeatable” does not mean

Seek-driven rendering controls time. It does not make different computers identical. Chrome versions, installed fonts, GPU behavior, operating systems, and encoder versions can produce small differences even when the composition is unchanged. If exact reproduction across machines matters, render in the same controlled environment:
Docker reduces environment differences by using a controlled browser, font, and encoder setup. Keep the same assets and render settings as well.

​
For frame-adapter authors

A frame adapter must follow four rules:
  • seeking the same frame twice returns the same state;
  • frames can be requested out of order;
  • no unfinished asynchronous work changes the committed frame later;
  • destroy() leaves no state behind for the next render.
See Frame adapters for the interface and a complete example.

​
Continue

Render a composition

Choose local, Docker, batch, or cloud rendering.

Improve render performance

Understand preview speed, capture cost, and render time.