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

The agent may keep this direction in conversation or write it into the project. What matters is that you can review it before production expands.

## 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. Export and share

Export from Studio or render from the command line. Watch the exported file itself 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 |
| `STORYBOARD.md` | Planned sequence and frame direction         |
| `SCRIPT.md`     | Final narration text                         |
| `DESIGN.md`     | Shared visual direction                      |
| `renders/`      | Finished output files                        |

See [Understand a HyperFrames project](/guides/project-tour) for a simpler project tour.