Skip to content

docs: rebuild the introduction as a real front door #2885

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ukimsanov merged 1 commit into from
Jul 29, 2026
Merged

docs: rebuild the introduction as a real front door #2885

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/developers/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: "CLI, SDK, packages, schemas, deployment, integrations, and contrib

This section is for people integrating HyperFrames, automating it, extending the editor, deploying rendering infrastructure, or working directly with composition source.

If you only want to create or edit a video, begin with [Guides](/guides) or [Studio](/studio).
If you only want to create or edit a video, begin with [Make your first video](/quickstart) or [Studio](/studio).

## Choose the smallest surface

Expand Down
5 changes: 4 additions & 1 deletion docs/docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@
{
"group": "Start here",
"pages": [
"guides/index",
"introduction",
"quickstart",
"workflows",
Expand Down Expand Up @@ -512,6 +511,10 @@
}
},
"redirects": [
{
"source": "/guides",
"destination": "/introduction"
},
Comment on lines 513 to +517
{
"source": "/showcase",
"destination": "/examples"
Expand Down
39 changes: 0 additions & 39 deletions docs/guides/index.mdx
View file
Open in desktop

This file was deleted.

71 changes: 28 additions & 43 deletions docs/introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,45 @@
---
title: "What is HyperFrames?"
sidebarTitle: "What HyperFrames is"
description: "See how an AI agent, a real project, and HyperFrames Studio work together to create a finished video."
description: "Tell an AI agent what you want. It builds a real, editable video project — you refine it in Studio and export the film."
---

HyperFrames lets an AI agent create a real video project, then gives you a visual Studio to review, edit, and export it.
**Tell an AI agent what you want. It builds a real, editable video project — you refine it in Studio and export the film.**

You can begin with an idea, website, script, pull request, recording, or music track. The agent handles the first build. You stay in control of the direction and the visible result.
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="A finished HyperFrames product video. This is the kind of result the agent and Studio produce together.">
<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
muted
playsInline
preload="metadata"
/>
</Frame>

<CardGroup cols={2}>
<Card title="See how it works" icon="arrow-down" href="#from-request-to-finished-result">
Understand the complete loop without learning the technical architecture.
</Card>
<Card title="Make your first video" icon="sparkles" href="/quickstart">
Go from your own source material to a reviewable result in Studio.
</Card>
</CardGroup>

## From request to finished result
## From request to video

```mermaid
flowchart LR
A["Your idea or source"] --> B["AI agent"]
A["Your request"] --> B["AI agent"]
B --> C["HyperFrames project"]
C --> D["Studio review and edits"]
D --> E["Finished video or presentation"]
C --> D["Video"]
```

<Steps>
<Step title="Describe the result">
Tell the agent what you want the viewer to understand, feel, or do. Attach a website, text, footage, code change, music, or other source when you have one.
<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 spending time on the build.
</Step>
<Step title="Review a real project">
The first version opens in HyperFrames Studio. It is not a flattened mystery file: the scenes, timing, media, text, and animation remain editable.
The agent confirms the important creative choices before it spends time building.
</Step>
<Step title="Improve what you can see">
Make direct changes in Studio or ask the agent for a broader revision.
<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 the result">
Render a normal video, a transparent overlay, a high-resolution file, or keep the work as a navigable presentation.
<Step title="Export">
Render a standard video, a transparent overlay, a high-resolution file — or keep it as a navigable presentation.
</Step>
</Steps>

Expand Down Expand Up @@ -82,32 +68,31 @@ flowchart LR

[Watch more finished work →](/examples)

## What the person controls
## Who does what

HyperFrames is built so an agent can do the source-heavy work without hiding the result from you.
The agent does the source-heavy work. Studio is where you stay in control — nothing is hidden behind a locked file.

| Use Studio when… | Ask the agent when… |
| 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 adjustment. | New media, research, narration, or source work is required. |
| 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 do not need to understand HTML, packages, schemas, or the rendering engine to create and review a video. Those details remain available in [Developers](/developers) when somebody is integrating or extending the framework.
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.

## Choose your next step
## Start here

<CardGroup cols={2}>
<Card title="Try it in the browser" icon="browser" href="https://www.hyperframes.dev/">
Explore the Playground without beginning in a local project.
</Card>
The shortest path is to **make one**.

<CardGroup cols={3}>
<Card title="Make your first video" icon="play" href="/quickstart">
Follow the shortest complete path from source material to export.
Go from your own source material to a finished export. ~10 minutes.
</Card>
<Card title="Choose a workflow" icon="route" href="/workflows">
Find the correct path for a product, idea, recording, PR, motion graphic, song, or presentation.
<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="Open an existing project" icon="palette" href="/studio">
Learn how to review, edit, and export work that an agent or teammate already created.
<Card title="I already have a project" icon="palette" href="/studio">
Learn to review, edit, and export work an agent already built.
</Card>
</CardGroup>
Loading