mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-15 22:08:03 +00:00
ukimsanov
14f218070f
introduction: the showcase file has a single h264 stream and no audio track, so 'press play - it has sound' was simply untrue. Removed the claim; the caption now only says what the clip is. workflows: the page listed all eight situations twice - once as cards linking to anchors a short scroll down, then again as full sections repeating the same 'best for' line. Collapsed both into one accordion per situation whose title is the chooser and whose body holds the brief and the copyable request, so the eight cards now lead somewhere real instead of jumping down the page. Dropped the five-step 'what happens after you choose' (it restates quickstart) and the six-part request checklist (it restates the prompting guide) in favour of links. 187 lines to 165, eleven headings to one; no starter request was lost.
101 lines
5.7 KiB
Plaintext
101 lines
5.7 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."
|
|
---
|
|
|
|
<Frame caption="Made with HyperFrames, from a single request.">
|
|
<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>
|
|
|
|
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.
|
|
|
|
## From request to video
|
|
|
|
<Steps>
|
|
<Step title="Describe it">
|
|
Tell the agent what the viewer should understand, feel, or do — and attach a source if you have one.
|
|
</Step>
|
|
<Step title="Approve the direction">
|
|
The agent confirms the creative choices before it spends time building.
|
|
</Step>
|
|
<Step title="Refine it in Studio">
|
|
The first version opens as a real project, not a flattened export. Scenes, timing, text, media, and animation all 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?
|
|
|
|
Every one of these is real HyperFrames output, running in your browser right now:
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 my-6">
|
|
<a href="/catalog/blocks/data-chart" className="block no-underline">
|
|
<video className="w-full aspect-video object-cover rounded-lg border border-zinc-200 dark:border-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png" autoPlay muted loop playsInline />
|
|
<span className="block mt-2 text-sm text-zinc-500 dark:text-zinc-400">Animated data</span>
|
|
</a>
|
|
<a href="/catalog/components/caption-highlight" className="block no-underline">
|
|
<video className="w-full aspect-video object-cover rounded-lg border border-zinc-200 dark:border-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png" autoPlay muted loop playsInline />
|
|
<span className="block mt-2 text-sm text-zinc-500 dark:text-zinc-400">Kinetic captions</span>
|
|
</a>
|
|
<a href="/catalog/blocks/spain-map" className="block no-underline">
|
|
<video className="w-full aspect-video object-cover rounded-lg border border-zinc-200 dark:border-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png" autoPlay muted loop playsInline />
|
|
<span className="block mt-2 text-sm text-zinc-500 dark:text-zinc-400">Maps and locations</span>
|
|
</a>
|
|
<a href="/catalog/blocks/logo-outro" className="block no-underline">
|
|
<video className="w-full aspect-video object-cover rounded-lg border border-zinc-200 dark:border-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" autoPlay muted loop playsInline />
|
|
<span className="block mt-2 text-sm text-zinc-500 dark:text-zinc-400">Logo and brand stings</span>
|
|
</a>
|
|
</div>
|
|
|
|
Those are individual pieces. A finished video combines them — and there is a path for each kind:
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Product and website videos" icon="rocket" href="/guides/product-launch-video">
|
|
Launches, tours, and promos built from a real product interface.
|
|
</Card>
|
|
<Card title="Visual explainers" icon="lightbulb" href="/guides/faceless-explainer">
|
|
Notes, articles, and hard ideas turned into a visual story.
|
|
</Card>
|
|
<Card title="Captions and recuts" icon="closed-captioning" href="/guides/captions-and-recuts">
|
|
Subtitles, titles, and overlays added to footage you already have.
|
|
</Card>
|
|
<Card title="Motion graphics" icon="wand-magic-sparkles" href="/guides/motion-graphics">
|
|
Titles, statistics, charts, logo stings, transparent overlays.
|
|
</Card>
|
|
<Card title="Music-driven videos" icon="music" href="/guides/music-to-video">
|
|
Footage and motion cut to the structure of a track.
|
|
</Card>
|
|
<Card title="Interactive presentations" icon="display" href="/workflows#a-presentation">
|
|
Decks with reveals, notes, branches, and presenter mode.
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
[Watch finished work →](/examples) · [Browse the catalog →](/catalog)
|
|
|
|
## Who does what
|
|
|
|
The agent does the source-heavy work — research, media, narration, building scenes. You direct it and control the visible result.
|
|
|
|
**Reach for Studio** when you can point at the thing: this text, this clip, this colour, this timing.
|
|
**Ask the agent** when the change is bigger than a click: the story, several scenes at once, or new media.
|
|
|
|
You never have to touch HTML, packages, or the rendering engine to make and review a video. Those live in [Developers](/developers), for people integrating or extending HyperFrames.
|
|
|
|
## Your next step
|
|
|
|
<Card title="Make your first video" icon="play" href="/quickstart" horizontal arrow>
|
|
The shortest complete path — your own source material to a finished export, in about ten minutes.
|
|
</Card>
|
|
|
|
Prefer to look around first? Open the [Playground](https://www.hyperframes.dev/) with nothing to install, or learn [Studio](/studio) if an agent already built you a project.
|