> ## Documentation Index > Fetch the complete documentation index at: https://docs.hyperframes-zh.cn/llms.txt > Use this file to discover all available pages before exploring further. # 示例 > 常见视频模式​​的内置示例。将鼠标悬停以预览动画。 Hyperframes 包含入门示例，可帮助您快速搭建构图。每个示例都为您提供了一个具有正确的[组合结构](/concepts/compositions)、[数据属性](/concepts/data-attributes) 和已连接的[GSAP 时间线](/guides/gsap-animation) 的工作项目。 正在寻找成品视频和制作项目？从[展示](/showcase)开始。 ```bash Terminal theme={null} npx hyperframes init my-video --example ``` ## 景观模板
## 肖像模板
寻找最小起点？使用**空白**——它会给你一个空的构图，只有脚手架，没有视觉设计。 ```bash Terminal theme={null} 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 ``` ## 传递源视频 ```bash Terminal theme={null} npx hyperframes init my-video --example warm-grain --video ./my-clip.mp4 ``` CLI 将探测视频的持续时间、分辨率和编解码器。如果视频使用不兼容的编解码器，如果 FFmpeg 可用，它将自动转码为 H.264 MP4。 ## 自定义示例 任何带有 `index.html` 的目录都可以作为示例。您的自定义示例需要： 1. 具有 [`data-composition-id`](/concepts/data-attributes#composition-attributes) 根元素的 `index.html` 2. 在 `window.__timelines` 中注册的 [GSAP 时间线](/guides/gsap-animation) 3. 同一目录或子目录中的任何资产 ```html index.html theme={null}
``` 创建自定义示例后，使用 [linter](/packages/cli#lint) 验证它： ```bash Terminal theme={null} npx hyperframes lint ``` ## 下一步 创建、预览和渲染您的第一个视频 HeyGen 发布的真实制作项目 — 开源供您阅读和混音。 将动画添加到您的示例中 了解组合数据模型