heygen-com--hyperframes/docs/examples.mdx

---
title: "Examples"
description: "Watch finished HyperFrames videos, inspect real production projects, or start from a working template."
---

Use examples in three different ways:

- **Watch** a finished result to understand what HyperFrames can make.
- **Inspect** a production project to learn how story, media, scenes, and motion fit together.
- **Start** from a template when you want working structure immediately.

## Finished production videos

These are real HyperFrames projects with public source.

<div className="not-prose grid grid-cols-1 md:grid-cols-2 gap-5 my-8">
  <div className="overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
    <video
      className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900"
      src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/hyperframes-launch-preview.mp4"
      poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/hyperframes-launch-poster.jpg"
      controls
      muted
      playsInline
      preload="metadata"
    />
    <div className="p-4">
      <div className="text-xs uppercase tracking-wide text-zinc-500">Product launch</div>
      <h3 className="mt-1 text-lg font-semibold">HyperFrames launch</h3>
      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
        A complete announcement using product UI, typography, footage, captions,
        voiceover, sound, and several animation techniques.
      </p>
      <a className="mt-3 block text-sm font-medium" href="https://github.com/heygen-com/hyperframes-launches/tree/main/hyperframes-launch">
        Inspect the source →
      </a>
    </div>
  </div>

  <div className="overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
    <video
      className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900"
      src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/timeline-editor-preview.mp4"
      poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/timeline-editor-poster.jpg"
      controls
      muted
      playsInline
      preload="metadata"
    />
    <div className="p-4">
      <div className="text-xs uppercase tracking-wide text-zinc-500">Feature reveal</div>
      <h3 className="mt-1 text-lg font-semibold">Timeline editor launch</h3>
      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
        A product reveal built around the pain of repeated editing prompts,
        followed by the visual editor as the answer.
      </p>
      <a className="mt-3 block text-sm font-medium" href="https://github.com/heygen-com/hyperframes-launches/tree/main/timeline-launch">
        Inspect the source →
      </a>
    </div>
  </div>

  <div className="overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
    <video
      className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900"
      src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/website-to-hyperframes-preview.mp4"
      poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/website-to-hyperframes-poster.jpg"
      controls
      muted
      playsInline
      preload="metadata"
    />
    <div className="p-4">
      <div className="text-xs uppercase tracking-wide text-zinc-500">Product and website video</div>
      <h3 className="mt-1 text-lg font-semibold">Website to HyperFrames</h3>
      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
        Captured product material turned into a structured promo rather than a
        simple scrolling screen recording.
      </p>
      <a className="mt-3 block text-sm font-medium" href="https://github.com/heygen-com/hyperframes-launches/tree/main/website-to-hyperframes">
        Inspect the source →
      </a>
    </div>
  </div>

  <div className="overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
    <video
      className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900"
      src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/texture-launch-preview.mp4"
      poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/texture-launch-poster.jpg"
      controls
      muted
      playsInline
      preload="metadata"
    />
    <div className="p-4">
      <div className="text-xs uppercase tracking-wide text-zinc-500">Motion and title design</div>
      <h3 className="mt-1 text-lg font-semibold">Texture launch</h3>
      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
        Expressive typography, texture masks, shader backgrounds, and compact
        transition-led storytelling.
      </p>
      <a className="mt-3 block text-sm font-medium" href="https://github.com/heygen-com/hyperframes-launches/tree/main/texture-launch-video">
        Inspect the source →
      </a>
    </div>
  </div>
</div>

## What to learn from the source

The [hyperframes-launches repository](https://github.com/heygen-com/hyperframes-launches) contains complete project folders. Depending on the project, you may find:

- `BRIEF.md`, `STORYBOARD.md`, or design notes;
- the main `index.html`;
- separate scene compositions;
- local media and fonts;
- narration, captions, music, and sound effects;
- a finished render to compare against the source.

These projects are useful references, not universal templates. Copy the production thinking and patterns that fit your work; do not copy an entire visual identity by default.

## Start from a template

Create a project with a working example:

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

<div className="not-prose grid grid-cols-2 gap-4 my-6">
  <div className="relative overflow-hidden rounded-xl bg-zinc-900">
    <video className="aspect-video w-full object-cover" src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/warm-grain.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/warm-grain.png" muted loop playsInline preload="metadata" />
    <div className="p-3 text-white"><strong>warm-grain</strong><div className="text-xs text-zinc-300">Organic brand and editorial work</div></div>
  </div>
  <div className="relative overflow-hidden rounded-xl bg-zinc-900">
    <video className="aspect-video w-full object-cover" src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/play-mode.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/play-mode.png" muted loop playsInline preload="metadata" />
    <div className="p-3 text-white"><strong>play-mode</strong><div className="text-xs text-zinc-300">Energetic social and product work</div></div>
  </div>
  <div className="relative overflow-hidden rounded-xl bg-zinc-900">
    <video className="aspect-video w-full object-cover" src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/swiss-grid.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/swiss-grid.png" muted loop playsInline preload="metadata" />
    <div className="p-3 text-white"><strong>swiss-grid</strong><div className="text-xs text-zinc-300">Structured technical or corporate stories</div></div>
  </div>
  <div className="relative overflow-hidden rounded-xl bg-zinc-900">
    <video className="aspect-video w-full object-cover" src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/kinetic-type.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/kinetic-type.png" muted loop playsInline preload="metadata" />
    <div className="p-3 text-white"><strong>kinetic-type</strong><div className="text-xs text-zinc-300">Promos, intros, and title cards</div></div>
  </div>
</div>

| Example | Good starting point for |
| --- | --- |
| `warm-grain` | Branding, lifestyle, and editorial work |
| `play-mode` | Energetic social videos and product launches |
| `swiss-grid` | Technical, structured, and corporate stories |
| `kinetic-type` | Type-led promos, intros, and title cards |
| `decision-tree` | Explainable diagrams and tutorials |
| `product-promo` | Multi-scene product showcases |
| `nyt-graph` | Editorial charts and data stories |
| `vignelli` | Bold portrait announcements |
| `blank` | Agent-generated or fully custom work |

<Tip>
  Choose a template for its structure and tone, then replace the sample content. If none fits, start with `blank` and let the agent build from the brief.
</Tip>

## Run a production project locally

The launch repository uses Git LFS for large media:

```bash
git lfs install
git clone https://github.com/heygen-com/hyperframes-launches.git
cd hyperframes-launches/hyperframes-launch
npx hyperframes preview
```

If you only need a starting structure, use a built-in template instead. It is smaller and faster to understand.