快速入门
示例
内置示例，涵盖常见的视频模式。悬停可预览动画效果。
Hyperframes 包含入门示例，帮助你快速搭建合成。每个示例都提供了一个可运行的项目，包含正确的合成结构、data 属性和已配置好的 GSAP 时间轴。
ℹ️ Note
想看成品视频和生产项目？请从展示作品开始。
npx hyperframes init my-video --example <name>
横屏模板
竖屏模板
💡 Tip
想要最简化的起点？使用 blank——它只提供空合成和基础脚手架，不含任何视觉设计。
npx hyperframes init my-video --example blank
如何选择示例
| 示例 | 风格 | 格式 | 适用场景 |
|---|---|---|---|
warm-grain | 温润质感 | 横屏 | 生活方式、品牌、编辑类 |
play-mode | 活力弹性 | 横屏 | 社交媒体、产品发布 |
swiss-grid | 简洁结构 | 横屏 | 企业、数据、技术类 |
kinetic-type | 戏剧化字体 | 横屏 | 促销、片头、标题卡 |
decision-tree | 图表化 | 横屏 | 讲解、教程 |
product-promo | 多场景 | 横屏 | 产品展示、演示 |
nyt-graph | 编辑风格数据 | 横屏 | 数据故事、报告 |
vignelli | 大胆排版 | 竖屏 | 标题、公告 |
blank | 最简脚手架 | — | 完全控制，Agent 生成 |
示例详情
warm-grain
warm-grain
奶油色调美学，叠加颗粒纹理。
产出效果： 包含温暖色调、纹理颗粒和流畅转场的合成。附带片头子合成和字幕支持。
my-video/
├── meta.json
├── index.html
├── compositions/
│ ├── intro.html
│ ├── graphics.html
│ └── captions.html
└── assets/
play-mode
play-mode
趣味弹性动画，大胆有力的运动效果。
my-video/
├── meta.json
├── index.html
├── compositions/
│ ├── intro.html
│ ├── stats.html
│ └── captions.html
└── assets/
swiss-grid
swiss-grid
灵感源自瑞士/国际排版风格的结构化网格布局。
my-video/
├── meta.json
├── index.html
├── compositions/
│ ├── intro.html
│ ├── graphics.html
│ └── captions.html
└── assets/
vignelli
vignelli
大胆排版配红色点缀（1080x1920 竖屏）。
my-video/
├── meta.json
├── index.html
├── compositions/
│ ├── overlays.html
│ └── captions.html
└── assets/
kinetic-type
kinetic-type
大胆的动态字体促销视频，配以戏剧化的文字动画。
my-video/
├── meta.json
├── index.html
└── compositions/
└── main-graphics.html
decision-tree
decision-tree
动态流程图，支持分支路径和渐进展示。
my-video/
├── meta.json
├── index.html
└── compositions/
└── decision_tree.html
product-promo
product-promo
多场景产品展示，使用 SVG 资产。
my-video/
├── meta.json
├── index.html
├── compositions/
│ ├── scene1-logo-intro.html
│ ├── scene2-4-canvas.html
│ └── scene5-logo-outro.html
└── assets/
├── figma-cursors.svg
├── figma-logo-pieces.svg
└── figma-logo-pills.svg
nyt-graph
nyt-graph
印刷编辑风格的动态数据图表。
my-video/
├── meta.json
├── index.html
└── compositions/
└── nyt-chart.html
blank
blank
仅包含脚手架的空合成。
my-video/
├── meta.json
├── index.html
└── compositions/
└── captions.html
传入源视频
npx hyperframes init my-video --example warm-grain --video ./my-clip.mp4
CLI 会自动探测视频的时长、分辨率和编码格式。如果视频使用了不兼容的编码格式，在 FFmpeg 可用的情况下会自动转码为 H.264 MP4。
自定义示例
任何包含 index.html 的目录都可以作为示例。你的自定义示例需要：
- 一个带有
data-composition-id根元素的index.html - 在
window.__timelines中注册的 GSAP 时间轴 - 同一目录或子目录中的资产文件
<div id="root" data-composition-id="my-example"
data-start="0" data-width="1920" data-height="1080">
<!-- Your elements here -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
const tl = gsap.timeline({ paused: true });
// Add your animations...
window.__timelines = window.__timelines || {};
window.__timelines["my-example"] = tl;
</script>
</div>
创建自定义示例后，使用代码检查器进行验证：
npx hyperframes lint