Skip to main content
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. This page is the visual gallery; Launch Videos is the deeper teardown.

​
Production Launches

Product launch

​
HyperFrames launch video

A full announcement video with CSS, GSAP, Lottie, shader transitions, Three.js, footage compositing, captions, voiceover, and SFX.

View source ->
Website to video

​
Website to HyperFrames demo

A 41.8-second launch video showing AI agents turning websites into product promos, social ads, feature showcases, and brand reels.

View source ->
Product reveal

​
Timeline editor launch

A launch reveal with UI mockups, voiceover, SFX, prompt-driven iteration, and a narrative arc around fine-tuning rendered video.

View source ->
Title system

​
Texture launch

Texture-mask typography, shader backgrounds, and transition-heavy title design built as a full HyperFrames composition.

View source ->
VFX system

​
VFX x HeyGen combined

A rendered effects reel combining Three.js, HTML-in-canvas, generated media, text animation, and product UI beats.

View source ->
Community playground
Open. Remix. Publish.

Use hyperframes.dev to preview community projects, share your own, and keep iterating in the browser.

Playground

​
hyperframes.dev

A hosted community surface for previewing, iterating, sharing, and rendering HTML-native video projects.

Open playground ->

​
Go Deeper

Launch Videos

Read the production notes, project structure, and Git LFS clone options behind these launches.

Source Repository

Open the full collection of HeyGen launch compositions.

​
Start from a Use Case

If you want to build…Start hereWhy
A product announcementHyperFrames launchShows a complete launch narrative with multiple animation runtimes.
A website-to-video product tourWebsite to HyperFramesShows captured website footage, agent prompts, captions, VO, and SFX.
A product UI revealTimeline editor launchShows mockups, interface closeups, and feature storytelling.
A texture or title-card systemTexture launchShows expressive text treatment and shader-backed motion.
An effects-heavy launch reelVFX x HeyGen combinedShows Three.js, generated media, and HTML-in-canvas in one render.
A starter projectExamplesScaffold working templates with npx hyperframes init --example <name>.
A reusable motion partCatalogAdd 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.
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:
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

Starter Examples

Scaffold remixable templates with npx hyperframes init --example.

Community Playground

Open shared projects, preview videos, and publish your own.

Website to Video

Turn websites into rendered videos with an agent-friendly workflow.

Pipeline Guide

Learn the storyboard, script, design, and render loop behind larger videos.