HyperFrames
HyperFrames architecture: from composition time to a captured frame
Map the documented core, engine and producer layers, then inspect animation adapters and GPU completion barriers without inventing an end-to-end runtime trace.
What you will learn
- Composition scheduling, animation state and capture readiness are separate boundaries.
- Each animation adapter reconciles its library with explicit time.
- Equal timestamps can require another render after resources change.
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
- Composition scheduling, animation state and capture readiness are separate boundaries.
- Each animation adapter reconciles its library with explicit time.
- Equal timestamps can require another render after resources change.
Follow time across distinct layers
The package map assigns parsing, runtime and frame adapters to core; page capture with Puppeteer and FFmpeg to engine; and the complete capture, encoding and audio-mixing pipeline to producer. This is the documented division of responsibilities. It does not mean that every render path performs the same internal calls.
At the composition boundary, clip timing identifies what belongs at a requested point in the video. At the animation boundary, an adapter must put a library into the corresponding state. At the capture boundary, that state must be ready before an image is recorded. Separating these boundaries helps explain a correct timestamp that still produces an incomplete frame.
Adapters reconcile library clocks with requested time
In the inspected GSAP adapter, seek obtains the current timeline, pauses it and derives a non-negative time using numeric coercion with a zero fallback. When totalTime exists, it first makes a small suppressed adjustment and then sets the exact time. Otherwise it uses the timeline’s seek method. This is a library-specific rendering accommodation, not a generic sleep before capture.
The inspected Three.js adapter writes the requested time to window.__hfThreeTime and dispatches an hf-seek event. It also checks a compatible loading-manager shape and exposes a readiness promise while observed items remain pending. This source observation does not establish that every third-party loader or custom GPU task automatically participates.
Readiness is a separate contract from clock position
The shared seek dispatcher lets a synchronous event listener register a promise through detail.waitUntil. waitForSeekCompletion drains registered work and propagates a retained rejection. A composition that starts asynchronous GPU work should register that work during the event callback; discovering the promise later is not the same contract.
The dispatcher also provides a forced same-time event. Its source comment explains a use case where video frames are injected after an initial GPU render and textures need another render at the same time. The architecture lesson is that equal timestamps do not necessarily mean equal resource state. This chapter inspects adapter contracts, not every engine stage.
Implementation steps
- 1
Map the core, engine and producer responsibilities in the README.
- 2
Read the GSAP and Three.js seek implementations at the cited commit.
- 3
Trace hf-seek registration into the completion barrier.
- 4
Distinguish inspected adapter behavior from uninspected engine internals.
Copy-ready example
Composition timing
-> requested animation state
-> library adapter / hf-seek
-> registered readiness work
-> frame capture
-> encoding and audio pipeline
Documented layer map + inspected adapter contracts; not a measured trace.Frequently asked questions
Is setting the correct time enough to capture a GPU scene?
Not always. Assets or asynchronous GPU work may still be pending. The inspected dispatcher provides a separate completion mechanism.
Does this chapter inspect the whole renderer?
No. It combines the documented package map with direct inspection of three adapter files, and states that boundary explicitly.
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