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. 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 here	Why
A product announcement	HyperFrames launch	Shows a complete launch narrative with multiple animation runtimes.
A website-to-video product tour	Website to HyperFrames	Shows captured website footage, agent prompts, captions, VO, and SFX.
A product UI reveal	Timeline editor launch	Shows mockups, interface closeups, and feature storytelling.
A texture or title-card system	Texture launch	Shows expressive text treatment and shader-backed motion.
An effects-heavy launch reel	VFX x HeyGen combined	Shows Three.js, generated media, and HTML-in-canvas in one render.
A starter project	Examples	Scaffold working templates with npx hyperframes init --example <name>.
A reusable motion part	Catalog	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.

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.