mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
ukimsanov
98ae45e066
Two reverse-engineering campaigns (THE OBLIST, Srinika x Mercury), each showing the reference original beside its frame-matched HyperFrames replica. Assets on the docs CDN; kept separate from the '100% HyperFrames' grid since the reference films are the originals.
182 lines
20 KiB
Plaintext
182 lines
20 KiB
Plaintext
---
|
||
title: "Examples"
|
||
description: "Watch finished HyperFrames videos, inspect real production projects, or start from a working template."
|
||
---
|
||
|
||
import { DocsVideo } from "/snippets/docs-video.jsx";
|
||
|
||
## What HyperFrames can make
|
||
|
||
Every film below is 100% HyperFrames — HTML rendered frame by frame, no other tool. They are grouped by what they show off. Where a source project is public, the card links to it.
|
||
|
||
### Product & launch films
|
||
|
||
A whole product cut into a launch film — its own screens, type and colour.
|
||
|
||
<div className="not-prose grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
|
||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-HF-heygen-stripe-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-HF-heygen-stripe-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">HeyGen × Stripe</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Product launch, 4K · 100% HyperFrames</span></div>
|
||
</div>
|
||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/hyperframes-launch">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-hyperframes-launch-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-hyperframes-launch-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">HyperFrames launch</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">The framework's own launch · source included</span></div>
|
||
</a>
|
||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/website-to-hyperframes">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-website-to-hyperframes-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-website-to-hyperframes-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">Website → video</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">A live site becomes a promo · source included</span></div>
|
||
</a>
|
||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/spacex-launch">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-spacex-launch-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-spacex-launch-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">SpaceX explainer</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Data and motion at scale · source included</span></div>
|
||
</a>
|
||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-k3-promo-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-k3-promo-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">K3 promo</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Short product spot · 100% HyperFrames</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
### The tooling, shown working
|
||
|
||
Each film is HyperFrames demonstrating one of its own features.
|
||
|
||
<div className="not-prose grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
|
||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/skills-launch-video">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-skills-launch-video-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-skills-launch-video-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">Agent skills</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">The skill system · source included</span></div>
|
||
</a>
|
||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/keyframes-launch">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-keyframes-launch-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-keyframes-launch-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">Keyframes</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Seek-safe animation · source included</span></div>
|
||
</a>
|
||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/timeline-launch">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-timeline-launch-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-timeline-launch-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">Timeline editor</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Studio timeline · source included</span></div>
|
||
</a>
|
||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/inspector-launch">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-inspector-launch-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-inspector-launch-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">Studio inspector</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Editing on the canvas · source included</span></div>
|
||
</a>
|
||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/variables-launch">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-variables-launch-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-variables-launch-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">Variables</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">One composition, many versions · source included</span></div>
|
||
</a>
|
||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/cloud-render-launch">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-cloud-render-launch-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-cloud-render-launch-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">Cloud rendering</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Render on HeyGen's cloud · source included</span></div>
|
||
</a>
|
||
</div>
|
||
|
||
### Motion, sound & effects
|
||
|
||
Motion is the message — kinetic type, beat-synced cuts, texture and VFX.
|
||
|
||
<div className="not-prose grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
|
||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-texture-launch-video-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-texture-launch-video-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">Texture launch</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Motion design · 100% HyperFrames</span></div>
|
||
</div>
|
||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-vfx-heygen-combined-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-vfx-heygen-combined-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">VFX reel</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Shaders and effects · 100% HyperFrames</span></div>
|
||
</div>
|
||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/music-to-video-launch">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-music-to-video-launch-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-music-to-video-launch-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">Music to video</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Cuts synced to a track · source included</span></div>
|
||
</a>
|
||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/sfx-music-launch">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-sfx-music-launch-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-sfx-music-launch-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">Sound & music</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">SFX and music with the CLI · source included</span></div>
|
||
</a>
|
||
</div>
|
||
|
||
### Workflows & integrations
|
||
|
||
A PR, a Figma file, a design brief — turned into a finished film.
|
||
|
||
<div className="not-prose grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
|
||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/pr-to-video-launch">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-pr-to-video-launch-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-pr-to-video-launch-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">PR to video</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">A GitHub PR as a reveal · source included</span></div>
|
||
</a>
|
||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/figma-launch">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-figma-launch-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-figma-launch-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">Figma → HyperFrames</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">A design brought to motion · source included</span></div>
|
||
</a>
|
||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-claude-design-hyperframes-video-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-claude-design-hyperframes-video-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">Claude Design</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">From a design draft · 100% HyperFrames</span></div>
|
||
</div>
|
||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/frame-md-launch-storyboard">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-frame-md-launch-storyboard-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-frame-md-launch-storyboard-v1.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-4"><strong className="block text-sm">FRAME.md storyboard</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Brief-driven direction · source included</span></div>
|
||
</a>
|
||
</div>
|
||
|
||
|
||
## Recreate any video, 1:1
|
||
|
||
Point HyperFrames at a finished video and it rebuilds the same film in editable HTML —
|
||
gestures, type, timing and all. Below, each **reference** (the original, on the left) sits
|
||
next to its **HyperFrames replica** (on the right), matched frame for frame.
|
||
|
||
<div className="not-prose my-6 space-y-8">
|
||
<div>
|
||
<div className="mb-3 flex items-baseline justify-between"><strong className="text-sm">THE OBLIST</strong><span className="text-xs text-zinc-500 dark:text-zinc-400">38.58s · 60fps</span></div>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div className="overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-oblist-reference.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-oblist-reference.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-3"><span className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Reference — original film</span></div>
|
||
</div>
|
||
<div className="overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-oblist-replica.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-oblist-replica.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-3"><span className="text-xs font-semibold uppercase tracking-wide text-zinc-700 dark:text-zinc-300">HyperFrames replica</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div className="mb-3 flex items-baseline justify-between"><strong className="text-sm">Srinika × Mercury</strong><span className="text-xs text-zinc-500 dark:text-zinc-400">30.56s · 25fps · avatar footage</span></div>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div className="overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-srinika-reference.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-srinika-reference.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-3"><span className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Reference — original film</span></div>
|
||
</div>
|
||
<div className="overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
|
||
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-srinika-replica.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-srinika-replica.jpg" autoPlay muted loop playsInline preload="none" />
|
||
<div className="p-3"><span className="text-xs font-semibold uppercase tracking-wide text-zinc-700 dark:text-zinc-300">HyperFrames replica</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
## Start from a template
|
||
|
||
Create a project with a working example:
|
||
|
||
```bash
|
||
npx hyperframes init my-video --example <name>
|
||
```
|
||
|
||
| Example | Good starting point for |
|
||
| --------------- | -------------------------------------------- |
|
||
| `warm-grain` | Branding, lifestyle, and editorial work |
|
||
| `play-mode` | Energetic social videos and product launches |
|
||
| `swiss-grid` | Technical, structured, and corporate stories |
|
||
| `kinetic-type` | Type-led promos, intros, and title cards |
|
||
| `decision-tree` | Explainable diagrams and tutorials |
|
||
| `product-promo` | Multi-scene product showcases |
|
||
| `nyt-graph` | Editorial charts and data stories |
|
||
| `vignelli` | Bold portrait announcements |
|
||
| `blank` | Agent-generated or fully custom work |
|
||
|
||
<Tip>
|
||
Choose a template for its structure and tone, then replace the sample content. If none fits, start
|
||
with `blank` and let the agent build from the brief.
|
||
</Tip>
|
||
|
||
## Related topics
|
||
|
||
- [Make your first video](/quickstart)
|
||
- [Choose a creation workflow](/workflows)
|
||
- [Take more control of an existing project](/go-further)
|