> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-codex-docs-human-first-refactor.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Deterministic Rendering

> Make every frame depend on the playhead, not the wall clock.

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:

```bash theme={null}
npx hyperframes lint
npx hyperframes check
```

## 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:

```bash theme={null}
npx hyperframes render --docker --output output.mp4
```

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](/concepts/frame-adapters) for the interface and a complete example.

## Continue

<CardGroup cols={2}>
  <Card title="Render a composition" icon="film" href="/guides/rendering">
    Choose local, Docker, batch, or cloud rendering.
  </Card>

  <Card title="Improve render performance" icon="gauge-high" href="/guides/performance">
    Understand preview speed, capture cost, and render time.
  </Card>
</CardGroup>