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

---
title: Showcase
description: "Finished HyperFrames videos you can watch, read, run, and remix."
---

The README explains what HyperFrames is. This page shows what you can build with it.

Every project below is a real HyperFrames composition with source you can inspect,
preview, render, and remix.

Want the production notes, repo structure, and clone options behind these videos?
Read [Launch Videos](/launch-videos). This page is the visual gallery; Launch
Videos is the deeper teardown.

## Production Launches

<div className="not-prose grid grid-cols-1 md:grid-cols-2 gap-5 my-8">
  <div
    className="group block overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg 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
      loop
      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 text-zinc-950 dark:text-zinc-50">HyperFrames launch video</h3>
      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
        A full announcement video with CSS, GSAP, Lottie, shader transitions, Three.js,
        footage compositing, captions, voiceover, and SFX.
      </p>
      <a
        className="mt-3 block text-sm font-medium text-zinc-950 dark:text-zinc-50"
        href="https://github.com/heygen-com/hyperframes-launches/tree/main/hyperframes-launch"
      >
        View source ->
      </a>
    </div>
  </div>

  <div
    className="group block overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg 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
      loop
      playsInline
      preload="metadata"
    />
    <div className="p-4">
      <div className="text-xs uppercase tracking-wide text-zinc-500">Website to video</div>
      <h3 className="mt-1 text-lg font-semibold text-zinc-950 dark:text-zinc-50">Website to HyperFrames demo</h3>
      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
        A 41.8-second launch video showing AI agents turning websites into product
        promos, social ads, feature showcases, and brand reels.
      </p>
      <a
        className="mt-3 block text-sm font-medium text-zinc-950 dark:text-zinc-50"
        href="https://github.com/heygen-com/hyperframes-launches/tree/main/website-to-hyperframes"
      >
        View source ->
      </a>
    </div>
  </div>

  <div
    className="group block overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg 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
      loop
      playsInline
      preload="metadata"
    />
    <div className="p-4">
      <div className="text-xs uppercase tracking-wide text-zinc-500">Product reveal</div>
      <h3 className="mt-1 text-lg font-semibold text-zinc-950 dark:text-zinc-50">Timeline editor launch</h3>
      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
        A launch reveal with UI mockups, voiceover, SFX, prompt-driven iteration,
        and a narrative arc around fine-tuning rendered video.
      </p>
      <a
        className="mt-3 block text-sm font-medium text-zinc-950 dark:text-zinc-50"
        href="https://github.com/heygen-com/hyperframes-launches/tree/main/timeline-launch"
      >
        View source ->
      </a>
    </div>
  </div>

  <div
    className="group block overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg 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
      loop
      playsInline
      preload="metadata"
    />
    <div className="p-4">
      <div className="text-xs uppercase tracking-wide text-zinc-500">Title system</div>
      <h3 className="mt-1 text-lg font-semibold text-zinc-950 dark:text-zinc-50">Texture launch</h3>
      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
        Texture-mask typography, shader backgrounds, and transition-heavy title
        design built as a full HyperFrames composition.
      </p>
      <a
        className="mt-3 block text-sm font-medium text-zinc-950 dark:text-zinc-50"
        href="https://github.com/heygen-com/hyperframes-launches/tree/main/texture-launch-video"
      >
        View source ->
      </a>
    </div>
  </div>

  <div
    className="group block overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg 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/vfx-heygen-preview.mp4"
      poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/vfx-heygen-poster.jpg"
      controls
      muted
      loop
      playsInline
      preload="metadata"
    />
    <div className="p-4">
      <div className="text-xs uppercase tracking-wide text-zinc-500">VFX system</div>
      <h3 className="mt-1 text-lg font-semibold text-zinc-950 dark:text-zinc-50">VFX x HeyGen combined</h3>
      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
        A rendered effects reel combining Three.js, HTML-in-canvas, generated
        media, text animation, and product UI beats.
      </p>
      <a
        className="mt-3 block text-sm font-medium text-zinc-950 dark:text-zinc-50"
        href="https://github.com/heygen-com/hyperframes-launches/tree/main/vfx-heygen-combined"
      >
        View source ->
      </a>
    </div>
  </div>

  <a
    className="group block overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg dark:border-zinc-800 dark:bg-zinc-950"
    href="https://www.hyperframes.dev/"
  >
    <div className="aspect-video w-full bg-zinc-950 p-6 text-white">
      <div className="flex h-full flex-col justify-between">
        <div className="text-sm text-zinc-400">Community playground</div>
        <div>
          <div className="text-3xl font-semibold">Open. Remix. Publish.</div>
          <p className="mt-3 max-w-md text-sm text-zinc-300">
            Use hyperframes.dev to preview community projects, share your own,
            and keep iterating in the browser.
          </p>
        </div>
      </div>
    </div>
    <div className="p-4">
      <div className="text-xs uppercase tracking-wide text-zinc-500">Playground</div>
      <h3 className="mt-1 text-lg font-semibold text-zinc-950 dark:text-zinc-50">hyperframes.dev</h3>
      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
        A hosted community surface for previewing, iterating, sharing, and
        rendering HTML-native video projects.
      </p>
      <div className="mt-3 text-sm font-medium text-zinc-950 dark:text-zinc-50">Open playground -></div>
    </div>
  </a>
</div>

## Go Deeper

<CardGroup cols={2}>
  <Card title="Launch Videos" icon="rocket" href="/launch-videos">
    Read the production notes, project structure, and Git LFS clone options behind
    these launches.
  </Card>
  <Card title="Source Repository" icon="github" href="https://github.com/heygen-com/hyperframes-launches">
    Open the full collection of HeyGen launch compositions.
  </Card>
</CardGroup>

## Start from a Use Case

| If you want to build... | Start here | Why |
| --- | --- | --- |
| A product announcement | [HyperFrames launch](https://github.com/heygen-com/hyperframes-launches/tree/main/hyperframes-launch) | Shows a complete launch narrative with multiple animation runtimes. |
| A website-to-video product tour | [Website to HyperFrames](https://github.com/heygen-com/hyperframes-launches/tree/main/website-to-hyperframes) | Shows captured website footage, agent prompts, captions, VO, and SFX. |
| A product UI reveal | [Timeline editor launch](https://github.com/heygen-com/hyperframes-launches/tree/main/timeline-launch) | Shows mockups, interface closeups, and feature storytelling. |
| A texture or title-card system | [Texture launch](https://github.com/heygen-com/hyperframes-launches/tree/main/texture-launch-video) | Shows expressive text treatment and shader-backed motion. |
| An effects-heavy launch reel | [VFX x HeyGen combined](https://github.com/heygen-com/hyperframes-launches/tree/main/vfx-heygen-combined) | Shows Three.js, generated media, and HTML-in-canvas in one render. |
| A starter project | [Examples](/examples) | Scaffold working templates with `npx hyperframes init --example <name>`. |
| A reusable motion part | [Catalog](/catalog/blocks/data-chart) | Add blocks and components to an existing composition. |

## Run One Locally

These launch projects use Git LFS for video, audio, image, and font assets.
Install Git LFS before cloning; otherwise the preview opens with pointer files
instead of the real media.

```bash Terminal
brew install git-lfs   # macOS, or your platform's git-lfs install
git lfs install
git clone https://github.com/heygen-com/hyperframes-launches.git
cd hyperframes-launches/website-to-hyperframes

npx hyperframes preview
npx hyperframes render
```

To skip pulling every launch asset up front, clone first and pull only the
project you want to run:

```bash Terminal
GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes-launches.git
cd hyperframes-launches
git lfs pull --include="website-to-hyperframes/**"
cd website-to-hyperframes

npx hyperframes preview
```

The launch projects include source HTML, sub-compositions, assets, rendered
outputs, and production notes such as `STORYBOARD.md`, `DESIGN.md`, and
`HANDOFF.md` where available.

## Next Steps

<CardGroup cols={2}>
  <Card title="Starter Examples" icon="layer-group" href="/examples">
    Scaffold remixable templates with `npx hyperframes init --example`.
  </Card>
  <Card title="Community Playground" icon="play" href="https://www.hyperframes.dev/">
    Open shared projects, preview videos, and publish your own.
  </Card>
  <Card title="Website to Video" icon="globe" href="/guides/website-to-video">
    Turn websites into rendered videos with an agent-friendly workflow.
  </Card>
  <Card title="Pipeline Guide" icon="diagram-project" href="/guides/pipeline">
    Learn the storyboard, script, design, and render loop behind larger videos.
  </Card>
</CardGroup>