Featured starting point
HyperFrames explained: why an HTML page needs a video clock
Understand how HyperFrames turns HTML and seekable animation into MP4, what reproducibility requires, and when a document-like video workflow is useful.
Browse all 9 articles in this open-source series. Nine guides to HTML video: explicit clocks, local rendering, isolated workers, adapter source code and a frame acceptance gallery.
Featured starting point
Understand how HyperFrames turns HTML and seekable animation into MP4, what reproducibility requires, and when a document-like video workflow is useful.
Suggested learning path
01 → 09
Understand how HyperFrames turns HTML and seekable animation into MP4, what reproducibility requires, and when a document-like video workflow is useful.
Use the documented CLI workflow, understand clip attributes and a paused timeline, and check specific timestamps before attempting a richer video.
Separate a local render from a production job service, package Chrome and FFmpeg dependencies, and plan distributed rendering around immutable inputs.
Map the documented core, engine and producer layers, then inspect animation adapters and GPU completion barriers without inventing an end-to-end runtime trace.
Read the GSAP adapter and shared seek dispatcher at a fixed commit, compare their tests, and understand why a duplicate timestamp sometimes needs a forced render.
Build a quality-aware rendering benchmark that separates frame count, browser work, asset readiness, encoding, concurrency and optional cloud costs.
Design trust boundaries around HTML scripts, remote assets, browser privileges and rendered artifacts before exposing video generation to users.
Evaluate HyperFrames by authoring skills, clock control, revision workflow and output acceptance instead of copying an upstream competitor scorecard.
Design a small reusable motion-graphics project with fixed assets, named states and reviewable outputs; add Three.js only when spatial explanation benefits the viewer.