HyperFrames Examples (2026): Real Compositions to 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, free under Apache 2.0. 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.
3. Code demos and docs-to-video (TanStack and others)
Developer-tooling teams like TanStack have explored HyperFrames for short code-demo and docs-to-video clips. The fit is natural: technical content is structured, benefits from precise timing, and often needs to be regenerated when the underlying code or docs change. Rendering it from HTML means the video can be versioned and rebuilt alongside the thing it documents.
What it teaches: HyperFrames is strong wherever the source of truth changes and the video needs to stay in sync.
4. Captions, lower thirds, and overlays
A lot of HyperFrames usage is not full videos at all but components: animated captions, lower thirds, and overlays that get composited into other footage. Because these are text-and-shape driven and need to look consistent every time, HTML rendering handles them cleanly and repeatably.
What it teaches: you do not have to use HyperFrames for the whole video. It is often the branded-motion layer on top of footage edited elsewhere.
5. Data visualizations
Animated charts and data-driven scenes are a recurring HyperFrames use case, because the data lives in code and the animation can be bound to it. Feed in numbers, render a chart animation, regenerate when the numbers change.
What it teaches: when your video is a function of data, code-as-video is the right shape, and HyperFrames does it without a heavy framework.
The example you will never find
Here is the honest boundary, and it matters because third-party blogs keep getting it wrong. You will never find a HyperFrames example of generated footage, a photorealistic scene, or a talking-head avatar, because HyperFrames does not do that. It renders what a browser can draw: graphics, text, SVG, canvas, and animation libraries. The "AI" is the agent that writes the HTML, not a model that paints the pixels. If an example claims to show HyperFrames "generating video with AI," it is mislabeled.
When you want the result, not the composition
Notice what every example above has in common: someone wrote code to produce it. That is the whole point of HyperFrames, and it is great if you are in the code lane. If you looked at these examples and thought "I want that polished result, but I do not want to write the HTML," that is the signal for a different tool.
A Motion Agent gives you the finished result without the composition. Instead of building the scene, you describe it in plain language, it calls a branded, market-tested template, and you export, no HTML, from $9.90/mo or $2.90 per export. You can browse what that looks like across 1,000,000+ creators' use cases, then drop the clip straight into your edit. If you want HyperFrames specifically but do not code, start with HyperFrames for marketers; if you are comparing tools, see HyperFrames alternatives or the head-to-head in HyperFrames vs Remotion.
FAQ
Where can I find HyperFrames examples? HeyGen open-sources its own launch-video compositions, and adopters like tldraw and TanStack use it publicly for PR walkthroughs and code demos. Those are the most instructive real examples.
What can you actually build with HyperFrames? Launch and product videos, PR walkthroughs, code demos, animated captions and lower thirds, and data visualizations, anything structured and repeatable that a browser can render.
Can HyperFrames make realistic or AI-generated video? No. It renders graphics, text, and animation, not generated footage or avatars. Examples claiming otherwise are mislabeled.
Is there a no-code way to get HyperFrames-style results? Yes. A Motion Agent like AutoAE produces branded motion graphics from a plain-language description, no code, from $2.90 per export.
Are HyperFrames examples free to use as a starting point? HeyGen open-sources its own compositions under Apache 2.0, so you can read, fork, and remix them at no cost. See is HyperFrames free for the full license picture.