HyperFrames Examples (2026): Real Compositions You Can Learn From
The quickest way to understand what HyperFrames is good for is to stop reading feature lists and look at what people render with it. HyperFrames turns HTML into video, so the examples that exist tell you exactly where it shines and where it stops. Here are the real, public ones worth studying, and what each teaches.
TL;DR — what HyperFrames is used for
| Example type | What it shows |
|---|---|
| Launch / product videos | On-brand motion graphics, remixable as code |
| PR walkthrough videos | Automated, repeatable dev content |
| Code demos | Structured technical explainers |
| Captions & lower thirds | Text-driven overlays at scale |
| Data visualizations | Animated charts from real numbers |
| What you won't see | Generated footage or avatars (it doesn't do that) |
Every example below is structured, branded, repeatable motion graphics, the same family as a Motion Agent, reached from the code side. For the full primer, see what is HyperFrames.
1. HeyGen's own launch videos
The most useful examples are HeyGen's, because the company ships its own HyperFrames compositions as open source. That means a product or launch video you see from them is not a black box, it is HTML you can open, read, and remix. For someone learning the framework, this is the best classroom: real, production motion graphics with the actual code attached, so you can see how timing, type, and brand elements are structured.
What it teaches: HyperFrames is genuinely capable of polished, on-brand launch content, and the open-source compositions are a head start over building from scratch.
2. Automated PR walkthrough videos (tldraw)
tldraw uses HyperFrames to generate pull-request walkthrough videos, animated code diffs with narration and captions, automatically. This is the example that best captures the framework's real superpower: not one hero video, but the same kind of video produced over and over, deterministically, as part of a workflow. A PR merges, a video gets rendered, no one drags anything on a timeline.
What it teaches: the value compounds when the video is repeatable. If you make the same shape of clip many times, HyperFrames turns it into a pipeline.