mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 18:01:20 +08:00
Miguel Angel Simon Sierra
c73138633f
Split the animation guide into anime.js default and GSAP adapter paths. Align docs, README, and agent templates on the new registration contract.
136 lines
7.0 KiB
Plaintext
136 lines
7.0 KiB
Plaintext
---
|
|
title: Introduction
|
|
description: "Write HTML. Render video. Built for agents."
|
|
---
|
|
|
|
Hyperframes is an open-source framework that turns HTML into deterministic, frame-by-frame rendered video - so you can define a video the same way you build a web page.
|
|
|
|
## See It in Action
|
|
|
|
Here is a video defined entirely as HTML:
|
|
|
|
```html
|
|
<div id="root" data-composition-id="demo"
|
|
data-start="0" data-width="1920" data-height="1080">
|
|
|
|
<video id="clip-1" data-start="0" data-duration="5"
|
|
data-track-index="0" src="intro.mp4" muted playsinline></video>
|
|
|
|
<h1 id="title" class="clip"
|
|
data-start="1" data-duration="4" data-track-index="1"
|
|
style="font-size: 72px; color: white;">
|
|
Welcome to Hyperframes
|
|
</h1>
|
|
|
|
<audio id="bg-music" data-start="0" data-duration="5"
|
|
data-track-index="2" data-volume="0.5" src="music.wav"></audio>
|
|
</div>
|
|
```
|
|
|
|
Run `npx hyperframes render --output demo.mp4` and this produces an MP4 with deterministic, frame-by-frame capture. Same input, identical output, every time. No timeline editor. No proprietary format. Just HTML.
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Watch the Showcase" icon="play" href="/showcase">
|
|
Finished HyperFrames videos you can watch, read, run, and remix - product launches, website-to-video demos, UI reveals, and VFX experiments.
|
|
</Card>
|
|
<Card title="Browse the Catalog" icon="grid-2" href="/catalog/blocks/data-chart">
|
|
50+ ready-to-use blocks and components - social overlays, shader transitions, data visualizations, and cinematic effects. Install any of them with one command.
|
|
</Card>
|
|
<Card title="Quick Start" icon="rocket" href="/quickstart">
|
|
Go from zero to rendered video in under 5 minutes.
|
|
</Card>
|
|
<Card title="Skills catalog" icon="sparkles" href="/guides/skills">
|
|
Every HyperFrames AI agent skill - router, creation workflows, and domain skills. Install with `npx skills add heygen-com/hyperframes`.
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
## Why Hyperframes?
|
|
|
|
<Tabs>
|
|
<Tab title="For developers">
|
|
**You already know the stack.** Compositions are HTML files with data attributes. Animations use anime.js by default, with GSAP, Lottie, CSS, or any runtime that can seek to a given frame available through adapters. There is no custom DSL, no proprietary component system, and no React requirement. If you can build a web page, you can build a video.
|
|
</Tab>
|
|
<Tab title="For AI agents">
|
|
**Agents already speak HTML.** Most video tools require complex APIs or drag-and-drop interfaces that agents cannot operate. Hyperframes compositions are plain HTML documents - the format LLMs are best at generating. The CLI is non-interactive by default - all inputs via flags, plain text output, fail-fast on errors - so agents can drive every command without prompts or parsing.
|
|
</Tab>
|
|
<Tab title="For automated pipelines">
|
|
**Determinism by design.** The rendering pipeline is seek-driven with no wall-clock dependencies. `frame = floor(time * fps)` - every frame is independently captured via Chrome's `beginFrame` API and encoded with FFmpeg. Same input always produces identical output, making CI testing and batch rendering reliable.
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
<Tip>
|
|
Hyperframes was designed from the ground up for AI agent integration. Compositions are plain HTML that any LLM can generate. The CLI is non-interactive by default - flag-driven with plain text output - so agents can scaffold, render, and lint without interactive prompts. Add `--human-friendly` for the interactive terminal UI. See [CLI](/packages/cli) for details.
|
|
</Tip>
|
|
|
|
## How It Works
|
|
|
|
<Steps>
|
|
<Step title="Write HTML">
|
|
Define your video as an HTML document. Each element gets data attributes for timing (`data-start`, `data-duration`) and layout (`data-track-index`). Add animations with the first-party anime.js adapter, the supported GSAP adapter, Lottie, CSS transitions, or any seekable runtime via the Frame Adapter pattern.
|
|
</Step>
|
|
<Step title="Preview in the browser">
|
|
Run `npx hyperframes preview` to open a live preview in your browser. Edit your HTML and see changes instantly - no build step, no compilation.
|
|
</Step>
|
|
<Step title="Render to MP4">
|
|
Run `npx hyperframes render --output output.mp4` to produce a final video. The engine seeks each frame in headless Chrome, captures it with `beginFrame`, and pipes the result through FFmpeg. Run locally or in Docker for fully reproducible output.
|
|
</Step>
|
|
</Steps>
|
|
|
|
## Packages
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="@hyperframes/core" icon="cube" href="/packages/core">
|
|
Types, HTML parsing, runtime, and composition linter - the foundation everything else builds on.
|
|
</Card>
|
|
<Card title="@hyperframes/sdk" icon="code" href="/packages/sdk">
|
|
Headless composition editing engine for agents, custom editors, patch events, and persistence.
|
|
</Card>
|
|
<Card title="@hyperframes/engine" icon="gear" href="/packages/engine">
|
|
Seekable page-to-video capture engine. Loads HTML in headless Chrome and captures frame-by-frame.
|
|
</Card>
|
|
<Card title="@hyperframes/player" icon="play" href="/packages/player">
|
|
Embeddable web component for playing HyperFrames compositions in any web page.
|
|
</Card>
|
|
<Card title="@hyperframes/producer" icon="video" href="/packages/producer">
|
|
Full rendering pipeline combining capture and FFmpeg encoding into a single API call.
|
|
</Card>
|
|
<Card title="@hyperframes/shader-transitions" icon="sparkles" href="/packages/shader-transitions">
|
|
WebGL shader transitions for scene-to-scene motion and render-time compositing.
|
|
</Card>
|
|
<Card title="@hyperframes/aws-lambda" icon="cloud" href="/packages/aws-lambda">
|
|
AWS Lambda and Step Functions adapter for distributed rendering.
|
|
</Card>
|
|
<Card title="@hyperframes/gcp-cloud-run" icon="cloud" href="/packages/gcp-cloud-run">
|
|
Google Cloud Run and Workflows adapter for distributed rendering.
|
|
</Card>
|
|
<Card title="@hyperframes/studio" icon="palette" href="/packages/studio">
|
|
Visual composition editor UI for building and previewing timelines interactively.
|
|
</Card>
|
|
<Card title="hyperframes (CLI)" icon="terminal" href="/packages/cli">
|
|
Command-line tool for creating, previewing, and rendering compositions.
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
## Next Steps
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Showcase" icon="play" href="/showcase">
|
|
Get inspired by finished videos and production launch projects.
|
|
</Card>
|
|
<Card title="Quickstart" icon="rocket" href="/quickstart">
|
|
Build and render your first video in 60 seconds
|
|
</Card>
|
|
<Card title="Skills catalog" icon="sparkles" href="/guides/skills">
|
|
Every HyperFrames AI agent skill - router, creation workflows, and domain skills
|
|
</Card>
|
|
<Card title="Compositions" icon="layer-group" href="/concepts/compositions">
|
|
Understand the HTML-based data model behind every video
|
|
</Card>
|
|
<Card title="anime.js Animation" icon="wand-magic-sparkles" href="/guides/anime-animation">
|
|
Add timeline-driven animations with the first-party default engine
|
|
</Card>
|
|
<Card title="Rendering" icon="film" href="/guides/rendering">
|
|
Render locally, in Docker, or in a CI pipeline
|
|
</Card>
|
|
</CardGroup>
|