mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
ukimsanov
60f09dfcfd
Ten videos on the docs site played in silence. The player is click-to-play, so a reader deliberately starts them and gets nothing — which reads as broken rather than as a stylistic choice. The music is from HeyGen's own catalogue, pulled through the media-use skill's resolve path with the account already authenticated on this machine. That matters more than convenience: the launch projects on disk carry a `launch-music-trimmed.mp3` with no licence, no attribution and no metadata, and three Pixabay tracks. Neither belongs on the official docs CDN, where objects cache immutably for a year. Mixed at roughly -22 to -24 dB mean so it sits under the picture. Getting there took two corrections worth recording: proportional fades, because a 1.2s fade-out on a 5s clip eats half the audio; and seeking 11s into the bed, because its first ten seconds are a quiet intro that dragged every short clip down to -27 dB. The three Examples tiles are left silent on purpose — they are muted autoplay loops, so an audio track would only be weight. Verified: every video referenced anywhere under docs/ that is not a muted autoplay tile now has an AAC stream, checked against the live CDN URL rather than the local file.
117 lines
5.9 KiB
Plaintext
117 lines
5.9 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";
|
|
|
|
## Finished films
|
|
|
|
Each preview links to the complete source project.
|
|
|
|
<div className="not-prose grid grid-cols-1 md:grid-cols-2 gap-4 my-7">
|
|
<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" 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" autoPlay muted loop playsInline preload="metadata" />
|
|
<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">Product film · 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" 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" autoPlay muted loop playsInline preload="metadata" />
|
|
<div className="p-4">
|
|
<strong className="block text-sm">Timeline editor launch</strong>
|
|
<span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Feature 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/website-to-hyperframes"
|
|
>
|
|
<video
|
|
className="aspect-video w-full object-cover"
|
|
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/website-to-hyperframes-preview-v4.mp4"
|
|
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/website-to-hyperframes-poster.jpg"
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
preload="metadata"
|
|
/>
|
|
<div className="p-4">
|
|
<strong className="block text-sm">Website to HyperFrames</strong>
|
|
<span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">
|
|
Product story · 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/texture-launch-video">
|
|
<video className="aspect-video w-full object-cover" 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" autoPlay muted loop playsInline preload="metadata" />
|
|
<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 · source included</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
## One project, open end to end
|
|
|
|
This is the same small project used in the Quickstart. Its request, brief,
|
|
source, revision notes, checks, and final render are all public.
|
|
|
|
```text
|
|
Using /hyperframes, make a 10-second product intro for https://example.com.
|
|
```
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Brief" icon="clipboard-list" href="https://github.com/heygen-com/hyperframes/blob/main/examples/docs-reference-project/BRIEF.md">
|
|
What the agent decided before building anything.
|
|
</Card>
|
|
<Card title="Source" icon="folder-open" href="https://github.com/heygen-com/hyperframes/tree/main/examples/docs-reference-project">
|
|
Every editable project file, exactly as it renders.
|
|
</Card>
|
|
<Card title="Revision" icon="pen-to-square" href="https://github.com/heygen-com/hyperframes/blob/main/examples/docs-reference-project/VERIFICATION.md#2-v1--v2">
|
|
What changed between the first and second cut, and why.
|
|
</Card>
|
|
<Card title="Checks" icon="circle-check" href="https://github.com/heygen-com/hyperframes/blob/main/examples/docs-reference-project/VERIFICATION.md">
|
|
The real gate output: lint, check, contrast, and the final render.
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
The result is not a sealed demo. Open any stage above and use the same shape for
|
|
your own project: request → brief → source → revision → render.
|
|
|
|
## 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)
|