HyperFrames

https://github.com/heygen-com/hyperframes
Admin
HyperFrames is an open-source video rendering framework that lets you create, preview, and render...
Tokens:4,428,734
Snippets:20,000
Trust Score:7.5
License:Apache-2.0
Update:4 days ago
Show doc for...
Tokens:
Raw
### Initialize and preview the path-traced-3d example

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/guides/path-tracing.mdx

Creates a new project from the path-traced-3d example and starts the preview server. The tracer is opt-in; only projects started from this example load it.

```bash
npx hyperframes init my-3d --example path-traced-3d
cd my-3d
npx hyperframes preview
```

--------------------------------

### Install ltx-2-mlx for Local Video Generation

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/media-use/references/setup-providers.md

Clones the ltx-2-mlx repository and installs all extras for local video generation.

```bash
git clone https://github.com/dgrauet/ltx-2-mlx && cd ltx-2-mlx && uv sync --all-extras
```

--------------------------------

### Clone, install, and branch setup

Source: https://github.com/heygen-com/hyperframes/blob/main/CONTRIBUTING.md

Initial setup commands for contributing: clone your fork, install dependencies with bun, and create a feature branch.

```bash
git clone https://github.com/YOUR_USERNAME/hyperframes.git
```

```bash
bun install
```

```bash
git checkout -b my-feature
```

--------------------------------

### Example prompt for HyperFrames in Claude Code

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/guides/plugins.mdx

Example prompt to use after installing the plugin and reloading plugins. Start a new session or run /reload-plugins before trying it.

```text
Using /hyperframes:hyperframes, make a 5-second title card that says "Hello world".
```

--------------------------------

### Install and sign in to HyperFrames

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/media-use/references/setup-providers.md

Run these commands to install the HeyGen CLI and start a dedicated HyperFrames OAuth session. Requires heygen v0.3.0+ and stores credentials in ~/.hyperframes/credentials.

```bash
heygen update                  # requires v0.3.0+
npx hyperframes auth login     # dedicated HyperFrames OAuth session
```

--------------------------------

### Start the inspector server with Bun

Source: https://github.com/heygen-com/hyperframes/blob/main/packages/inspector/README.md

Install dependencies, build required packages, optionally set the Chrome path, and start the server. The service prints its loopback URL and does not start a browser until the first inspection.

```sh
bun install --ignore-scripts
bun run --filter '@hyperframes/{parsers,lint,studio-server}' build
bun run build:hyperframes-runtime
# Optional when Chrome is not already under ~/.cache/hyperframes/chrome:
export HF_INSPECT_CHROME=/absolute/path/to/chrome
bun packages/inspector/src/server.ts /absolute/video/project
```

--------------------------------

### Install parakeet-mlx for Local Transcription

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/media-use/references/setup-providers.md

Sets up a virtual environment and installs parakeet-mlx for local transcription on Apple Silicon. Default ASR provider.

```bash
uv venv ~/.venvs/parakeet && VIRTUAL_ENV=~/.venvs/parakeet uv pip install parakeet-mlx
```

--------------------------------

### npx hyperframes init command examples

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/hyperframes-cli/references/init-and-scaffold.md

Scaffolding commands for creating a new video project. Use these instead of creating files by hand; they set up the right file structure, copy media, and run transcription. Default behavior depends on TTY: in a terminal it prompts for options (default centered blank), outside a TTY it auto-switches to non-interactive and scaffolds the blank. Pass --example to start from a named example, --non-interactive to force flag-only mode on a TTY.

```bash
npx hyperframes init my-video --skip-skills                      # centered blank (TTY: wizard)
npx hyperframes init my-video --skip-skills --example warm-grain # pick an example
npx hyperframes init my-video --skip-skills --resolution portrait
npx hyperframes init my-video --skip-skills --video clip.mp4     # with video file
npx hyperframes init my-video --skip-skills --audio track.mp3    # with audio file
npx hyperframes init my-video --skip-skills --tailwind           # Tailwind v4 browser runtime
npx hyperframes init my-video --skip-skills --non-interactive    # CI — flag-only, same blank
```

--------------------------------

### Install mflux-generate for Local Image Generation

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/media-use/references/setup-providers.md

Creates a virtual environment and installs mflux version 0.9.6 for local FLUX image generation, optimized for RAM.

```bash
uv venv ~/.venvs/mflux && VIRTUAL_ENV=~/.venvs/mflux uv pip install mflux==0.9.6
```

--------------------------------

### Install telemetry-hud with npx

Source: https://github.com/heygen-com/hyperframes/blob/main/registry/components/telemetry-hud/README.md

Install the component using the Hyperframes CLI. This is the first step in the worked example.

```bash
npx hyperframes add telemetry-hud
```

--------------------------------

### Start a batch render

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/deploy/templates-on-lambda.mdx

Starts a batch render. Uploads the project once and returns one manifest row per input line. A failure to start one row does not discard the other started renders.

```bash
hyperframes lambda render-batch ./my-template \
  --batch ./recipients.jsonl \
  --width 1920 \
  --height 1080 \
  --max-concurrent 10
```

--------------------------------

### Initialize the path-traced-3d example

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/hyperframes/references/path-tracing.md

Starts a new Hyperframes project from the path-traced-3d example, which includes a Three.js scene with a raster preview and an opt-in path-traced export.

```bash
npx hyperframes init <dir> --example path-traced-3d
```

--------------------------------

### Install Parakeet Model via HyperFrames CLI

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/media-use/references/setup-providers.md

Installs the Parakeet model for transcription on macOS, Windows, and glibc 2.32+ Linux.

```bash
npx hyperframes models install parakeet
```

--------------------------------

### Install split-flap-board with npx hyperframes add

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/catalog/blocks/split-flap-board.mdx

Installs the split-flap-board composition, writing a single file: compositions/split-flap-board.html.

```bash
npx hyperframes add split-flap-board
```

--------------------------------

### Install, Build, and Test Commands

Source: https://github.com/heygen-com/hyperframes/blob/main/CLAUDE.md

Use bun for dependency installation, building all packages, and running tests. Do not use pnpm; avoid creating pnpm-lock.yaml.

```bash
bun install     # Install dependencies (NOT pnpm — do not create pnpm-lock.yaml)
bun run build   # Build all packages
bun run test    # Run all tests
```

--------------------------------

### Set up Beat This! provider with uv and export Python path

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/packages/cli.mdx

One-time setup for the `beat-this` provider: create a project, add dependencies, download the `small0` checkpoint, and export `HYPERFRAMES_BEAT_THIS_PYTHON` so the CLI can use it. Requires `uv` and a Python with `beat-this` installed.

```bash
uv init --bare ~/.beat-this
uv add --project ~/.beat-this "beat-this @ git+https://github.com/CPJKU/beat_this" torch torchaudio soundfile
~/.beat-this/.venv/bin/python -c "from beat_this.inference import load_checkpoint; load_checkpoint('small0')"
export HYPERFRAMES_BEAT_THIS_PYTHON=~/.beat-this/.venv/bin/python
```

--------------------------------

### Install HyperFrames plugin via Copilot CLI

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/guides/plugins.mdx

Adds the heygen-com/hyperframes marketplace, installs the hyperframes plugin, and lists installed plugins. Start a fresh session and ask Copilot to use the HyperFrames skill; check `/skills list` if the skill is not visible.

```bash
copilot plugin marketplace add heygen-com/hyperframes
copilot plugin install hyperframes@hyperframes
copilot plugin list
```

--------------------------------

### Install shimmer-sweep component

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/hyperframes-registry/examples/add-component.md

Run this command to install the shimmer-sweep component.

```bash
hyperframes add shimmer-sweep
```

--------------------------------

### Install @hyperframes/studio with npm

Source: https://github.com/heygen-com/hyperframes/blob/main/packages/studio/README.md

Install the package using npm. This is the standard installation command for adding the studio to a project.

```bash
npm install @hyperframes/studio
```

--------------------------------

### Install @hyperframes/shader-transitions via npm

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/packages/shader-transitions.mdx

Install the package using npm.

```bash
npm install @hyperframes/shader-transitions
```

--------------------------------

### Install @hyperframes/sdk

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/packages/sdk.mdx

Install the SDK package using npm. This is the first step for using the SDK in your project.

```bash
npm install @hyperframes/sdk
```

--------------------------------

### Set up the repository with git clone and bun install

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/contributing.mdx

Clones the repository, installs dependencies with Bun, and builds the project. Bun is required; do not add a pnpm-lock.yaml or replace bun.lock.

```bash
git clone https://github.com/YOUR_USERNAME/hyperframes.git
cd hyperframes
bun install
bun run build
```

--------------------------------

### List or install on-device models with hyperframes models

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/packages/cli.mdx

Lists installed models or installs Parakeet. Only asked-for installs happen; nothing downloads on first use. The --json flag outputs structured results, and install shows progress on stderr.

```bash
npx hyperframes models list                      # Parakeet and any downloaded whisper models
```

```bash
npx hyperframes models list --json               # { ok, models: [{ engine, model, installed, runner, path }] }
```

```bash
npx hyperframes models install parakeet          # progress on stderr
```

```bash
npx hyperframes models install parakeet --json   # one JSON result
```

--------------------------------

### Initialize and preview a blank HyperFrames project

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/developers/index.mdx

Creates a blank project named 'my-video' and opens it in Studio for preview. Use this to start writing a composition yourself.

```bash
npx hyperframes init my-video --example blank
cd my-video
npx hyperframes preview
```

--------------------------------

### Install HyperFrames on Linux with apt

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/studio-app/index.mdx

Install the .deb package on Debian-based systems. Run in the folder where you downloaded the file.

```bash
sudo apt install ./HyperFrames-amd64*.deb
```

--------------------------------

### Install command for app-showcase

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/catalog/blocks/app-showcase.mdx

Run this command to add the app-showcase composition. It writes a single file: compositions/app-showcase.html.

```bash
npx hyperframes add app-showcase
```

--------------------------------

### npx hyperframes init examples

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/packages/cli.mdx

Scaffold a new composition project. Default uses centered Inter blank; non-TTY skips the wizard. Options: --video for a video file, --tailwind for the Tailwind browser runtime.

```bash
# Default: centered Inter blank. Non-TTY skips the wizard.
npx hyperframes init my-video
```

```bash
# Start from a video file
npx hyperframes init my-video --video video.mp4 --non-interactive
```

```bash
# With the Tailwind browser runtime
npx hyperframes init my-video --tailwind
```

--------------------------------

### Use CodeGroup for multi-platform commands (ffmpeg install)

Source: https://github.com/heygen-com/hyperframes/blob/main/DOCS_GUIDELINES.md

Use CodeGroup for multi-platform commands. This example shows installing ffmpeg on macOS and Ubuntu in a CodeGroup component.

```mdx
```mdx
<CodeGroup>
```bash macOS
brew install ffmpeg
```
```bash Ubuntu
sudo apt install ffmpeg
```
</CodeGroup>
```
```

--------------------------------

### Generate a person video from a still with audio and motion guide

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/media-use/references/heygen.md

Re-shoots a person from a still over one shot of the original, syncing lips and motion to the guide. Use --mask to blank text in the guide; --allow-cuts only after verifying the guide is one shot.

```bash
npx hyperframes media-use generate --type video --reference assets/person.png --audio assets/s02-voice.m4a --motion assets/s02-original.mp4 --mask 110,615,390,165,0.4-2.0 --prompt "talks to camera, seated" --seconds 8 --aspect 9:16 --out assets/s02-person.mp4
```

--------------------------------

### Start Studio with bun run dev

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/contributing.mdx

Starts the Studio development server. It listens on http://localhost:5190 when run from the monorepo.

```bash
bun run dev
```

--------------------------------

### Boot Sequence and Render Loop

Source: https://github.com/heygen-com/hyperframes/blob/main/registry/blocks/code-3d-extrude/code-3d-extrude.html

Initializes the renderer, scene, camera, and timeline, then starts the render loop and handles page unload cleanup.

```JavaScript
function go() { var spec = window.__BLOCK; var root = document.getElementById("root"); var glcanvas = document.getElementById("gl"); var W = 1920; var H = 1080; window.__timelines = window.__timelines || {}; var tl = gsap.timeline({ paused: true }); var THREE = window.THREE; var renderer = new THREE.WebGLRenderer({ canvas: glcanvas, antialias: true, alpha: false, preserveDrawingBuffer: true, }); renderer.setPixelRatio(1); renderer.setSize(W, H, false); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200); var st = {}; document.fonts.ready.then(function () { var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl); function render() { renderFn(); renderer.render(scene, camera); } tl.eventCallback("onUpdate", render); var dur = parseFloat(root.dataset.duration) || tl.duration(); tl.to({}, { duration: dur }, 0); // pad to full composition length render(); // paint frame 0 window.addEventListener("beforeunload", function () { disposeGL(renderer, scene); }); window.__timelines[spec.id] = tl; // register AFTER setup completes if (typeof window.__hfForceTimelineRebind === "function") { window.__hfForceTimelineRebind(); // re-nest now that we are populated } }); } if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go); else go(); })();
```

--------------------------------

### Install all html-in-canvas blocks

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/guides/html-in-canvas.mdx

Installs every block tagged `html-in-canvas` to compare the full set.

```bash
npx hyperframes add html-in-canvas
```

--------------------------------

### hyperframes preview command examples

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/packages/cli.mdx

Starts a live preview server with hot reload. The bare command chooses the safest lifecycle: foreground in interactive terminals, managed background in non-interactive or agent shells. Re-running for the same project reuses the healthy preview. The server auto-selects embedded, local studio, or monorepo mode; --background works only with the embedded server.

```bash
npx hyperframes preview [dir]
npx hyperframes preview --port 4567
npx hyperframes preview --background     # keep running after the command exits
npx hyperframes preview --foreground     # stay attached in a non-interactive shell
npx hyperframes preview --status --json  # inspect a managed preview from an agent
npx hyperframes preview --list           # every running preview
```

--------------------------------

### Start a reverse project

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/reverse-any-video/SKILL.md

Opens a new reverse project for the given video in the specified directory. Requires HyperFrames Pro; if it refuses, provide the upgrade link and have the person run 'fix' themselves.

```bash
npx hyperframes reverse start <video> --dir <project>
```

--------------------------------

### Install fade-through component

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/catalog/components/fade-through.mdx

Command to install the fade-through component. It writes one file: compositions/components/fade-through.html.

```bash
npx hyperframes add fade-through
```

--------------------------------

### Verify media-use setup with resolve --doctor

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/media-use/references/setup-providers.md

Checks that the media-use setup is correctly configured. Run after signing in to confirm the OAuth session and provider access.

```bash
npx hyperframes media-use resolve --doctor
```

--------------------------------

### Render examples for all formats

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/guides/rendering.mdx

Shows the CLI commands for each supported output format: WebM, MOV, GIF, PNG sequence, and HLS. GIF has no audio and limited transparency; prefer MP4 or WebM for normal playback.

```bash
# Transparent web overlay
npx hyperframes render --format webm --output overlay.webm
```

```bash
# ProRes editing file
npx hyperframes render --format mov --output master.mov
```

```bash
# Short looping preview
npx hyperframes render --format gif --fps 15 --output preview.gif
```

```bash
# RGBA frames in a directory
npx hyperframes render --format png-sequence --output frames
```

```bash
# HLS VOD stream in a directory
npx hyperframes render --format hls --output stream
```

--------------------------------

### Using the AWS Lambda SDK to deploy, render, and get progress

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/packages/aws-lambda.mdx

Use this TypeScript example to deploy a site, start a render on AWS Lambda, and poll for progress. It requires the @hyperframes/aws-lambda/sdk package and a deployed state machine ARN. The renderToLambda call validates the config synchronously, so invalid dimensions, formats, chunk sizes, or payload sizes fail immediately.

```typescript
import { deploySite, getRenderProgress, renderToLambda } from "@hyperframes/aws-lambda/sdk";

const site = await deploySite({
  projectDir: "./my-composition",
  bucketName: "hyperframes-render-bucket",
});

const handle = await renderToLambda({
  siteHandle: site,
  bucketName: site.bucketName,
  stateMachineArn: "arn:aws:states:us-east-1:123456789012:stateMachine:hyperframes-render",
  config: {
    fps: 30,
    width: 1920,
    height: 1080,
    format: "mp4",
    chunkSize: 240,
    maxParallelChunks: 16,
    runtimeCap: "lambda",
  },
});

const progress = await getRenderProgress({ executionArn: handle.executionArn });
console.log(progress.status, progress.overallProgress, progress.costs.displayCost);
```

--------------------------------

### Preview Hyperframes Project in Background

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/hyperframes-cli/SKILL.md

Start a background preview server. Check the URL answers 200, then share the project URL and wait, unless the user asked for the file or no stops.

```bash
npx hyperframes preview --background
```

--------------------------------

### player.rangeStart

Source: https://github.com/heygen-com/hyperframes/blob/main/packages/player/README.md

Gets or sets the start of the playback range. Mirrors the 'range-start' attribute.

```APIDOC
## [PROPERTY] player.rangeStart

### Description
Gets or sets the start of the playback range. Mirrors the 'range-start' attribute.

### Type
number | null (read/write)

### Endpoint
player.rangeStart

### Parameters
None

### Response
Returns the range start time in seconds, or `null` if not set.
```

--------------------------------

### Install HyperFrames skills

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/deploy/migrating-to-hyperframes-lambda.mdx

Run this command to install the HyperFrames skills so that Claude, Cursor, or Codex are aware of the data-attribute conventions. Start at /hyperframes, which carries the composition contract and points to references/format.md for details.

```bash
npx hyperframes skills update
```

--------------------------------

### Quick start benchmark commands

Source: https://github.com/heygen-com/hyperframes/blob/main/packages/producer/tests/perf/README.md

Commands to run the benchmark harness: run all non-slow fixtures, run HDR-only baseline, average a fixture across runs, run a specific fixture, and skip slow fixtures explicitly.

```bash
# Run every non-slow fixture once
cd packages/producer
bun run benchmark

# HDR-only baseline (PQ + HLG fixtures, ~50s on M-series Macs)
bun run bench:hdr

# Average a fixture across multiple runs
bunx tsx src/benchmark.ts --tags hdr --runs 3

# Just the PQ regression
bunx tsx src/benchmark.ts --only hdr-regression

# Skip slow fixtures explicitly (default behavior; here for clarity)
bunx tsx src/benchmark.ts --exclude-tags slow
```

--------------------------------

### Setup path, guide, and text elements from CONFIG

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/catalog/blocks/hw-path-text.mdx

Initializes the SVG path, guide, and text font size based on the CONFIG object. It sets the path 'd' attribute and optionally the guide's, and adjusts the font-size of the text element.

```javascript
        var pathEl = document.getElementById("hw-pt-path");
        var guide = document.getElementById("hw-pt-guide");
        pathEl.setAttribute("d", CONFIG.d);
        if (CONFIG.showGuide) guide.setAttribute("d", CONFIG.d);
        document.getElementById("hw-pt-text").setAttribute("font-size", CONFIG.fontSize);
```

--------------------------------

### List and install caption components with npx hyperframes

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/media-use/audio/references/captions/authoring.md

Use the catalog command to list all caption components filtered by the caption-style tag, and the add command to install a specific one like caption-highlight. Install with npx hyperframes add <name> and wire as a sub-composition via data-composition-src.

```bash
npx hyperframes catalog --tag caption-style   # list all caption components
npx hyperframes add caption-highlight         # install a specific one
```

--------------------------------

### Set timing on one element with setTiming()

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/sdk/guides/timing-and-animation.mdx

Moves an element to a new start time, duration, and track index. All fields are optional; pass only what you want to change. The example sets hf-title to start at 1.0 s, last 2.5 s, on track 0.

```typescript
// Move hf-title to start at 1.0 s, last 2.5 s, on track 0
comp.setTiming("hf-title", { start: 1.0, duration: 2.5, trackIndex: 0 });
```

--------------------------------

### Install shader-transition package

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/remotion-to-hyperframes/references/transitions.md

CLI command to add a specific shader-transition block.

```bash
npx hyperframes add sdf-iris
```

--------------------------------

### Install and mount facet-morph with npx hyperframes add

Source: https://github.com/heygen-com/hyperframes/blob/main/registry/components/facet-morph/README.md

Install the facet-morph component with npx hyperframes add, then mount it in a host composition using the data-composition attributes. The example sets non-default variables: forms badge,blob,mark, hold_last false, and accent violet.

```bash
npx hyperframes add facet-morph
```

```html
<div
  class="clip"
  data-composition-id="facet-morph"
  data-composition-src="./components/facet-morph.html"
  data-variable-values='{"forms":"badge,blob,mark","hold_last":false,"accent":"violet"}'
  data-start="0"
  data-duration="5"
  data-track-index="0"
></div>
```

--------------------------------

### Create fixture and render with HF_CAPTURE_PARALLEL_STREAM=true

Source: https://github.com/heygen-com/hyperframes/blob/main/packages/producer/tests/long-form/README.md

Sets up a 20-second root with two sequential 10-second in-flow clips at 640x360/10fps, then renders with the streaming route enabled using HF_CAPTURE_PARALLEL_STREAM=true and -w 2. Clip B is flat gray (mean luma 188) so a black frame (mean luma 16) cannot be mistaken for content.

```sh
mkdir -p /tmp/hf-694-gate/inflow && cd /tmp/hf-694-gate/inflow
ffmpeg -v error -y -f lavfi -i "testsrc2=size=640x360:rate=10" -f lavfi -i "sine=frequency=440:sample_rate=48000" \
  -t 10 -c:v libx264 -preset ultrafast -crf 20 -g 10 -pix_fmt yuv420p -c:a aac -b:a 64k -movflags +faststart a.mp4
ffmpeg -v error -y -f lavfi -i "color=c=0xC8C8C8:size=640x360:rate=10" -f lavfi -i "sine=frequency=660:sample_rate=48000" \
  -t 10 -c:v libx264 -preset ultrafast -crf 20 -g 10 -pix_fmt yuv420p -c:a aac -b:a 64k -movflags +faststart b.mp4
cat > index.html <<'HTML'
<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;background:#000}#root{position:relative;width:640px;height:360px;overflow:hidden;background:#000}video{display:block;width:100%;height:100%;object-fit:cover}</style></head><body>
<div id="root" data-composition-id="root" data-width="640" data-height="360" data-start="0" data-duration="20" data-no-timeline>
<video class="clip" id="a" src="a.mp4" data-start="0" data-duration="10" data-media-start="0" data-has-audio="true"></video>
<video class="clip" id="b" src="b.mp4" data-start="10" data-duration="10" data-media-start="0" data-has-audio="true"></video>
</div></body></html>
HTML
echo '{"name":"inflow","fps":10,"width":640,"height":360}' > hyperframes.json
cd .. && HF_CAPTURE_PARALLEL_STREAM=true node <repo>/packages/cli/dist/cli.js render inflow --fps 10 -w 2 -o inflow/renders/w2-stream.mp4
```

--------------------------------

### JavaScript Setup for Three.js and LiquidGlass

Source: https://github.com/heygen-com/hyperframes/blob/main/registry/blocks/liquid-glass-notification/liquid-glass-notification.html

Initializes Three.js scene, camera, renderer, and the LiquidGlass canvas. Sets up the shader material and starts the render loop.

```javascript
var uniforms = { uTime: { value: 0.0 } };
threeScene.add(
  new THREE.Mesh(
    new THREE.PlaneGeometry(2, 2),
    new THREE.ShaderMaterial({
      vertexShader: "varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }",
      fragmentShader: fs,
      uniforms: uniforms,
    }),
  ),
);
threeRenderer.render(threeScene, threeCamera);
var glassCanvas = document.getElementById("glass-canvas");
var glassCtx = glassCanvas.getContext("2d");
var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);
function renderFrame(time) {
  uniforms.uTime.value = time;
  if (!lg.isReady) return;
  glassCtx.clearRect(0, 0, 1920, 1080);
  glassCtx.drawImage(threeCanvas, 0, 0, 1920, 1080);
  lg.renderGlassElements();
}
var lgReady = false;
lg.waitForInit().then(function (ok) {
  if (!ok) return;
  lgReady = true;
  glassCanvas.onpaint = function () { renderFrame(0); };
  if (glassCanvas.requestPaint) glassCanvas.requestPaint();
});
```

--------------------------------

### Initialize a project template with npx hyperframes init

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/examples.mdx

Use this command to scaffold a complete project from a template. Replace <name> with the template name, such as warm-grain or play-mode.

```bash
npx hyperframes init my-video --example <name>
```

--------------------------------

### Start GitHub Copilot CLI with copilot

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/guides/skills.mdx

Run `npx hyperframes skills update`, open the project, and start Copilot. If Copilot was already running, use `/skills reload`. Use `/skills list` or `/skills info hyperframes` to confirm discovery.

```bash
copilot
```

--------------------------------

### Custom paths.blocks layout

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/hyperframes-registry/references/install-locations.md

Custom layout example that remaps block installs to a `scenes/` directory. After this change, `hyperframes add data-chart` writes to `scenes/data-chart.html` instead of `compositions/data-chart.html`.

```json
{
  "paths": {
    "blocks": "scenes"
  }
}
```

--------------------------------

### Prompt for a 30-second launch video

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/guides/product-launch-video.mdx

Paste this prompt into the Studio app's Make something field, replacing the example URL with your product's URL. The agent builds the video from the real site's screens, colors, fonts, and words.

```text
A 30-second launch video for https://example.com.
```

--------------------------------

### Mount iris-reveal from a host composition

Source: https://github.com/heygen-com/hyperframes/blob/main/registry/components/iris-reveal/README.md

Mounts the iris-reveal sub-composition from a host clip with non-default variables. The example sets iris_x, iris_y, open_at, and accent, with a start time and duration.

```html
<div
  class="clip"
  data-composition-id="iris-reveal"
  data-composition-src="./components/iris-reveal.html"
  data-variable-values='{"iris_x":30,"iris_y":40,"open_at":0.6,"accent":"blue"}'
  data-start="2"
  data-duration="3.5"
  data-track-index="0"
></div>
```

--------------------------------

### Install command for blue-sweater-intro-video

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/catalog/blocks/blue-sweater-intro-video.mdx

Installs the block via npx hyperframes add. Writes compositions/blue-sweater-intro-video.html plus 2 supporting files under assets/ and assets/sfx/.

```bash
npx hyperframes add blue-sweater-intro-video
```

--------------------------------

### Subscribe to Pro for Templates

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/style-sampling/SKILL.md

Ask the person to type an exclamation mark and this command in the prompt when signed in on Free. It finishes once they are on Pro; pull nothing before that.

```bash
npx hyperframes billing subscribe --feature templates --skill style-sampling
```

--------------------------------

### Timeline totalTime getter/setter

Source: https://github.com/heygen-com/hyperframes/blob/main/packages/producer/tests/style-17-prod/output/compiled.html

Sets or gets the total time of the timeline. When setting, it adjusts the start time based on the current time scale and calls the parent totalTime method.

```javascript
e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=ja(Rt.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime}
```

--------------------------------

### Replace slot children with screenshots

Source: https://github.com/heygen-com/hyperframes/blob/main/registry/components/iris-reveal/README.md

In the installed component file, replace each slot's default block with your own content. The example shows two image elements, one for the before slot and one for the after slot.

```html
<div class="ir-slot" data-slot="before">
  <img src="../../assets/scene-night.png" alt="" />
</div>
...
<div class="ir-slot" data-slot="after">
  <img src="../../assets/scene-day.png" alt="" />
</div>
```

--------------------------------

### Install Dynamic Grid Component

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/catalog/components/dynamic-grid.mdx

Run this command to add the dynamic-grid component. It writes a single file: compositions/components/dynamic-grid.html.

```bash
npx hyperframes add dynamic-grid
```

--------------------------------

### Avoid paraphrasing code in prompt

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/prompting/captions-catalog.mdx

This is an example of what to avoid when prompting: describing the code in prose instead of quoting it exactly. The source warns that unquoted code gets paraphrased and won't compile.

```text
type out a function that seeks to zero and captures
```

--------------------------------

### Transcript JSON format

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/media-use/audio/references/captions/authoring.md

Shows the expected JSON structure for a transcript, with each word having an id, text, start, and end. The id is added by `hyperframes transcribe` and is optional for hand-authored transcripts.

```json
[
  { "id": "w0", "text": "Hello", "start": 0.0, "end": 0.5 },
  { "id": "w1", "text": "world.", "start": 0.6, "end": 1.2 }
]
```

--------------------------------

### Initialize and preview a custom composition

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/guides/deploy.mdx

Commands to create a new Hyperframes project, preview it, and check for errors.

```bash
npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes check
```

--------------------------------

### Word timing data and GSAP timeline setup

Source: https://github.com/heygen-com/hyperframes/blob/main/packages/producer/tests/style-13-prod/output/compiled.html

Defines an array of word objects with start and end times, then creates a paused GSAP timeline. This data is used for animating text in sync with audio.

```javascript
}, { text: "percent", start: 4.239, end: 4.559 }, { text: "said", start: 4.639, end: 4.799 }, { text: "static", start: 4.859, end: 5.199 }, { text: "content", start: 5.239, end: 5.639 }, { text: "was", start: 5.679, end: 5.779 }, { text: "costing", start: 5.859, end: 6.219 }, { text: "you", start: 6.259, end: 6.339 }, { text: "attention,", start: 6.379, end: 7.299 }, { text: "and", start: 7.319, end: 7.439 }, { text: "three", start: 7.48, end: 7.599 }, { text: "out", start: 7.679, end: 7.779 }, { text: "of", start: 7.799, end: 7.879 }, { text: "four", start: 7.94, end: 8.139 }, { text: "said", start: 8.279, end: 8.46 }, { text: "you", start: 8.519, end: 8.6 }, { text: "know", start: 8.619, end: 8.739 }, { text: "the", start: 8.8, end: 8.88 }, { text: "look", start: 8.92, end: 9.079 }, { text: "you", start: 9.119, end: 9.259 }, { text: "want", start: 9.279, end: 9.619 }, { text: "but", start: 9.779, end: 9.88 }, { text: "don't", start: 9.92, end: 10.1 }, { text: "have", start: 10.159, end: 10.3 }, { text: "the", start: 10.3, end: 10.42 }, { text: "editing", start: 10.5, end: 10.779 }, { text: "skills", start: 10.86, end: 11.139 }, { text: "to", start: 11.159, end: 11.239 }, { text: "get", start: 11.279, end: 11.439 }, { text: "there.", start: 11.46, end: 12.239 }, { text: "So", start: 12.3, end: 12.38 }, { text: "we", start: 12.399, end: 12.519 }, { text: "built", start: 12.539, end: 12.759 }, { text: "Editor", start: 12.84, end: 13.119 }, { text: "Agent.", start: 13.239, end: 13.84 }, ]; const tl = gsap.timeline({ paused: true });
```

--------------------------------

### WebGL context setup for rf-canvas

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/catalog/blocks/rack-focus.mdx

Gets the WebGL context for the `rf-canvas` element, preferring `webgl` with high-performance and no antialiasing, falling back to `experimental-webgl`. Uses `preserveDrawingBuffer: true`.

```javascript
        // ── GL ───────────────────────────────────────────────────────────
        var canvas = document.getElementById("rf-canvas");
        var gl =
          canvas.getContext("webgl", {
            alpha: true,
            antialias: false,
            depth: false,
            stencil: false,
            preserveDrawingBuffer: true,
            powerPreference: "high-performance",
          }) ||
          canvas.getContext("experimental-webgl", {
            alpha: true,
            preserveDrawingBuffer: true,
          });

```

--------------------------------

### WebGL setup and texture capture

Source: https://github.com/heygen-com/hyperframes/blob/main/registry/blocks/glitch/glitch.html

Initializes WebGL, creates textures from scene elements, and sets up a fullscreen quad buffer. Uses gl.UNSIGNED_BYTE for texture data.

```JavaScript
gl.UNSIGNED\_BYTE, c); sceneTextures\[sceneId\] = tex; } var vertSrc = "attribute vec2 a\_pos; varying vec2 v\_uv; void main(){" + "v\_uv=a\_pos\*0.5+0.5; v\_uv.y=1.0-v\_uv.y; gl\_Position=vec4(a\_pos,0,1);}"; var quadBuf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY\_BUFFER, quadBuf); gl.bufferData( gl.ARRAY\_BUFFER, new Float32Array(\[-1, -1, 1, -1, -1, 1, 1, 1\]), gl.STATIC\_DRAW, );
```

--------------------------------

### Negative z-index backdrop example

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/concepts/data-attributes.mdx

Illustrates a backdrop with negative z-index that can be covered by an ancestor's background when the parent lacks a stacking context. The CSS shows the problematic setup.

```css
#root {
  position: relative;
  background: #0a0a0a;
}
#backdrop {
  position: absolute;
  inset: 0;
  background: #f5e6c8;
  z-index: -1;
}
```

--------------------------------

### Composition file structure example

Source: https://github.com/heygen-com/hyperframes/blob/main/packages/core/docs/core.md

Shows the recommended directory layout for a HyperFrames project with a root index.html and a compositions folder containing separate composition files.

```text
project/
├── index.html              # Root composition
├── compositions/
│   ├── intro-anim.html     # Intro animation composition
│   ├── caption-overlay.html # Caption composition
│   └── outro-title.html     # Outro composition
```

--------------------------------

### buildEffect function: dispatch diff effect

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/catalog/blocks/code-diff.mdx

Dispatches to the diff function when the spec effect is 'diff'. Uses T[spec.seq] to get the sequence states and a fixed start time of 0.45.

```javascript
function buildEffect(tl, surface, spec) {
  var start = 0.45;
  var seq = T[spec.seq];
  if (spec.effect === "diff") diff(tl, surface, seq.states, start);
}
```

--------------------------------

### Transcribe audio with Parakeet via transcribe.mjs

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/media-use/references/operations.md

Default local transcription path using NVIDIA Parakeet-TDT via parakeet-mlx, which beats whisper.cpp on accuracy and speed. Emits { text, words:[{text,start,end}] } with word timestamps. Requires installing parakeet-mlx once; the CLI commands install the model and run transcription with the parakeet engine.

```bash
# install once: uv venv ~/.venvs/parakeet && VIRTUAL_ENV=~/.venvs/parakeet uv pip install parakeet-mlx
node <SKILL_DIR>/scripts/transcribe.mjs --input talk.mp4 --out talk.transcribe.json

# the hyperframes CLI runs Parakeet on macOS, Linux and Windows once it is installed:
npx hyperframes models install parakeet                 # once, ~640 MB, ask the user first
npx hyperframes transcribe talk.mp4 --engine parakeet   # or --engine auto (default)
```

--------------------------------

### Build the vendored bundle

Source: https://github.com/heygen-com/hyperframes/blob/main/registry/examples/path-traced-3d/source/README.md

Run npm ci and npm run build to bundle vendor-entry.js with pinned versions into ../assets/vendor/three-path-tracer.min.js and copy licence files. Update versions and SHA-256 in ../assets/vendor/README.md when they change.

```sh
npm ci
npm run build
```

--------------------------------

### Install command for vfx-iphone-device

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/catalog/blocks/vfx-iphone-device.mdx

Adds the vfx-iphone-device block to the project, writing compositions/vfx-iphone-device.html and 4 supporting files under models/.

```bash
npx hyperframes add vfx-iphone-device
```

--------------------------------

### Mount telemetry-hud from host composition

Source: https://github.com/heygen-com/hyperframes/blob/main/registry/components/telemetry-hud/README.md

Mount the component from a host composition like any sub-composition. This example sets readouts, emphasizes the third readout (index 3) in blue, and starts at 2 seconds with a duration of 4.5 seconds.

```html
<div
  class="clip"
  data-composition-id="telemetry-hud"
  data-composition-src="./components/telemetry-hud.html"
  data-variable-values='{"readouts":"pass:2 of 2,frames:135,gpu:41%,eta:00:12","emphasize":3,"accent":"blue"}'
  data-start="2"
  data-duration="4.5"
  data-track-index="0"
></div>
```

--------------------------------

### Mount radial-surround from a host composition

Source: https://github.com/heygen-com/hyperframes/blob/main/registry/components/radial-surround/README.md

Mounts the sub-composition with non-default variables via data-composition-src and data-variable-values. The example sets chips, close_in, and accent. The clip starts at 2s, lasts 5s, and uses track index 0.

```html
<div
  class="clip"
  data-composition-id="radial-surround"
  data-composition-src="./components/radial-surround.html"
  data-variable-values='{"chips":"Slack,Email,CRM,Tickets,Docs","close_in":true,"accent":"blue"}'
  data-start="2"
  data-duration="5"
  data-track-index="0"
></div>
```

--------------------------------

### Prepare the release with bun run release:prepare

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/contributing/changelog-process.mdx

Run this command from the repository root to create or update the changelog draft and exit before tagging. The checkpoint exits non-zero intentionally to stop chained release commands. Review the generated copy, remove the TODO summary marker, and rerun the same command.

```bash
bun run release:prepare 0.6.53
```

--------------------------------

### Gooey Split Animation Setup and Hook

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/catalog/blocks/gooey-split.mdx

Initializes the animation by checking a global flag to avoid duplicate hooks, then calls hookRegistration and starts polling. The script is wrapped in an IIFE and includes a shutter snippet marker.

```javascript
        if (!window._hfMbHooked) {
          window._hfMbHooked = true;
          hookRegistration();
          poll(POLL_TICKS);
        }
        /* SHUTTER_SNIPPET_END */
```

--------------------------------

### Install focus-blur-resolve via npx

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/catalog/components/focus-blur-resolve.mdx

Run this command to add the focus-blur-resolve component. It writes one file: compositions/components/focus-blur-resolve.html.

```bash
npx hyperframes add focus-blur-resolve
```

--------------------------------

### bundle adapter implementation

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/packages/studio-server.mdx

bundle(projectDir, options) must pass options through to bundleToSingleHtml, spread over your own options. The preview sets stampHfIds there so each element is served with the id its source file mints.

```ts
bundle: (dir, options) => bundleToSingleHtml(dir, { runtime: "inline", ...options }),
```

--------------------------------

### CLI docs command

Source: https://github.com/heygen-com/hyperframes/blob/main/packages/cli/src/templates/_shared/AGENTS.md

Run the local CLI docs command to get quick reference without network access. Topics include data-attributes, gsap, compositions, rendering, examples, and troubleshooting.

```bash
npx hyperframes docs <topic>
```

--------------------------------

### YAML skill definition with multiline description

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/guides/skills.mdx

Use this YAML format when a skill's SKILL.md has a multiline description that requires indented continuation lines. The example shows only the YAML structure; keep the existing description text and skill body. After editing, run `npx skills list -g` to verify global discovery or `npx skills list` for a project install.

```yaml
---
name: seam-craft
description: >-
  Render-correctness doctrine for scene-to-scene seams.
  Load when assembling the master timeline.
---
```

--------------------------------

### Run benchmark with preset matrix

Source: https://github.com/heygen-com/hyperframes/blob/main/skills/hyperframes-cli/references/upgrade-info-misc.md

Renders the project with 5 preset configurations (`30fps draft 2w`, `30fps standard 2w`, `30fps high 2w`, `30fps standard 4w`, `60fps standard 4w`) and prints a comparison of render speed and output file size. Use it to find the fastest acceptable preset for your machine. Not a single-render-with-stage-breakdown.

```bash
npx hyperframes benchmark              # run the preset matrix in current project
npx hyperframes benchmark ./my-video   # specific project
npx hyperframes benchmark --runs 5     # repeat each config N times (default 3)
npx hyperframes benchmark --json
```

--------------------------------

### Timeline integration for directional-wipe animation

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/catalog/components/directional-wipe.mdx

GSAP timeline example animating the directional-wipe layers: clip-path reveal, from-layer shift, light sweep, and RGB flicker. Uses custom properties and staggered start times.

```javascript
<!--
  Timeline integration:
  tl.fromTo('.hf-catalog-directional-wipe .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-catalog-directional-wipe .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-catalog-directional-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-catalog-directional-wipe .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
-->
```

--------------------------------

### Build preview page with build-preview.mts

Source: https://github.com/heygen-com/hyperframes/blob/main/plans/audio-fx-ux/README.md

Run this command to generate the review page from copy.mts, the registry, and preset catalogue. The script fails if any effect, parameter, or preset lacks copy.

```bash
bun plans/audio-fx-ux/build-preview.mts /tmp/rack-ux.html
```

--------------------------------

### Install Command for signup-flow

Source: https://github.com/heygen-com/hyperframes/blob/main/docs/catalog/components/signup-flow.mdx

Run this command to add the signup-flow component. It writes one file: compositions/components/signup-flow.html.

```bash
npx hyperframes add signup-flow
```
Tokens:
Raw