hyperframes/docs/examples.mdx

---
title: Examples
description: "Built-in examples for common video patterns. Each preview is a live HyperFrames composition."
---

import { TemplateCard, TemplateGrid } from "./snippets/TemplateCard.jsx";

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.

```bash Terminal
npx hyperframes init my-video --example <name>
```

## Landscape Templates

<TemplateGrid>
  <TemplateCard id="warm-grain" title="Warm Grain" description="Branding & lifestyle" href="#warm-grain" />
  <TemplateCard id="play-mode" title="Play Mode" description="Social media" href="#play-mode" />
  <TemplateCard id="swiss-grid" title="Swiss Grid" description="Corporate & technical" href="#swiss-grid" />
  <TemplateCard id="kinetic-type" title="Kinetic Type" description="Promos & title cards" href="#kinetic-type" />
  <TemplateCard id="decision-tree" title="Decision Tree" description="Explainers & tutorials" href="#decision-tree" />
  <TemplateCard id="product-promo" title="Product Promo" description="Product showcases" href="#product-promo" />
  <TemplateCard id="nyt-graph" title="NYT Graph" description="Data stories" href="#nyt-graph" />
</TemplateGrid>

## Portrait Templates

<div className="my-6">
  <TemplateGrid columns={3}>
    <TemplateCard
      id="vignelli"
      title="Vignelli"
      description="Headlines & announcements"
      href="#vignelli"
      portrait
    />
  </TemplateGrid>
</div>

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

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

<Tabs>
  <Tab title="warm-grain">
    ### 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/
    ```
  </Tab>
  <Tab title="play-mode">
    ### play-mode

    Playful elastic animations with bold, energetic motion.

    ```
    my-video/
    ├── meta.json
    ├── index.html
    ├── compositions/
    │   ├── intro.html
    │   ├── stats.html
    │   └── captions.html
    └── assets/
    ```
  </Tab>
  <Tab title="swiss-grid">
    ### 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/
    ```
  </Tab>
  <Tab title="vignelli">
    ### vignelli

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

    ```
    my-video/
    ├── meta.json
    ├── index.html
    ├── compositions/
    │   ├── overlays.html
    │   └── captions.html
    └── assets/
    ```
  </Tab>
  <Tab title="kinetic-type">
    ### kinetic-type

    Bold kinetic typography promo with dramatic text animations.

    ```
    my-video/
    ├── meta.json
    ├── index.html
    └── compositions/
        └── main-graphics.html
    ```
  </Tab>
  <Tab title="decision-tree">
    ### decision-tree

    Animated flowchart with branching paths and progressive reveal.

    ```
    my-video/
    ├── meta.json
    ├── index.html
    └── compositions/
        └── decision_tree.html
    ```
  </Tab>
  <Tab title="product-promo">
    ### 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
    ```
  </Tab>
  <Tab title="nyt-graph">
    ### nyt-graph

    Animated data chart in print editorial style.

    ```
    my-video/
    ├── meta.json
    ├── index.html
    └── compositions/
        └── nyt-chart.html
    ```
  </Tab>
  <Tab title="blank">
    ### blank

    Empty composition with just the scaffolding.

    ```
    my-video/
    ├── meta.json
    ├── index.html
    └── compositions/
        └── captions.html
    ```
  </Tab>
</Tabs>

## 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
<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](/packages/cli#lint):

```bash Terminal
npx hyperframes lint
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Create, preview, and render your first video
  </Card>
  <Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
    Add animations to your example
  </Card>
  <Card title="Compositions" icon="layer-group" href="/concepts/compositions">
    Understand the composition data model
  </Card>
  <Card title="Rendering" icon="film" href="/guides/rendering">
    Render your composition to MP4
  </Card>
</CardGroup>