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

# Learn how HyperFrames works

> The few ideas that make projects easier to understand, edit, and reuse.

You can create and edit a project without learning its internals. These concepts are useful when you want to understand why a timeline behaves a certain way or communicate clearly with an agent.

<CardGroup cols={2}>
  <Card title="Compositions" icon="layer-group" href="/concepts/compositions">
    Understand how a complete video is assembled from scenes and timed elements.
  </Card>

  <Card title="Variables" icon="sliders" href="/concepts/variables">
    Make text, colors, media, and other values easy to change or personalize.
  </Card>

  <Card title="Timing data" icon="clock" href="/concepts/data-attributes">
    See how starts, durations, tracks, and project dimensions are represented.
  </Card>

  <Card title="Deterministic rendering" icon="repeat" href="/concepts/determinism">
    Learn why the same project can render the same frame reliably.
  </Card>
</CardGroup>

<Note>
  Frame adapters and raw data attributes are implementation concepts. Read them when you are building custom motion or debugging a project, not as prerequisites for using Studio.
</Note>