mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-05 00:56:23 +00:00
## 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
716 B
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>