mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
style: apply oxfmt formatting to markdown files
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
James
@@ -55,13 +55,13 @@ Preview instantly in the browser. Render to MP4 locally. Let AI agents compose v
|
||||
|
||||
## Packages
|
||||
|
||||
| Package | Description |
|
||||
|---------|-------------|
|
||||
| [`hyperframes`](packages/cli) | CLI — create, preview, lint, and render compositions |
|
||||
| [`@hyperframes/core`](packages/core) | Types, parsers, generators, linter, runtime, frame adapters |
|
||||
| [`@hyperframes/engine`](packages/engine) | Seekable page-to-video capture engine (Puppeteer + FFmpeg) |
|
||||
| [`@hyperframes/producer`](packages/producer) | Full rendering pipeline (capture + encode + audio mix) |
|
||||
| [`@hyperframes/studio`](packages/studio) | Browser-based composition editor UI |
|
||||
| Package | Description |
|
||||
| -------------------------------------------- | ----------------------------------------------------------- |
|
||||
| [`hyperframes`](packages/cli) | CLI — create, preview, lint, and render compositions |
|
||||
| [`@hyperframes/core`](packages/core) | Types, parsers, generators, linter, runtime, frame adapters |
|
||||
| [`@hyperframes/engine`](packages/engine) | Seekable page-to-video capture engine (Puppeteer + FFmpeg) |
|
||||
| [`@hyperframes/producer`](packages/producer) | Full rendering pipeline (capture + encode + audio mix) |
|
||||
| [`@hyperframes/studio`](packages/studio) | Browser-based composition editor UI |
|
||||
|
||||
## Documentation
|
||||
|
||||
|
||||
+12
-10
@@ -12,15 +12,15 @@ npm install @hyperframes/core
|
||||
|
||||
## What's inside
|
||||
|
||||
| Module | Description |
|
||||
|--------|-------------|
|
||||
| **Types** | `TimelineElement`, `CompositionSpec`, `Asset`, canvas dimensions, defaults |
|
||||
| **Parsers** | `parseHtml` — extract timeline elements from HTML; `parseGsapScript` — parse GSAP animations |
|
||||
| **Generators** | `generateHyperframesHtml` — produce valid Hyperframes HTML from a composition spec |
|
||||
| **Compiler** | `compileTimingAttrs` — resolve `data-start` / `data-duration` into absolute times |
|
||||
| **Linter** | `lintHyperframeHtml` — validate Hyperframes HTML (missing attributes, overlapping tracks, etc.) |
|
||||
| **Runtime** | IIFE script injected into the browser — manages seek, media playback, and the `window.__hf` protocol |
|
||||
| **Frame Adapters** | Pluggable animation drivers (GSAP, Lottie, CSS, or custom) |
|
||||
| Module | Description |
|
||||
| ------------------ | ---------------------------------------------------------------------------------------------------- |
|
||||
| **Types** | `TimelineElement`, `CompositionSpec`, `Asset`, canvas dimensions, defaults |
|
||||
| **Parsers** | `parseHtml` — extract timeline elements from HTML; `parseGsapScript` — parse GSAP animations |
|
||||
| **Generators** | `generateHyperframesHtml` — produce valid Hyperframes HTML from a composition spec |
|
||||
| **Compiler** | `compileTimingAttrs` — resolve `data-start` / `data-duration` into absolute times |
|
||||
| **Linter** | `lintHyperframeHtml` — validate Hyperframes HTML (missing attributes, overlapping tracks, etc.) |
|
||||
| **Runtime** | IIFE script injected into the browser — manages seek, media playback, and the `window.__hf` protocol |
|
||||
| **Frame Adapters** | Pluggable animation drivers (GSAP, Lottie, CSS, or custom) |
|
||||
|
||||
## Frame Adapters
|
||||
|
||||
@@ -43,7 +43,9 @@ import type { FrameAdapter } from "@hyperframes/core";
|
||||
const myAdapter: FrameAdapter = {
|
||||
id: "my-adapter",
|
||||
getDurationFrames: () => 300,
|
||||
seekFrame: (frame) => { /* seek your animation */ },
|
||||
seekFrame: (frame) => {
|
||||
/* seek your animation */
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
+11
-11
@@ -18,17 +18,17 @@ The engine opens your HTML composition in a headless Chrome instance, seeks fram
|
||||
|
||||
### Key services
|
||||
|
||||
| Service | Description |
|
||||
|---------|-------------|
|
||||
| **browserManager** | Launches and pools headless Chrome instances (`chrome-headless-shell`) |
|
||||
| **frameCapture** | Manages capture sessions — seek, screenshot, buffer lifecycle |
|
||||
| **screenshotService** | BeginFrame-based capture with CDP (Chrome DevTools Protocol) |
|
||||
| **chunkEncoder** | FFmpeg encoding with chunked concat, GPU detection, faststart |
|
||||
| **streamingEncoder** | Pipe frames to FFmpeg in real time (no intermediate PNGs on disk) |
|
||||
| **audioMixer** | Parse `<audio>` elements and mix audio tracks via FFmpeg |
|
||||
| **videoFrameExtractor** | Extract frames from `<video>` elements for compositing |
|
||||
| **parallelCoordinator** | Split frame ranges across worker processes |
|
||||
| **fileServer** | Serve local HTML files to the browser via Hono |
|
||||
| Service | Description |
|
||||
| ----------------------- | ---------------------------------------------------------------------- |
|
||||
| **browserManager** | Launches and pools headless Chrome instances (`chrome-headless-shell`) |
|
||||
| **frameCapture** | Manages capture sessions — seek, screenshot, buffer lifecycle |
|
||||
| **screenshotService** | BeginFrame-based capture with CDP (Chrome DevTools Protocol) |
|
||||
| **chunkEncoder** | FFmpeg encoding with chunked concat, GPU detection, faststart |
|
||||
| **streamingEncoder** | Pipe frames to FFmpeg in real time (no intermediate PNGs on disk) |
|
||||
| **audioMixer** | Parse `<audio>` elements and mix audio tracks via FFmpeg |
|
||||
| **videoFrameExtractor** | Extract frames from `<video>` elements for compositing |
|
||||
| **parallelCoordinator** | Split frame ranges across worker processes |
|
||||
| **fileServer** | Serve local HTML files to the browser via Hono |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -47,14 +47,14 @@ await startServer({ port: 8080 });
|
||||
|
||||
`RenderConfig` controls the render pipeline:
|
||||
|
||||
| Option | Default | Description |
|
||||
|--------|---------|-------------|
|
||||
| `inputPath` | — | Path to the HTML composition |
|
||||
| `outputPath` | — | Output video file path |
|
||||
| `width` | 1920 | Frame width in pixels |
|
||||
| `height` | 1080 | Frame height in pixels |
|
||||
| `fps` | 30 | Frames per second (24, 30, or 60) |
|
||||
| `quality` | `"standard"` | Encoder preset (`"draft"`, `"standard"`, `"high"`) |
|
||||
| Option | Default | Description |
|
||||
| ------------ | ------------ | -------------------------------------------------- |
|
||||
| `inputPath` | — | Path to the HTML composition |
|
||||
| `outputPath` | — | Output video file path |
|
||||
| `width` | 1920 | Frame width in pixels |
|
||||
| `height` | 1080 | Frame height in pixels |
|
||||
| `fps` | 30 | Frames per second (24, 30, or 60) |
|
||||
| `quality` | `"standard"` | Encoder preset (`"draft"`, `"standard"`, `"high"`) |
|
||||
|
||||
## How it works
|
||||
|
||||
|
||||
Reference in New Issue
Block a user