# hyperframes_test

**Repository Path**: tz_git/hyperframes_test

## Basic Information

- **Project Name**: hyperframes_test
- **Description**: HeyGen HyperFrames Demos Project - Built for Agents.
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-01
- **Last Updated**: 2026-06-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HyperFrames 演示示例集

> **Write HTML. Render video. Built for agents.**  
> — [HyperFrames](https://github.com/heygen-com/hyperframes) by HeyGen

本仓库包含 6 个 HyperFrames 演示项目，全面展示其将 HTML/CSS/GSAP 动画转换为确定性 MP4 视频的能力。

## 📦 前置条件

- **Node.js 22+** — HyperFrames 要求 Node 22 或更高版本
- **FFmpeg** — 渲染 MP4 时需要（`brew install ffmpeg`）

## 🎬 演示项目

| # | 目录 | 描述 | 时长 | 分辨率 |
|---|------|------|------|--------|
| 0 | `demo-basic/` | Hello World 基础示例 | 10s | 1920×1080 |
| 1 | `01-title-animation/` | 标题动画（渐入/渐出/发光） | 8s | 1920×1080 |
| 2 | `02-product-launch/` | 产品发布视频（多场景 + 功能卡片） | 15s | 1920×1080 |
| 3 | `03-data-visualization/` | 数据可视化（柱状图 + 计数器） | 12s | 1920×1080 |
| 4 | `04-social-card/` | 竖屏社交卡片（TikTok/Reels 格式） | 10s | 1080×1920 |
| 5 | `05-multi-scene/` | 多场景切换（转场 + 代码展示） | 18s | 1920×1080 |

## 🚀 快速开始

```bash
# 进入任意示例目录
cd demo-basic

# 预览（在浏览器中实时预览，支持热重载）
npm run dev

# 检查 composition 是否合规
npm run check

# 渲染为 MP4 视频
npm run render
```

## 🔑 核心概念速查

### Composition (画布)
```html
<div data-composition-id="main"
     data-start="0" data-duration="10"
     data-width="1920" data-height="1080">
```

### Clip (片段)
```html
<div id="title" class="clip"
     data-start="0" data-duration="5"
     data-track-index="1">
  Hello World
</div>
```

### GSAP Timeline (可寻址动画)
```javascript
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
tl.from("#title", { opacity: 0, y: -50, duration: 1 }, 0);
window.__timelines["main"] = tl;
```

### 数据属性

| 属性 | 说明 | 示例 |
|------|------|------|
| `data-composition-id` | Composition 标识 | `"main"` |
| `data-start` | 开始时间 (秒) | `"2"` |
| `data-duration` | 持续时间 (秒) | `"5"` |
| `data-track-index` | 轨道层级 (0=底层) | `"1"` |
| `data-width` | 画布宽度 | `"1920"` |
| `data-height` | 画布高度 | `"1080"` |
| `data-volume` | 音频音量 | `"0.5"` |

## 📚 相关链接

- 📖 [官方文档](https://hyperframes.heygen.com/introduction)
- 🚀 [快速开始](https://hyperframes.heygen.com/quickstart)
- 🎨 [Showcase](https://hyperframes.heygen.com/showcase)
- 🧪 [Playground](https://www.hyperframes.dev/)
- 💬 [Discord](https://discord.gg/EbK98HBPdk)
- 🐙 [GitHub](https://github.com/heygen-com/hyperframes)