What is HyperFrames?

HyperFrames is an open-source framework for producing video with HTML, CSS, JavaScript and ordinary web assets. A composition describes tracks, clips and timing in HTML; the renderer seeks every animation to an exact timestamp in headless Chromium, captures each frame and sends the result to FFmpeg. The same source can be previewed interactively and rendered into an MP4 without rebuilding the project as a separate video application.

The project is designed for both developers and AI coding agents. Its CLI can initialize a composition, launch a preview server and render the final file. A catalog supplies reusable components, effects and transitions, while a set of agent skills provides structured workflows for product launches, explainers, pull-request summaries, captioning, motion graphics, slideshows and other repeatable video tasks.

HyperFrames separates authoring from rendering. Browser-native layout and graphics handle typography, SVG, Canvas, WebGL and supported animation libraries; the engine controls the timeline; the producer and FFmpeg pipeline handle frames, codecs, audio and output. Packages also cover an embeddable player, Studio, shader transitions and distributed workers for AWS Lambda or GCP Cloud Run.

The repository is moving quickly and remained on the 0.x release line when this profile was checked. Production teams should pin an exact version, keep a representative render suite and review release notes before upgrading. HyperFrames is infrastructure for building a video workflow, not a hosted editor that removes deployment, asset management or render-capacity decisions.

Key capabilities

HTML-first compositions Build scenes with familiar elements, CSS layout, fonts, SVG, Canvas, video and audio. Declarative track and clip timing keeps a composition inspectable by people, coding agents and source-control tools.
Frame-accurate rendering Seek the composition to a known time for every output frame, capture it in headless Chromium and encode it with FFmpeg. This model makes a render reproducible when browser, fonts, media and system dependencies are pinned.
Seekable animation adapters Drive GSAP, CSS animations, Lottie, Three.js, Anime.js, the Web Animations API or a custom adapter from one deterministic timeline rather than letting wall-clock playback decide the final frame.
Video and audio pipeline Combine visual layers with media clips, captions, transitions and a programmable audio chain. Documented audio tools include EQ, compression, limiting, gating, saturation, delay, reverb, chorus, phasing, bit crushing, automation and submixes.
CLI, preview and Studio Start with npx hyperframes init, inspect the result through the local preview and run npx hyperframes render for final output. The evolving Studio adds a graphical workspace while preserving the composition as web code.
Catalog and agent skills Install reusable visual blocks instead of rebuilding every lower third, title treatment or transition. The repository includes specialized skills for scripted explainers, recuts, product videos, music-driven edits and converting Remotion concepts.
Local and distributed execution Render on a workstation, in a pinned Docker environment or through cloud workers. Official packages cover AWS Lambda and GCP Cloud Run patterns, letting teams move heavy jobs away from an interactive development machine.
Composable TypeScript packages Adopt the complete CLI or integrate narrower packages for the core timeline, engine, producer, player, Studio and transitions. Apache 2.0 licensing permits internal and commercial use without a per-render threshold.

Where HyperFrames fits

Agent-generated product and engineering videos

Give a coding agent an HTML-native target it can inspect, modify and test with ordinary repository tools. Product launches, changelog summaries, pull-request walkthroughs and documentation clips can live beside the code that produced them. Human review is still required for factual claims, pacing, branding, accessibility and licensing of supplied media.

Programmatic explainers and content pipelines

Generate many variants from structured data while keeping layout and animation rules in one composition system. This suits release videos, localized captions, customer-specific demos and recurring editorial formats. Validate overflow, font coverage, text duration and asset availability for every generated variant rather than testing only the template.

Deterministic design systems

Package typography, transitions, charts and motion components as reusable catalog items. Pin Chromium, FFmpeg, fonts and dependencies in Docker when exact cross-machine reproducibility matters. Seed randomness, localize remote assets and avoid live network requests during a render so the same source does not silently produce different frames later.

Distributed rendering

Move CPU- and memory-intensive jobs to Lambda or Cloud Run workers when local rendering becomes a bottleneck. Measure cold starts, concurrency, temporary storage, media download time and final upload behavior with real compositions. Apply least-privilege IAM, budget limits and queue backpressure before allowing automated agents to request large batches.

Embedded playback and review

Use the player package to preview compositions or add an approval surface to an internal tool. Compare browser playback with the encoded result: codec support, font loading, GPU behavior, external media and audio synchronization can expose differences that a quick interactive preview does not reveal.