---
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](/concepts/compositions), [data attributes](/concepts/data-attributes), and a [GSAP timeline](/guides/gsap-animation) already wired up.
Looking for finished videos and production projects? Start with the [Showcase](/showcase).
```bash Terminal
npx hyperframes init my-video --example
```
## Landscape Templates
Warm GrainBranding & lifestyle
Play ModeSocial media
Swiss GridCorporate & technical
Kinetic TypePromos & title cards
Decision TreeExplainers & tutorials
Product PromoProduct showcases
NYT GraphData stories
## Portrait Templates
VignelliHeadlines & announcements
Looking for a minimal starting point? Use **blank** — it gives you an empty composition with just the scaffolding, no visual design.
```bash Terminal
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
```bash Terminal
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`](/concepts/data-attributes#composition-attributes) root element
2. A [GSAP timeline](/guides/gsap-animation) registered in `window.__timelines`
3. Any assets in the same directory or a subdirectory
```html index.html
```
After creating a custom example, validate it with the [linter](/packages/cli#lint):
```bash Terminal
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