> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes.heygen.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Showcase

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