Files
hyperframes/packages/cli/src/docs/compositions.md
T
Vance Ingalls 20be2ea1c2 style: apply oxfmt baseline formatting across all source files (#25)
## Summary
- Run `oxfmt .` across the entire codebase to establish formatted baseline
- 299 files changed — mechanical formatting only, no logic changes
- Double quotes, semicolons, 2-space indent, trailing commas, 100 print width

Part 3/4 of [VA-851](https://linear.app/heygen/issue/VA-851/pre-migration-configure-eslint-prettier-and-conventional-commits)

## Test plan
- [x] `pnpm format:check` — all 426 files pass
- [x] `pnpm -r typecheck` — all packages pass
- [x] `pnpm build` — all packages build
- [x] All 348 tests pass
2026-03-23 17:15:14 -07:00

716 B

Compositions

A composition is an HTML document that defines a video timeline.

Structure

Every composition needs a root element with data-composition-id:

<div id="root" data-composition-id="root" data-width="1920" data-height="1080">
  <!-- Elements go here -->
</div>

Nested Compositions

Embed one composition inside another:

<div data-composition-src="./intro.html" data-start="0" data-duration="5"></div>

Listing Compositions

Use npx hyperframes compositions to see all compositions in a project.

Variables

Compositions can expose variables for dynamic content:

<div data-composition-id="card" data-var-title="string" data-var-color="color"></div>