ukimsanov
91c8ffeab9
At this column width the breakout rendered 968px and dominated the page instead of supporting it. The film is back inside a Frame at the column width. The part worth keeping was the motion, not the size: it still autoplays muted on a loop rather than sitting behind a play button, so the page is already moving when it loads. Removed the now-unused wrapper CSS rather than leaving a dead rule.
104 lines
5.8 KiB
Plaintext
104 lines
5.8 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"
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
controls
|
|
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.
|