> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-codex-docs-human-first-refactor.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Examples

> 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 theme={null}
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 theme={null}
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.