> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-codex-docs-human-first-refactor.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# What is HyperFrames?
> Tell an AI agent what you want. It builds a real, editable video project — you refine it in Studio and export the film.
export const ShowcaseWall = () => {
const CDN = "https://static.heygen.ai/hyperframes-oss/docs/images/showcase";
const FILMS = [{
id: "grading",
tile: "tile-grading-v2",
full: "full-grading-4k-v2",
title: "Colour grading and media effects",
note: "Real footage graded with LUTs, curves, and scopes — inside Studio.",
length: "48s"
}, {
id: "variables",
title: "One shoot, many cuts",
note: "The same footage rendered as several vertical videos from one project.",
length: "44s"
}, {
id: "music",
title: "Cut to the music",
note: "A track analysed for beats and sections, then everything snapped to that grid.",
length: "90s"
}, {
id: "prvideo",
title: "A pull request, explained",
note: "A code change turned into a review anyone on the team can watch.",
length: "32s"
}, {
id: "timeline",
title: "Editing on a timeline",
note: "Trimming, splitting, and retiming a project by hand.",
length: "34s"
}, {
id: "hypecard",
title: "A year in review",
note: "Personal data turned into a shareable card, generated per person.",
length: "27s"
}];
const [openId, setOpenId] = useState(null);
const [reduced, setReduced] = useState(false);
useEffect(() => {
const q = window.matchMedia("(prefers-reduced-motion: reduce)");
setReduced(q.matches);
const onChange = e => setReduced(e.matches);
q.addEventListener("change", onChange);
return () => q.removeEventListener("change", onChange);
}, []);
const open = FILMS.find(f => f.id === openId) || null;
if (open) {
return
{open.title} · {open.length} · made with HyperFrames
;
}
return
{FILMS.map(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.
## From request to video
Tell the agent what the viewer should understand, feel, or do — and attach a source if you have one.
The agent confirms the creative choices before it spends time building.
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.
Render a standard video, a transparent overlay, a high-resolution file — or keep it as a navigable presentation.
## What can it make?
Every one of these is a finished film made with HyperFrames. Each tile plays silently where it sits — click one to watch it properly, with sound.
There is a path for each kind of video:
Launches, tours, and promos built from a real product interface.
Notes, articles, and hard ideas turned into a visual story.
Subtitles, titles, and overlays added to footage you already have.
Titles, statistics, charts, logo stings, transparent overlays.
Footage and motion cut to the structure of a track.
Decks with reveals, notes, branches, and presenter mode.
[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
The shortest complete path — your own source material to a finished export, in about ten minutes.
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.