HyperFrames

https://hyperframes.heygen.com
Admin
HyperFrames is an open-source framework that enables AI agents and developers to compose...
Tokens:1,656,976
Snippets:9,414
Trust Score:10
Update:6 days ago
Show doc for...
Tokens:
Raw
### Install example blocks with npx hyperframes add

Source: https://hyperframes.heygen.com/examples

Use `npx hyperframes add <block>` to add a ready-to-run example block to a project, then customize its content in place. The table lists the most-installed blocks by human requested installs from the last 30 days.

```bash
npx hyperframes add logo-outro
```

```bash
npx hyperframes add data-chart
```

```bash
npx hyperframes add editorial-flash-overlay
```

```bash
npx hyperframes add organic-light-leak-overlay
```

```bash
npx hyperframes add mk-progress-stat
```

```bash
npx hyperframes add flowchart
```

```bash
npx hyperframes add mk-specs-list
```

```bash
npx hyperframes add mk-callout-highlight
```

```bash
npx hyperframes add hw-title
```

```bash
npx hyperframes add code-typing
```

```bash
npx hyperframes add lt-dark-card
```

```bash
npx hyperframes add cinematic-zoom
```

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

### Claude Code: Example usage of HyperFrames skill

Source: https://hyperframes.heygen.com/guides/plugins

After installation, start a new session or run /reload-plugins, then use this prompt to invoke the hyperframes skill.

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

```

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

### Install yt-logo-intro with npx hyperframes add

Source: https://hyperframes.heygen.com/catalog/blocks/yt-logo-intro

Installs the yt-logo-intro composition, writing a single file: compositions/yt-logo-intro.html.

```bash
npx hyperframes add yt-logo-intro
```

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

### Initialize and preview a blank HyperFrames project

Source: https://hyperframes.heygen.com/developers/index

Creates a blank project named my-video, changes into its directory, and starts the preview server. Use this when you want to write a composition yourself or automate a project.

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

```

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

### Install HyperFrames skills interactively

Source: https://hyperframes.heygen.com/guides/skills

Run this command to start the interactive installer. Select 'Core Skills' to install the /hyperframes router, which adds a specialized creation workflow when needed. Start a fresh agent chat after installation and ask it to use /hyperframes.

```bash
npx skills add heygen-com/hyperframes
```

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

### Present the deck with npx hyperframes present

Source: https://hyperframes.heygen.com/guides/slideshow

Run this command from the project directory to start the live deck. Then open the local URL and click Present or press P. The presenter view shows the current slide, next slide, notes, and a timer.

```bash
npx hyperframes present <project-directory>

```

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

### Install @hyperframes/aws-lambda

Source: https://hyperframes.heygen.com/packages/aws-lambda

Install the package via npm. This is the only code example on the page.

```bash
npm install @hyperframes/aws-lambda

```

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

### Install Blue Sweater Intro Video

Source: https://hyperframes.heygen.com/catalog/blocks/blue-sweater-intro-video

Run this command to add the composition to your project. It creates the main HTML file and necessary assets.

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

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

### getRootElements usage example

Source: https://hyperframes.heygen.com/sdk/reference/composition

Example of using getRootElements to get one entry per top-level clip.

```javascript
const roots = comp.getRootElements();
```

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

### Install transitions-light composition

Source: https://hyperframes.heygen.com/catalog/blocks/transitions-light

Run this command to add the transitions-light composition to your project. It writes a single file: compositions/transitions-light.html.

```bash
npx hyperframes add transitions-light
```

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

### Install or refresh a specific HyperFrames workflow

Source: https://hyperframes.heygen.com/guides/skills

Use this command to install or refresh a single workflow explicitly, for example 'pr-to-video'.

```bash
npx hyperframes skills update pr-to-video
```

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

### Initialize a project template with npx hyperframes init

Source: https://hyperframes.heygen.com/examples

Use `npx hyperframes init my-video --example <name>` to scaffold a complete project from one of the available templates. The templates are listed in the table and include warm-grain, play-mode, swiss-grid, kinetic-type, decision-tree, product-promo, nyt-graph, vignelli, and blank.

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

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

### Install @hyperframes/parsers

Source: https://hyperframes.heygen.com/packages/parsers

Install the parsers package via npm. This is only needed when using the parsing layer directly; most users get it transitively through @hyperframes/core.

```bash
npm install @hyperframes/parsers

```

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

### Install Sticky Mock Swap with npx hyperframes add

Source: https://hyperframes.heygen.com/catalog/components/sticky-mock-swap

Run this command to install the sticky-mock-swap composition. It writes a single file: compositions/components/sticky-mock-swap.html.

```bash
npx hyperframes add sticky-mock-swap
```

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

### Install mk-placeholder-grid via npx

Source: https://hyperframes.heygen.com/catalog/blocks/mk-placeholder-grid

Run this command to add the composition. It writes a single file: compositions/mk-placeholder-grid.html.

```bash
npx hyperframes add mk-placeholder-grid
```

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

### Install all html-in-canvas blocks

Source: https://hyperframes.heygen.com/guides/html-in-canvas

Install every block tagged html-in-canvas to compare the full set of examples, including Portal, Shatter, and Liquid Glass Notification.

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

```

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

### Install transitions-push with npx

Source: https://hyperframes.heygen.com/catalog/blocks/transitions-push

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

```bash
npx hyperframes add transitions-push
```

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

### setTiming Usage Examples

Source: https://hyperframes.heygen.com/sdk/reference/composition

Updates timing attributes for elements. The first sets start and duration; the second sets trackIndex.

```typescript
comp.setTiming("hf-title", { start: 0.5, duration: 2.5 });
comp.setTiming("hf-cta", { trackIndex: 1 });

```

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

### Install mk-clone-wall-transition with npx

Source: https://hyperframes.heygen.com/catalog/blocks/mk-clone-wall-transition

Run this command to install the composition. It writes a single file: compositions/mk-clone-wall-transition.html.

```bash
npx hyperframes add mk-clone-wall-transition
```

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

### setHold signature and usage example

Source: https://hyperframes.heygen.com/sdk/reference/composition

Sets an elastic hold window — a { start, end, fill } range that either freezes or loops the element during a pause in the timeline.

```typescript
setHold(id: HfId, hold: ElasticHold): void

```

```typescript
comp.setHold("hf-hero", { start: 2, end: 5, fill: "freeze" });

```

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

### Install Focus Rack with npx hyperframes add

Source: https://hyperframes.heygen.com/catalog/components/focus-rack

Run this command to install the Focus Rack composition. It writes a single file: compositions/components/focus-rack.html.

```bash
npx hyperframes add focus-rack
```

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

### Video element with playback attributes

Source: https://hyperframes.heygen.com/reference/html-schema

Example of a video element with id, source, start time, duration, track index, muted, and playsinline attributes. Used for media playback in HyperFrames.

```html
<video
  id="demo"
  src="./assets/demo.mp4"
  data-start="0"
  data-duration="8"
  data-track-index="0"
  muted
  playsinline
></video>
```

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

### Install with npx hyperframes add

Source: https://hyperframes.heygen.com/catalog/components/onboarding-stepper-flow

Run this command to install the onboarding-stepper-flow component. It writes a single file: compositions/components/onboarding-stepper-flow.html.

```bash
npx hyperframes add onboarding-stepper-flow
```

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

### code-typing: render function snippet

Source: https://hyperframes.heygen.com/prompting/code-blocks

Example snippet for a code-typing reveal. Quote the code as a literal block; prose descriptions get paraphrased. Specify a hold on the blinking cursor to avoid a frozen final frame.

```TypeScript
export async function render(comp: Composition) {
  await comp.seek(0);
  return comp.capture();
}
```

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

### GSAP setup and variable parsing for Constellation Hub

Source: https://hyperframes.heygen.com/catalog/components/constellation-hub

Loads GSAP 3.14.2 and starts a script that reads hyperframes variables (hub_label, nodes) to set hub text and node labels. Defaults to Product hub and "Capture,Compose,Render,Share" nodes; falls back to a single "Feature" node. Continues with DOM setup and animation logic.

```JavaScript
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
        <script>
          (function () {
            "use strict";

            var root = document.getElementById("root");
            var lockup = root.querySelector(".ch-lockup");
            var orbit = root.querySelector(".ch-orbit");
            var connectorsLayer = root.querySelector(".ch-connectors");
            var nodesLayer = root.querySelector(".ch-nodes");
            var hub = root.querySelector(".ch-hub");
            var vars =
              window.__hyperframes && window.__hyperframes.getVariables
                ? window.__hyperframes.getVariables()
                : {};

            var hubLabel = vars.hub_label == null ? "Product" : String(vars.hub_label).trim();
            var nodeSource =
              vars.nodes == null ? "Capture,Compose,Render,Share" : String(vars.nodes);
            var nodeLabels = nodeSource
              .split(",")
              .map(function (label) {
                return label.trim();
              })
              .filter(function (label) {
                return label.length > 0;
              });

            if (nodeLabels.length === 0) nodeLabels = ["Feature"];
```

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

### Install notes-reveal composition

Source: https://hyperframes.heygen.com/catalog/blocks/notes-reveal

Run this command to install the notes-reveal composition. It writes compositions/notes-reveal.html and 5 supporting files under assets/.

```bash
npx hyperframes add notes-reveal
```

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

### getElements() - Retrieve all elements and filter in userland

Source: https://hyperframes.heygen.com/sdk/guides/querying-and-editing

Returns a flat array of ElementSnapshot objects for every element in the composition, including nested sub-composition elements, in document order. The example shows filtering by tag and by start time in userland.

```javascript
const elements = comp.getElements();

// Filter in userland
const images = elements.filter((el) => el.tag === "img");
const timed = elements.filter((el) => el.start !== null);
```
Tokens:
Raw