name: heygen-hyperframes-quickstart
description: HeyGen Hyperframes Quickstart reference. Use when the user asks about HeyGen Hyperframes, how to initialize a project, preview or render videos.
HeyGen Hyperframes Quickstart Reference
This skill provides the quickstart guide and workflow for HeyGen Hyperframes.
Workflow Overview
Go from zero to a rendered MP4 — either by prompting your AI agent or by starting a project manually.
1. With an AI coding agent (Recommended)
Install the HyperFrames skills, then describe the video you want:
ash npx skills add heygen-com/hyperframes
Core skills package includes:
- /hyperframes: Entry skill, read first. Routes requests to the correct workflow.
- /hyperframes-core: Composition contract (HTML structure, timed elements, clips, tracks).
- /hyperframes-animation: Animation engine & GSAP / Lottie / CSS runtime adapters.
- /hyperframes-creative: Design direction (palettes, typography, beat planning).
- /hyperframes-cli: Dev-loop CLI (init, lint, preview, render, doctor).
2. Manual Project Loop
Prerequisites
- Node.js 22+
- FFmpeg (v7+ recommended, required for local renders)
Steps:
- Scaffold Project:
ash npx hyperframes init my-video cd my-video
- Preview in Browser:
ash npx hyperframes preview
- Render to MP4:
ash npx hyperframes render --output output.mp4
Composition Structure Rules
When creating or modifying compositions, remember these rules:
- Root Element: Must have data-composition-id, data-width, and data-height.
- Timed Elements: Must have data-start, data-duration, data-track-index, and class="clip".
- GSAP Timelines: Must be created with { paused: true } and registered on window.__timelines (e.g. window.__timelines["my-video"] = tl;).
1---2name: heygen-hyperframes-quickstart3description: ---4---5---6name: heygen-hyperframes-quickstart7description: HeyGen Hyperframes Quickstart reference. Use when the user asks about HeyGen Hyperframes, how to initialize a project, preview or render videos.8---910# HeyGen Hyperframes Quickstart Reference1112This skill provides the quickstart guide and workflow for HeyGen Hyperframes.1314## Workflow Overview1516Go from zero to a rendered MP4 — either by prompting your AI agent or by starting a project manually.1718### 1. With an AI coding agent (Recommended)1920Install the HyperFrames skills, then describe the video you want:2122`ash23npx skills add heygen-com/hyperframes24`2526Core skills package includes:27- /hyperframes: Entry skill, read first. Routes requests to the correct workflow.28- /hyperframes-core: Composition contract (HTML structure, timed elements, clips, tracks).29- /hyperframes-animation: Animation engine & GSAP / Lottie / CSS runtime adapters.30- /hyperframes-creative: Design direction (palettes, typography, beat planning).31- /hyperframes-cli: Dev-loop CLI (init, lint, preview, render, doctor).3233### 2. Manual Project Loop3435#### Prerequisites36- **Node.js 22+**37- **FFmpeg** (v7+ recommended, required for local renders)3839#### Steps:401. **Scaffold Project**:41 `ash42 npx hyperframes init my-video43 cd my-video44 `452. **Preview in Browser**:46 `ash47 npx hyperframes preview48 `493. **Render to MP4**:50 `ash51 npx hyperframes render --output output.mp452 `5354## Composition Structure Rules5556When creating or modifying compositions, remember these rules:57- **Root Element**: Must have data-composition-id, data-width, and data-height.58- **Timed Elements**: Must have data-start, data-duration, data-track-index, and class="clip".59- **GSAP Timelines**: Must be created with { paused: true } and registered on window.__timelines (e.g. window.__timelines["my-video"] = tl;).
AI7USER