mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
JamesandClaude Opus 4.6
00bd2e5ae2
Set up /docs directory with docs.json config, HeyGen branding (logo, favicon, #7559FF purple), and 18 MDX pages covering: - Getting started (introduction, quickstart) - Concepts (compositions, data attributes, frame adapters, determinism) - Guides (GSAP animation, templates, rendering, common mistakes, troubleshooting) - Package docs (core, engine, producer, studio, CLI) - Reference (HTML schema) and contributing guide Content adapted from existing repo docs (core/docs/, cli/src/docs/, README). Validated with `mint validate` and `mint broken-links`. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
85 lines
2.3 KiB
Plaintext
85 lines
2.3 KiB
Plaintext
---
|
|
title: Quickstart
|
|
description: "Create, preview, and render your first Hyperframes video."
|
|
---
|
|
|
|
## Create a Project
|
|
|
|
```bash
|
|
npx create-hyperframe my-video
|
|
cd my-video
|
|
```
|
|
|
|
This scaffolds a project with an `index.html` composition and assets directory.
|
|
|
|
## Preview in Browser
|
|
|
|
```bash
|
|
npx hyperframes dev
|
|
```
|
|
|
|
Opens a live preview at `http://localhost:3000`. Edit `index.html` and the preview updates automatically.
|
|
|
|
## Render to MP4
|
|
|
|
```bash
|
|
npx hyperframes render -o output.mp4
|
|
```
|
|
|
|
Renders your composition to an MP4 file using the local rendering pipeline (Puppeteer + FFmpeg).
|
|
|
|
<Note>
|
|
Local rendering requires FFmpeg. Install it with `brew install ffmpeg` (macOS), `sudo apt install ffmpeg` (Ubuntu), or download from [ffmpeg.org](https://ffmpeg.org/download.html).
|
|
</Note>
|
|
|
|
## Project Structure
|
|
|
|
After `create-hyperframe`, your project looks like this:
|
|
|
|
```
|
|
my-video/
|
|
├── index.html # Root composition
|
|
├── compositions/ # Sub-compositions (optional)
|
|
└── assets/ # Media files (video, audio, images)
|
|
```
|
|
|
|
## Your First Composition
|
|
|
|
Every Hyperframes video is an HTML file. Here's a minimal example:
|
|
|
|
```html
|
|
<div id="root" data-composition-id="my-video"
|
|
data-start="0" data-width="1920" data-height="1080">
|
|
|
|
<h1 id="title" class="clip"
|
|
data-start="0" data-duration="5" data-track-index="0"
|
|
style="font-size: 72px; color: white; text-align: center;">
|
|
Hello, Hyperframes!
|
|
</h1>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
|
|
<script>
|
|
const tl = gsap.timeline({ paused: true });
|
|
tl.from("#title", { opacity: 0, y: -50, duration: 1 }, 0);
|
|
window.__timelines = window.__timelines || {};
|
|
window.__timelines["my-video"] = tl;
|
|
</script>
|
|
</div>
|
|
```
|
|
|
|
Key rules:
|
|
- **Root element** needs `data-composition-id`, `data-width`, and `data-height`
|
|
- **Timed elements** need `data-start`, `data-duration`, `data-track-index`, and `class="clip"`
|
|
- **GSAP timeline** must be paused and registered in `window.__timelines`
|
|
|
|
## Requirements
|
|
|
|
- **Node.js** 20+
|
|
- **pnpm** (recommended) or npm
|
|
- **FFmpeg** for local rendering
|
|
- **Docker** (optional) for deterministic rendering
|
|
|
|
<Card title="Templates" icon="grid-2" href="/guides/templates">
|
|
Browse built-in templates for common video patterns
|
|
</Card>
|