mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
ukimsanov
ef99809482
The animation guide had nothing to look at, which is a strange state for a page about motion. It now opens with the keyframes launch film — real `gsap.to()` source with a `keyframes` array on screen, and the same motion being reshaped by dragging an ease curve in Studio instead of guessing numbers. Examples loses the ten-second reference-project render. It sat directly beneath four finished films and lost the comparison every time; the four cards above it already carry the point that the project is open end to end. The cards stay, the render goes.
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.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)
|