|
|
|
@@ -0,0 +1,262 @@
|
|
|
|
|
---
|
|
|
|
|
title: Showcase
|
|
|
|
|
description: "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](/launch-videos). This page is the visual gallery; Launch
|
|
|
|
|
Videos is the deeper teardown.
|
|
|
|
|
|
|
|
|
|
## Production Launches
|
|
|
|
|
|
|
|
|
|
<div className="not-prose grid grid-cols-1 md:grid-cols-2 gap-5 my-8">
|
|
|
|
|
<div
|
|
|
|
|
className="group block overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg 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/hyperframes-launch-preview.mp4"
|
|
|
|
|
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/hyperframes-launch-poster.jpg"
|
|
|
|
|
controls
|
|
|
|
|
muted
|
|
|
|
|
loop
|
|
|
|
|
playsInline
|
|
|
|
|
preload="metadata"
|
|
|
|
|
/>
|
|
|
|
|
<div className="p-4">
|
|
|
|
|
<div className="text-xs uppercase tracking-wide text-zinc-500">Product launch</div>
|
|
|
|
|
<h3 className="mt-1 text-lg font-semibold text-zinc-950 dark:text-zinc-50">HyperFrames launch video</h3>
|
|
|
|
|
<p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
|
|
|
|
|
A full announcement video with CSS, GSAP, Lottie, shader transitions, Three.js,
|
|
|
|
|
footage compositing, captions, voiceover, and SFX.
|
|
|
|
|
</p>
|
|
|
|
|
<a
|
|
|
|
|
className="mt-3 block text-sm font-medium text-zinc-950 dark:text-zinc-50"
|
|
|
|
|
href="https://github.com/heygen-com/hyperframes-launches/tree/main/hyperframes-launch"
|
|
|
|
|
>
|
|
|
|
|
View source ->
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
className="group block overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg 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/website-to-hyperframes-preview.mp4"
|
|
|
|
|
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/website-to-hyperframes-poster.jpg"
|
|
|
|
|
controls
|
|
|
|
|
muted
|
|
|
|
|
loop
|
|
|
|
|
playsInline
|
|
|
|
|
preload="metadata"
|
|
|
|
|
/>
|
|
|
|
|
<div className="p-4">
|
|
|
|
|
<div className="text-xs uppercase tracking-wide text-zinc-500">Website to video</div>
|
|
|
|
|
<h3 className="mt-1 text-lg font-semibold text-zinc-950 dark:text-zinc-50">Website to HyperFrames demo</h3>
|
|
|
|
|
<p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
|
|
|
|
|
A 41.8-second launch video showing AI agents turning websites into product
|
|
|
|
|
promos, social ads, feature showcases, and brand reels.
|
|
|
|
|
</p>
|
|
|
|
|
<a
|
|
|
|
|
className="mt-3 block text-sm font-medium text-zinc-950 dark:text-zinc-50"
|
|
|
|
|
href="https://github.com/heygen-com/hyperframes-launches/tree/main/website-to-hyperframes"
|
|
|
|
|
>
|
|
|
|
|
View source ->
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
className="group block overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg 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/timeline-editor-preview.mp4"
|
|
|
|
|
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/timeline-editor-poster.jpg"
|
|
|
|
|
controls
|
|
|
|
|
muted
|
|
|
|
|
loop
|
|
|
|
|
playsInline
|
|
|
|
|
preload="metadata"
|
|
|
|
|
/>
|
|
|
|
|
<div className="p-4">
|
|
|
|
|
<div className="text-xs uppercase tracking-wide text-zinc-500">Product reveal</div>
|
|
|
|
|
<h3 className="mt-1 text-lg font-semibold text-zinc-950 dark:text-zinc-50">Timeline editor launch</h3>
|
|
|
|
|
<p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
|
|
|
|
|
A launch reveal with UI mockups, voiceover, SFX, prompt-driven iteration,
|
|
|
|
|
and a narrative arc around fine-tuning rendered video.
|
|
|
|
|
</p>
|
|
|
|
|
<a
|
|
|
|
|
className="mt-3 block text-sm font-medium text-zinc-950 dark:text-zinc-50"
|
|
|
|
|
href="https://github.com/heygen-com/hyperframes-launches/tree/main/timeline-launch"
|
|
|
|
|
>
|
|
|
|
|
View source ->
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
className="group block overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg 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/texture-launch-preview.mp4"
|
|
|
|
|
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/texture-launch-poster.jpg"
|
|
|
|
|
controls
|
|
|
|
|
muted
|
|
|
|
|
loop
|
|
|
|
|
playsInline
|
|
|
|
|
preload="metadata"
|
|
|
|
|
/>
|
|
|
|
|
<div className="p-4">
|
|
|
|
|
<div className="text-xs uppercase tracking-wide text-zinc-500">Title system</div>
|
|
|
|
|
<h3 className="mt-1 text-lg font-semibold text-zinc-950 dark:text-zinc-50">Texture launch</h3>
|
|
|
|
|
<p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
|
|
|
|
|
Texture-mask typography, shader backgrounds, and transition-heavy title
|
|
|
|
|
design built as a full HyperFrames composition.
|
|
|
|
|
</p>
|
|
|
|
|
<a
|
|
|
|
|
className="mt-3 block text-sm font-medium text-zinc-950 dark:text-zinc-50"
|
|
|
|
|
href="https://github.com/heygen-com/hyperframes-launches/tree/main/texture-launch-video"
|
|
|
|
|
>
|
|
|
|
|
View source ->
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
className="group block overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg 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/vfx-heygen-preview.mp4"
|
|
|
|
|
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/vfx-heygen-poster.jpg"
|
|
|
|
|
controls
|
|
|
|
|
muted
|
|
|
|
|
loop
|
|
|
|
|
playsInline
|
|
|
|
|
preload="metadata"
|
|
|
|
|
/>
|
|
|
|
|
<div className="p-4">
|
|
|
|
|
<div className="text-xs uppercase tracking-wide text-zinc-500">VFX system</div>
|
|
|
|
|
<h3 className="mt-1 text-lg font-semibold text-zinc-950 dark:text-zinc-50">VFX x HeyGen combined</h3>
|
|
|
|
|
<p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
|
|
|
|
|
A rendered effects reel combining Three.js, HTML-in-canvas, generated
|
|
|
|
|
media, text animation, and product UI beats.
|
|
|
|
|
</p>
|
|
|
|
|
<a
|
|
|
|
|
className="mt-3 block text-sm font-medium text-zinc-950 dark:text-zinc-50"
|
|
|
|
|
href="https://github.com/heygen-com/hyperframes-launches/tree/main/vfx-heygen-combined"
|
|
|
|
|
>
|
|
|
|
|
View source ->
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<a
|
|
|
|
|
className="group block overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg dark:border-zinc-800 dark:bg-zinc-950"
|
|
|
|
|
href="https://www.hyperframes.dev/"
|
|
|
|
|
>
|
|
|
|
|
<div className="aspect-video w-full bg-zinc-950 p-6 text-white">
|
|
|
|
|
<div className="flex h-full flex-col justify-between">
|
|
|
|
|
<div className="text-sm text-zinc-400">Community playground</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div className="text-3xl font-semibold">Open. Remix. Publish.</div>
|
|
|
|
|
<p className="mt-3 max-w-md text-sm text-zinc-300">
|
|
|
|
|
Use hyperframes.dev to preview community projects, share your own,
|
|
|
|
|
and keep iterating in the browser.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="p-4">
|
|
|
|
|
<div className="text-xs uppercase tracking-wide text-zinc-500">Playground</div>
|
|
|
|
|
<h3 className="mt-1 text-lg font-semibold text-zinc-950 dark:text-zinc-50">hyperframes.dev</h3>
|
|
|
|
|
<p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
|
|
|
|
|
A hosted community surface for previewing, iterating, sharing, and
|
|
|
|
|
rendering HTML-native video projects.
|
|
|
|
|
</p>
|
|
|
|
|
<div className="mt-3 text-sm font-medium text-zinc-950 dark:text-zinc-50">Open playground -></div>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
## Go Deeper
|
|
|
|
|
|
|
|
|
|
<CardGroup cols={2}>
|
|
|
|
|
<Card title="Launch Videos" icon="rocket" href="/launch-videos">
|
|
|
|
|
Read the production notes, project structure, and Git LFS clone options behind
|
|
|
|
|
these launches.
|
|
|
|
|
</Card>
|
|
|
|
|
<Card title="Source Repository" icon="github" href="https://github.com/heygen-com/hyperframes-launches">
|
|
|
|
|
Open the full collection of HeyGen launch compositions.
|
|
|
|
|
</Card>
|
|
|
|
|
</CardGroup>
|
|
|
|
|
|
|
|
|
|
## Start from a Use Case
|
|
|
|
|
|
|
|
|
|
| If you want to build... | Start here | Why |
|
|
|
|
|
| --- | --- | --- |
|
|
|
|
|
| A product announcement | [HyperFrames launch](https://github.com/heygen-com/hyperframes-launches/tree/main/hyperframes-launch) | Shows a complete launch narrative with multiple animation runtimes. |
|
|
|
|
|
| A website-to-video product tour | [Website to HyperFrames](https://github.com/heygen-com/hyperframes-launches/tree/main/website-to-hyperframes) | Shows captured website footage, agent prompts, captions, VO, and SFX. |
|
|
|
|
|
| A product UI reveal | [Timeline editor launch](https://github.com/heygen-com/hyperframes-launches/tree/main/timeline-launch) | Shows mockups, interface closeups, and feature storytelling. |
|
|
|
|
|
| A texture or title-card system | [Texture launch](https://github.com/heygen-com/hyperframes-launches/tree/main/texture-launch-video) | Shows expressive text treatment and shader-backed motion. |
|
|
|
|
|
| An effects-heavy launch reel | [VFX x HeyGen combined](https://github.com/heygen-com/hyperframes-launches/tree/main/vfx-heygen-combined) | Shows Three.js, generated media, and HTML-in-canvas in one render. |
|
|
|
|
|
| A starter project | [Examples](/examples) | Scaffold working templates with `npx hyperframes init --example <name>`. |
|
|
|
|
|
| A reusable motion part | [Catalog](/catalog/blocks/data-chart) | 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.
|
|
|
|
|
|
|
|
|
|
```bash 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:
|
|
|
|
|
|
|
|
|
|
```bash 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
|
|
|
|
|
|
|
|
|
|
<CardGroup cols={2}>
|
|
|
|
|
<Card title="Starter Examples" icon="layer-group" href="/examples">
|
|
|
|
|
Scaffold remixable templates with `npx hyperframes init --example`.
|
|
|
|
|
</Card>
|
|
|
|
|
<Card title="Community Playground" icon="play" href="https://www.hyperframes.dev/">
|
|
|
|
|
Open shared projects, preview videos, and publish your own.
|
|
|
|
|
</Card>
|
|
|
|
|
<Card title="Website to Video" icon="globe" href="/guides/website-to-video">
|
|
|
|
|
Turn websites into rendered videos with an agent-friendly workflow.
|
|
|
|
|
</Card>
|
|
|
|
|
<Card title="Pipeline Guide" icon="diagram-project" href="/guides/pipeline">
|
|
|
|
|
Learn the storyboard, script, design, and render loop behind larger videos.
|
|
|
|
|
</Card>
|
|
|
|
|
</CardGroup>
|
James Russo