mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-15 22:08:03 +00:00
ukimsanov
bb2df65dd1
Make /introduction the single "What is HyperFrames?" page a stranger can be sent, and retire the switchboard that sat in front of it. - introduction: lead with one sentence + a sound-on result (drop `muted`), simplify the loop diagram to request -> agent -> project -> video, cut the fake "See how it works" scroll button, and replace the equal-weight card walls with one clear "Start here" action. - guides/index: remove the six-card "What do you need to do?" menu-of-menus. The nav already routes people and /introduction is the real entry point. Redirect /guides -> /introduction. - developers: point the "create a video" link at /quickstart. mint validate and mint broken-links both pass.
99 lines
4.3 KiB
Plaintext
99 lines
4.3 KiB
Plaintext
---
|
|
title: "What is HyperFrames?"
|
|
sidebarTitle: "What HyperFrames is"
|
|
description: "Tell an AI agent what you want. It builds a real, editable video project — you refine it in Studio and export the film."
|
|
---
|
|
|
|
**Tell an AI agent what you want. It builds a real, editable video project — you refine it in Studio and export the film.**
|
|
|
|
Start from an idea, a website, a script, a recording, a pull request, or a song. The agent does the first build. You keep control of the result.
|
|
|
|
<Frame caption="One prompt → ~30 seconds of finished video. Made with HyperFrames. Press play — it has sound.">
|
|
<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
|
|
playsInline
|
|
preload="metadata"
|
|
/>
|
|
</Frame>
|
|
|
|
## From request to video
|
|
|
|
```mermaid
|
|
flowchart LR
|
|
A["Your request"] --> B["AI agent"]
|
|
B --> C["HyperFrames project"]
|
|
C --> D["Video"]
|
|
```
|
|
|
|
<Steps>
|
|
<Step title="Describe it">
|
|
Tell the agent what you want the viewer to understand, feel, or do — and attach a source if you have one.
|
|
</Step>
|
|
<Step title="Approve the direction">
|
|
The agent confirms the important creative choices before it spends time building.
|
|
</Step>
|
|
<Step title="Refine it in Studio">
|
|
The first version opens in HyperFrames Studio — not a flattened export, but a real project whose scenes, timing, text, media, and animation stay editable. Change what you can point at, or ask the agent for a broader revision.
|
|
</Step>
|
|
<Step title="Export">
|
|
Render a standard video, a transparent overlay, a high-resolution file — or keep it as a navigable presentation.
|
|
</Step>
|
|
</Steps>
|
|
|
|
## What can it make?
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Product and website videos" icon="rocket" href="/guides/product-launch-video">
|
|
Launch videos, tours, promos, and showcases using the real product interface.
|
|
</Card>
|
|
<Card title="Visual explainers" icon="lightbulb" href="/guides/faceless-explainer">
|
|
Turn notes, articles, and difficult ideas into clear visual stories.
|
|
</Card>
|
|
<Card title="Captions and designed recuts" icon="closed-captioning" href="/guides/captions-and-recuts">
|
|
Add subtitles, titles, lower thirds, quotes, and information overlays to footage.
|
|
</Card>
|
|
<Card title="Motion graphics" icon="wand-magic-sparkles" href="/guides/motion-graphics">
|
|
Create animated titles, statistics, charts, logo stings, and transparent overlays.
|
|
</Card>
|
|
<Card title="Music-driven videos" icon="music" href="/guides/music-to-video">
|
|
Cut footage, images, lyrics, and motion to the structure of a music track.
|
|
</Card>
|
|
<Card title="Interactive presentations" icon="display" href="/workflows#a-presentation">
|
|
Build decks with reveals, notes, branches, presenter mode, and clickable navigation.
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
[Watch more finished work →](/examples)
|
|
|
|
## Who does what
|
|
|
|
The agent does the source-heavy work. Studio is where you stay in control — nothing is hidden behind a locked file.
|
|
|
|
| Reach for Studio when… | Ask the agent when… |
|
|
| --- | --- |
|
|
| You can point at the exact text or visual. | The story or message needs to change. |
|
|
| A clip needs to move, trim, or split. | Several scenes need coordinated changes. |
|
|
| Color, size, position, or timing needs a direct nudge. | New media, research, narration, or source work is required. |
|
|
| You want to compare and export versions. | You know the outcome but not the implementation. |
|
|
|
|
You never have to touch HTML, packages, or the rendering engine to make and review a video. Those live in [Developers](/developers) — for the people integrating or extending HyperFrames.
|
|
|
|
## Start here
|
|
|
|
The shortest path is to **make one**.
|
|
|
|
<CardGroup cols={3}>
|
|
<Card title="Make your first video" icon="play" href="/quickstart">
|
|
Go from your own source material to a finished export. ~10 minutes.
|
|
</Card>
|
|
<Card title="Try it in the browser" icon="browser" href="https://www.hyperframes.dev/">
|
|
Explore and remix in the Playground — nothing to install.
|
|
</Card>
|
|
<Card title="I already have a project" icon="palette" href="/studio">
|
|
Learn to review, edit, and export work an agent already built.
|
|
</Card>
|
|
</CardGroup>
|