示例 - HyperFrames

Hyperframes 包含入门示例，可帮助您快速搭建构图。每个示例都为您提供了一个具有正确的组合结构、数据属性和已连接的GSAP 时间线的工作项目。

正在寻找成品视频和制作项目？从展示开始。

Terminal

npx hyperframes init my-video --example <name>

景观模板

温暖的谷物品牌与生活方式

播放模式社交媒体

瑞士电网企业与技术

动力型促销和标题卡

决策树解释者和教程

产品促销产品展示

纽约时报图数据故事

肖像模板

葡萄园标题和公告

寻找最小起点？使用空白——它会给你一个空的构图，只有脚手架，没有视觉设计。

Terminal

npx hyperframes init my-video --example blank

选择一个例子

例子	风格	格式	最适合
`warm-grain`	有机、有质感	景观	生活方式、品牌、社论
`play-mode`	精力充沛、有弹性	景观	社交媒体、产品发布
`swiss-grid`	干净、结构化	景观	企业、数据、技术
`kinetic-type`	戏剧型	景观	宣传片、简介、标题卡
`decision-tree`	图解式	景观	讲解员、教程
`product-promo`	多场景	景观	产品展示、演示
`nyt-graph`	编辑数据	景观	数据故事、报告
`vignelli`	粗体、印刷	肖像	头条新闻、公告
`blank`	最少的脚手架	—	完全控制，代理生成

示例详细信息

暖粒

奶油色美感与颗粒纹理叠加。它产生什么： 具有温暖的颜色分级、纹理纹理和平滑过渡的组合。包括介绍子构图和字幕支持。

my-video/
├── meta.json
├── index.html
├── compositions/
│   ├── intro.html
│   ├── graphics.html
│   └── captions.html
└── assets/

播放模式

俏皮的弹性动画以及大胆、充满活力的动作。

my-video/
├── meta.json
├── index.html
├── compositions/
│   ├── intro.html
│   ├── stats.html
│   └── captions.html
└── assets/

瑞士电网

结构化网格布局的灵感来自瑞士/国际印刷风格。

my-video/
├── meta.json
├── index.html
├── compositions/
│   ├── intro.html
│   ├── graphics.html
│   └── captions.html
└── assets/

葡萄园

带有红色强调的大胆排版（1080×1920 纵向）。

my-video/
├── meta.json
├── index.html
├── compositions/
│   ├── overlays.html
│   └── captions.html
└── assets/

动力型

大胆的动态排版促销与戏剧性的文本动画。

my-video/
├── meta.json
├── index.html
└── compositions/
    └── main-graphics.html

决策树

具有分支路径和渐进显示的动画流程图。

my-video/
├── meta.json
├── index.html
└── compositions/
    └── decision_tree.html

产品促销

使用 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-图

印刷编辑风格的动画数据图表。

my-video/
├── meta.json
├── index.html
└── compositions/
    └── nyt-chart.html

空白的

只有脚手架的空构图。

my-video/
├── meta.json
├── index.html
└── compositions/
    └── captions.html

传递源视频

Terminal

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 时间线
同一目录或子目录中的任何资产

index.html

<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>

创建自定义示例后，使用 linter 验证它：

Terminal

npx hyperframes lint

下一步

快速入门

创建、预览和渲染您的第一个视频

发布视频

HeyGen 发布的真实制作项目 — 开源供您阅读和混音。

GSAP动画

将动画添加到您的示例中

作文

了解组合数据模型

​景观模板

​肖像模板

​选择一个例子

​示例详细信息

​暖粒

​播放模式

​瑞士电网

​葡萄园

​动力型

​决策树

​产品促销

​nyt-图

​空白的

​传递源视频

​自定义示例

​下一步

快速入门

发布视频

GSAP动画

作文

景观模板

肖像模板

选择一个例子

示例详细信息

暖粒

播放模式

瑞士电网

葡萄园

动力型

决策树

产品促销

nyt-图

空白的

传递源视频

自定义示例

下一步