HyperFrames
Measure HyperFrames render cost by frames, readiness and encoding
Build a quality-aware rendering benchmark that separates frame count, browser work, asset readiness, encoding, concurrency and optional cloud costs.
What you will learn
- Frame count is a workload estimate, not a speed measurement.
- Readiness, capture and encoding need separate observations.
- Compute cost per accepted output with failures and review included.
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
- Frame count is a workload estimate, not a speed measurement.
- Readiness, capture and encoding need separate observations.
- Compute cost per accepted output with failures and review included.
Calculate the workload before comparing speed
For a fixed-rate example, duration multiplied by frames per second gives the nominal frame count. Six seconds at thirty frames per second means 180 requested frame positions. This is arithmetic for a proposed workload, not a measured throughput result. Resolution changes the pixel count per frame, while animation and scene complexity change the work needed to produce it.
Use the same composition, assets, fonts and output settings when comparing environments. Record missing frames, visual mismatches and audio problems as failures rather than excluding them from the report. A faster export that drops a texture or truncates a caption has not completed the same task.
Separate readiness, capture and encoding costs
A browser may be waiting for fonts, media or registered GPU work before a frame is usable. The inspected completion barrier gives a concrete reason why animation-clock time and render latency are different quantities. Measure readiness delays separately where instrumentation permits, and do not call every delay an FFmpeg bottleneck.
Capture and encoding also compete for CPU, memory and I/O. Compare cold runs with runs that reuse an initialized environment, and record the concurrency level. Increasing worker count without observing resource saturation can reduce total useful throughput even when each worker is logically independent.
Include rejection, review and infrastructure in the cost
A useful cost model includes computation, asset transfer, storage and any review needed to accept the output. Cloud-specific prices and limits must come from the selected account and region at deployment time; this article provides no invented price table. Divide total cost by accepted outputs rather than only successful process exits.
Keep a small set of expected frame states alongside the benchmark and report repeated-run distributions with hardware and software versions. The calculator below estimates nominal frame and pixel counts only. It does not estimate compressed video size, GPU work, encoding time or a cloud bill.
Implementation steps
- 1
Fix composition, assets, duration, frame rate and resolution.
- 2
Record cold and warm runs with a stated worker count.
- 3
Check selected frames and audio before accepting output.
- 4
Report distributions and total cost per accepted video.
Copy-ready example
const durationSeconds = 6;
const fps = 30;
const width = 1920;
const height = 1080;
const frames = durationSeconds * fps;
console.log({ frames, nominalPixels: frames * width * height });
// Workload arithmetic only; not a runtime or billing prediction.Frequently asked questions
Can pixel count predict exact render time?
No. Scene complexity, asset readiness, browser behavior, encoding settings and hardware also matter.
Does this article contain a measured speed comparison?
No. It defines a comparable workload and an evaluation method without claiming unperformed benchmark results.
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