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

import { DocsVideo } from "/snippets/docs-video.jsx";

## Finished films

Each preview links to the complete source project.

<div className="not-prose grid grid-cols-1 md:grid-cols-2 gap-4 my-7">
  <a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/hyperframes-launch">
    <video className="aspect-video w-full object-cover" 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" autoPlay muted loop playsInline preload="metadata" />
    <div className="p-4">
      <strong className="block text-sm">HyperFrames launch</strong>
      <span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Product film · source included</span>
    </div>
  </a>

  <a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/timeline-launch">
    <video className="aspect-video w-full object-cover" 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" autoPlay muted loop playsInline preload="metadata" />
    <div className="p-4">
      <strong className="block text-sm">Timeline editor launch</strong>
      <span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Feature reveal · source included</span>
    </div>
  </a>

<a
  className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950"
  href="https://github.com/heygen-com/hyperframes-launches/tree/main/website-to-hyperframes"
>
  <video
    className="aspect-video w-full object-cover"
    src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/website-to-hyperframes-preview-v4.mp4"
    poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/website-to-hyperframes-poster.jpg"
    autoPlay
    muted
    loop
    playsInline
    preload="metadata"
  />
  <div className="p-4">
    <strong className="block text-sm">Website to HyperFrames</strong>
    <span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">
      Product story · source included
    </span>
  </div>
</a>

  <a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/texture-launch-video">
    <video className="aspect-video w-full object-cover" 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" autoPlay muted loop playsInline preload="metadata" />
    <div className="p-4">
      <strong className="block text-sm">Texture launch</strong>
      <span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Motion design · source included</span>
    </div>
  </a>
</div>

## One project, open end to end

This is the same small project used in the Quickstart. Its request, brief,
source, revision notes, checks, and final render are all public.

```text
Using /hyperframes, make a 10-second product intro for https://example.com.
```

<CardGroup cols={2}>
  <Card title="Brief" icon="clipboard-list" href="https://github.com/heygen-com/hyperframes/blob/main/examples/docs-reference-project/BRIEF.md">
    What the agent decided before building anything.
  </Card>
  <Card title="Source" icon="folder-open" href="https://github.com/heygen-com/hyperframes/tree/main/examples/docs-reference-project">
    Every editable project file, exactly as it renders.
  </Card>
  <Card title="Revision" icon="pen-to-square" href="https://github.com/heygen-com/hyperframes/blob/main/examples/docs-reference-project/VERIFICATION.md#2-v1--v2">
    What changed between the first and second cut, and why.
  </Card>
  <Card title="Checks" icon="circle-check" href="https://github.com/heygen-com/hyperframes/blob/main/examples/docs-reference-project/VERIFICATION.md">
    The real gate output: lint, check, contrast, and the final render.
  </Card>
</CardGroup>

The result is not a sealed demo. Open any stage above and use the same shape for
your own project: request → brief → source → revision → render.

## Start from a template

Create a project with a working example:

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

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

## Related topics

- [Make your first video](/quickstart)
- [Choose a creation workflow](/workflows)
- [Take more control of an existing project](/go-further)