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

# Launch Videos

> Open-source HyperFrames compositions behind HeyGen's product launch videos — real production projects you can read, run, and remix.

The HeyGen team builds its launch videos in HyperFrames. Every composition — including the original HyperFrames announcement, the Timeline Editor reveal, and the Website-to-Video demo — lives in a public repository you can read, run, and remix.

<Card title="hyperframes-launches" icon="github" href="https://github.com/heygen-com/hyperframes-launches">
  Open-source HyperFrames compositions behind HeyGen's product launch videos.
</Card>

Want to browse the finished videos first? Start with the [Showcase](/showcase).
This page is the deeper production writeup for the same launch projects.

## What's in there

Each subdirectory is a standalone HyperFrames project — `index.html`, `compositions/`, `assets/`, and a rendered output you can compare against:

| Project                    | What it shows                                                                                                                                                    | Source                                                                                                           |
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| **HyperFrames launch**     | The original announcement video — 49.7 s, glass-frame intro, CSS / GSAP / Lottie / shader / Three.js flex section, full narrative arc.                           | [`hyperframes-launch/`](https://github.com/heygen-com/hyperframes-launches/tree/main/hyperframes-launch)         |
| **Website → HyperFrames**  | Companion to the [website-to-video](/guides/website-to-video) workflow — captures a site and animates it.                                                        | [`website-to-hyperframes/`](https://github.com/heygen-com/hyperframes-launches/tree/main/website-to-hyperframes) |
| **Timeline Editor launch** | 60 fps reveal video for the HyperFrames Timeline Editor: late-SFX cold open, chat-spiral of fine-tune prompts, editor reveal.                                    | [`timeline-launch/`](https://github.com/heygen-com/hyperframes-launches/tree/main/timeline-launch)               |
| **Texture launch**         | Texture-mask text + shader-driven background, used as a launch teaser.                                                                                           | [`texture-launch-video/`](https://github.com/heygen-com/hyperframes-launches/tree/main/texture-launch-video)     |
| **VFX × HeyGen combined**  | Multi-act video chaining a VFX text-cursor scene with the HeyGen iPhone canvas test — useful as a reference for combining two existing projects into one render. | [`vfx-heygen-combined/`](https://github.com/heygen-com/hyperframes-launches/tree/main/vfx-heygen-combined)       |

Storyboards (`STORYBOARD.md`), design notes (`DESIGN.md`), and handoff docs (`HANDOFF.md`) sit next to the source so you can see not just the code but the production thinking: VO direction, beat timing, color/style decisions. The structure follows the [Hyperframes pipeline](/guides/pipeline), which documents each artifact in detail.

## Why these are useful

These aren't toy examples. They're the same compositions HeyGen ships in public launch videos, structured the way real production work is structured:

* **Multi-composition projects.** Most launches are 4-8 sub-compositions wired into one root timeline — useful when your `npx hyperframes init --example` starter outgrows a single file.
* **Real adapter mix.** GSAP timelines, Lottie animations, custom shaders, Three.js scenes, and CSS keyframes all coexisting in one render. See how the team [boots multiple adapters](/guides/gsap-animation) inside a single composition.
* **Production-grade timing.** ElevenLabs VO + per-beat SFX + underscore mixed against frame-accurate motion. The storyboards describe the timing decisions; the source shows them executed.
* **No proprietary plugins.** Everything renders with the same `hyperframes render` you have locally — there's no internal-only branch of the engine.

## Cloning

The repo uses Git LFS for video, audio, image, and font assets:

```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/hyperframes-launch
hyperframes preview    # opens the studio for that launch
```

To clone just the source (skip large LFS assets and pull on demand):

```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="hyperframes-launch/assets/*"
```

## Next steps

<CardGroup cols={2}>
  <Card title="Examples" icon="layer-group" href="/examples">
    Starter templates — what `npx hyperframes init --example` gives you.
  </Card>

  <Card title="Compositions" icon="diagram-project" href="/concepts/compositions">
    The composition data model these launches build on.
  </Card>

  <Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
    Timeline patterns these projects use.
  </Card>

  <Card title="Adopters" icon="users" href="/community/adopters">
    Other organizations shipping with HyperFrames.
  </Card>
</CardGroup>