examples.mdx

title	Examples
description	Built-in examples for common video patterns. Hover to preview animations.

Hyperframes includes starter examples to help you scaffold compositions quickly. Each example gives you a working project with the correct composition structure, data attributes, and a GSAP timeline already wired up.

Looking for finished videos and production projects? Start with the [Showcase](/showcase).

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

Landscape Templates

Portrait Templates

Looking for a minimal starting point? Use **blank** — it gives you an empty composition with just the scaffolding, no visual design.

npx hyperframes init my-video --example blank

Choosing an Example

Example	Style	Format	Best for
warm-grain	Organic, textured	Landscape	Lifestyle, branding, editorial
play-mode	Energetic, elastic	Landscape	Social media, product launches
swiss-grid	Clean, structured	Landscape	Corporate, data, technical
kinetic-type	Dramatic type	Landscape	Promos, intros, title cards
decision-tree	Diagrammatic	Landscape	Explainers, tutorials
product-promo	Multi-scene	Landscape	Product showcases, demos
nyt-graph	Editorial data	Landscape	Data stories, reports
vignelli	Bold, typographic	Portrait	Headlines, announcements
blank	Minimal scaffolding	—	Full control, agent-generated

Example Details

### warm-grain

Cream-toned aesthetic with grain texture overlay.

**What it produces:** A composition with warm color grading, textured grain, and smooth transitions. Includes an intro sub-composition and captions support.

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

### play-mode

Playful elastic animations with bold, energetic motion.

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

### swiss-grid

Structured grid layout inspired by Swiss/International Typographic Style.

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

### vignelli

Bold typography with red accents (1080×1920 portrait).

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

### kinetic-type

Bold kinetic typography promo with dramatic text animations.

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

### decision-tree

Animated flowchart with branching paths and progressive reveal.

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

### product-promo

Multi-scene product showcase with SVG assets.

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

Animated data chart in print editorial style.

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

### blank

Empty composition with just the scaffolding.

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

Passing a Source Video

npx hyperframes init my-video --example warm-grain --video ./my-clip.mp4

The CLI will probe the video for duration, resolution, and codec. If the video uses an incompatible codec, it will be automatically transcoded to H.264 MP4 if FFmpeg is available.

Custom Examples

Any directory with an index.html can serve as an example. Your custom example needs:

1. An index.html with a data-composition-id root element
2. A GSAP timeline registered in window.__timelines
3. Any assets in the same directory or a subdirectory

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

After creating a custom example, validate it with the linter:

npx hyperframes lint

Next Steps

Create, preview, and render your first video Real production projects from HeyGen's launches — open-source for you to read and remix. Add animations to your example Understand the composition data model