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.

hyperframes-launches

Open-source HyperFrames compositions behind HeyGen’s product launch videos.

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/
Website → HyperFrames	Companion to the website-to-video workflow — captures a site and animates it.	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/
Texture launch	Texture-mask text + shader-driven background, used as a launch teaser.	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/

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.

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

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

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

Terminal

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

Examples

Starter templates — what npx hyperframes init --example gives you.

Compositions

The composition data model these launches build on.

GSAP Animation

Timeline patterns these projects use.

Adopters

Other organizations shipping with HyperFrames.