Claude Code

What is the HyperFrames composition contract for deterministic headless video rendering?

Last verified: October 2026 · 2 min read
QUICK ANSWER

The HyperFrames composition contract requires: 1) a single paused master GSAP timeline registered on window.__timelines, 2) total elimination of non-deterministic functions like Math.random() or performance.now(), 3) pre-computed layout constants to prevent getBoundingClientRect() layout thrashing, and 4) discrete clip scoping with data-start and data-duration.

The Four Headless Render Contract Rules

  1. Single Paused Timeline: Instantiate const master = gsap.timeline({ paused: true }); window.__timelines = [master]; so headless Chromium can advance time deterministically via window.__hfSeek(time).
  2. Zero Non-Deterministic Time: Never call Math.random(), Date.now(), or performance.now(). Use seeded PRNG or frame index math (t = frame / fps).
  3. Pre-Computed Spatial Layout: Never invoke getBoundingClientRect() or offsetHeight inside animation loops. Animate GPU transform aliases only (x, y, scale, rotation, skew, opacity).
  4. Discrete Clip Scoping: Wrap scene elements in <div class='clip' data-start='0s' data-duration='4s'> and pass immediateRender: false to sub-tweens.
Verified against: HyperFrames Engine Specifications

Related answers