hyperframes

Files (1)

• SKILL.md

SKILL.md (first lines)

# HyperFrames — Entry Skill

## What Is HyperFrames?

HyperFrames is HeyGen's declarative video-composition framework. You describe a video in HTML using `data-*` attributes and structured clips/tracks; the HyperFrames runtime renders it into a fully produced video with narration, animation, and media.

## Quick Start

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

# Init a new project
npx hyperframes init my-video
```

## Skill Map — Read These Next

| Skill | What it covers |
|---|---|
| `/hyperframes-core` | HTML composition contract — clips, tracks, `data-*` attributes |
| `/hyperframes-animation` | Animation runtimes — GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU |
| `/hyperframes-creative` | Design direction — palettes, typography, narration, beat planning |
| `/hyperframes-cli` | Dev-loop CLI — init, lint, preview, render, doctor |
| `/hyperframes-media` | Asset preprocessing — TTS, transcription, background removal |
| `/hyperframes-registry` | Install catalog blocks and components |
| `/general-video` | General authoring fallback for any video type |

## Routing Logic

When the user says "make me a video," inspect the request and route:

- Has a product/landing page URL → `/website-to-video`
- Has a pull request or code diff → `/pr-to-video`
- Needs a talking head → `/talking-head-recut`
- Needs captions embedded → `/embedded-captions`
- Has audio/music as the driver → `/music-to-video`
- Has slides or images → `/slideshow`
- Motion graphics only → `/motion-graphics`
- Faceless explainer → `/faceless-explainer`
- Product launch → `/product-launch-video`
- None of the above → `/general-video`

## Project Structure

```
my-video/
  index.html       # composition entry point
  assets/          # local media files
  hyperframes.config.json
```

## Core Concepts

- **Frame**: a single HTML element with `data-hf-clip` — the atomic unit of video
- **Track**: a named lane of clips that plays sequentially or in parallel
- **Scene**: a top-level container (`data-hf-scene`) grouping tracks
- **Render**: `npx hyperframes render` produces an MP4 via the HeyGen cloud renderer

From christiansalazar-wk/ai-lore, MIT.

More from christiansalazar-wk/ai-lore