Skip to content

Commit e92daf0

Browse files
jrusso1020jrusso1020
authored
Merge pull request heygen-com#696 from heygen-com/docs/hyperframes-launches-showcase
docs: add Launch Videos page linking to hyperframes-launches repo
2 parents b6e712f + 1d8531d commit e92daf0

4 files changed

Lines changed: 77 additions & 4 deletions

File tree

‎docs/community/adopters.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ If you'd rather not be listed publicly, we'd still love to hear about your usage
2828
| -------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------ |
2929
| [HeyGen](https://www.heygen.com) | [@jrusso1020](https://github.com/jrusso1020) | Powers AI-generated video composition and rendering across HeyGen's video product surface. |
3030

31+
The HeyGen team's actual launch-video sources (the ones featured in product announcements) live at [hyperframes-launches](https://github.com/heygen-com/hyperframes-launches) — see [Launch Videos](/launch-videos) for the writeup.
32+
3133
## Evaluating
3234

3335
_Open a PR to add your organization here if you're trying HyperFrames in a non-production context._

‎docs/docs.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@
5454
"pages": [
5555
"introduction",
5656
"quickstart",
57-
"examples"
57+
"examples",
58+
"launch-videos"
5859
]
5960
},
6061
{

‎docs/examples.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -258,13 +258,13 @@ npx hyperframes lint
258258
<Card title="Quickstart" icon="rocket" href="/quickstart">
259259
Create, preview, and render your first video
260260
</Card>
261+
<Card title="Launch Videos" icon="github" href="/launch-videos">
262+
Real production projects from HeyGen's launches — open-source for you to read and remix.
263+
</Card>
261264
<Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
262265
Add animations to your example
263266
</Card>
264267
<Card title="Compositions" icon="layer-group" href="/concepts/compositions">
265268
Understand the composition data model
266269
</Card>
267-
<Card title="Rendering" icon="film" href="/guides/rendering">
268-
Render your composition to MP4
269-
</Card>
270270
</CardGroup>

‎docs/launch-videos.mdx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
title: "Launch Videos"
3+
description: "Open-source HyperFrames compositions behind HeyGen's product launch videos — real production projects you can read, run, and remix."
4+
---
5+
6+
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.
7+
8+
<Card title="hyperframes-launches" icon="github" href="https://github.com/heygen-com/hyperframes-launches">
9+
Open-source HyperFrames compositions behind HeyGen's product launch videos.
10+
</Card>
11+
12+
## What's in there
13+
14+
Each subdirectory is a standalone HyperFrames project — `index.html`, `compositions/`, `assets/`, and a rendered output you can compare against:
15+
16+
| Project | What it shows | Source |
17+
| --- | --- | --- |
18+
| **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) |
19+
| **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) |
20+
| **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) |
21+
| **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) |
22+
| **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) |
23+
24+
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.
25+
26+
## Why these are useful
27+
28+
These aren't toy examples. They're the same compositions HeyGen ships in public launch videos, structured the way real production work is structured:
29+
30+
- **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.
31+
- **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.
32+
- **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.
33+
- **No proprietary plugins.** Everything renders with the same `hyperframes render` you have locally — there's no internal-only branch of the engine.
34+
35+
## Cloning
36+
37+
The repo uses Git LFS for video, audio, image, and font assets:
38+
39+
```bash Terminal
40+
brew install git-lfs # macOS — or your platform's git-lfs install
41+
git lfs install
42+
git clone https://github.com/heygen-com/hyperframes-launches.git
43+
cd hyperframes-launches/hyperframes-launch
44+
hyperframes preview # opens the studio for that launch
45+
```
46+
47+
To clone just the source (skip large LFS assets and pull on demand):
48+
49+
```bash Terminal
50+
GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes-launches.git
51+
cd hyperframes-launches
52+
git lfs pull --include="hyperframes-launch/assets/*"
53+
```
54+
55+
## Next steps
56+
57+
<CardGroup cols={2}>
58+
<Card title="Examples" icon="layer-group" href="/examples">
59+
Starter templates — what `npx hyperframes init --example` gives you.
60+
</Card>
61+
<Card title="Compositions" icon="diagram-project" href="/concepts/compositions">
62+
The composition data model these launches build on.
63+
</Card>
64+
<Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
65+
Timeline patterns these projects use.
66+
</Card>
67+
<Card title="Adopters" icon="users" href="/community/adopters">
68+
Other organizations shipping with HyperFrames.
69+
</Card>
70+
</CardGroup>

0 commit comments

Comments
 (0)