> ## 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.

# How a video moves from idea to export

> Understand the decisions and project files that carry a HyperFrames video from a brief to a finished render.

HyperFrames projects do not all follow one rigid process. A five-second title card needs less planning than a narrated product launch.

The useful pattern is to make the important decisions in the right order.

## 1. Confirm the brief

Before building, agree on:

* the audience;
* the one main message;
* the desired action or takeaway;
* the rough length and format;
* the visual and emotional direction;
* required words, media, and claims.

When a project starts from `/hyperframes`, the agent confirms only the important details that were not already in your request. Larger projects record the result in `BRIEF.md` so a later session can continue without asking again.

## 2. Collect the source material

The source might be a website, document, pull request, transcript, video, song, or set of brand assets.

For a website-led video, the product workflow can capture real screens, colors, fonts, and media. For another kind of project, the agent gathers only the files it needs.

Keep project media in `assets/`. Captured research may appear in `capture/`.

## 3. Establish the visual direction

A larger project may include `DESIGN.md`, which records useful choices such as:

* palette and contrast;
* typography;
* spacing and composition;
* image treatment;
* motion character;
* what to avoid.

This is a working reference, not a requirement for every project. A simple composition can keep its design decisions directly in the source.

## 4. Plan the sequence and narration

Narrative projects may use:

* `STORYBOARD.md` for the order, purpose, and visual direction of each frame;
* `SCRIPT.md` for the final spoken wording;
* generated narration and a timestamped transcript.

Review the Storyboard before fine-tuning pixels. Check whether every frame adds something and whether the sequence delivers the promised message.

The Storyboard can show **Outline**, **Built**, and **Animated** status as the agent progresses.

## 5. Build the composition

The finished project has a root composition, commonly `index.html`. Larger videos can use smaller scene files under `compositions/`.

Your agent handles the source structure, animation registration, timing attributes, and deterministic rendering rules. You can follow the build in Studio without learning those internals first.

## 6. Review and improve

Review in layers:

1. **Message** — is the point clear?
2. **Sequence** — does each moment earn its place?
3. **Readability** — can the viewer understand text and screens?
4. **Timing** — do visuals and narration arrive together?
5. **Motion** — does movement guide attention?
6. **Finish** — are media, audio, captions, and transitions clean?

Use Studio for direct visual edits. Send broader story or source changes back to the agent.

The project should pass:

```bash theme={null}
npx hyperframes lint
npx hyperframes check
```

## 7. Render and share

Render from Studio, ask the agent, or use the CLI. Watch the finished file before sending it.

For another review cycle, publish the project or share the relevant render and clear feedback. Keep source files and project artifacts so the next revision begins with context rather than from scratch.

## What files should I expect?

Not every project has every file.

| File or folder  | Purpose                                            |
| --------------- | -------------------------------------------------- |
| `index.html`    | Root composition                                   |
| `compositions/` | Reusable scenes or nested compositions             |
| `assets/`       | Images, video, audio, fonts, and other media       |
| `BRIEF.md`      | Confirmed message, audience, format, and direction |
| `STORYBOARD.md` | Planned sequence and frame direction               |
| `SCRIPT.md`     | Final narration text                               |
| `DESIGN.md`     | Shared visual direction                            |
| `renders/`      | Finished output files                              |

See [How a HyperFrames project works](/concepts) for the project, composition, and rendering model.