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

# Work with media

> Use footage, images, audio, captions, backgrounds, and color in a HyperFrames project.

Media can come from your project, a captured website, an uploaded file, a generated asset, or a reusable library. Keep important media inside the project so preview and rendering use the same file.

<CardGroup cols={2}>
  <Card title="Images and video" icon="photo-film" href="/guides/video-components">
    Add footage and images, control playback, and avoid missing-file problems.
  </Card>

  <Card title="Remove a background" icon="eraser" href="/guides/remove-background">
    Prepare a subject or object for layered compositions.
  </Card>

  <Card title="Color grading" icon="palette" href="/guides/color-grading">
    Adjust the look of images and footage, including LUT-based grading.
  </Card>

  <Card title="Captions in Studio" icon="closed-captioning" href="/studio/captions">
    Edit caption text, timing, style, and animation.
  </Card>
</CardGroup>

## A reliable media workflow

1. Put the original file in the project or import it through Studio.
2. Preview the file before building around it.
3. Let the agent transcribe, crop, remove a background, or generate derivatives when needed.
4. Keep the source and the prepared result clearly named.
5. Play the full project before export to catch missing or late-loading media.

Remote URLs can be useful during exploration, but local project files are more reliable for final rendering.