heygen-com__hyperframes/examples/docs-reference-project/frame.md

name, source, format, colors, fonts, type_ramp, radius, motion

name	source	format	colors	fonts	type_ramp	radius	motion
example-com-intro	https://example.com (live capture, 2026-08-03)	1920x1080	canvas surface ink ink_muted accent hairline caption_bg caption_idle caption_active #E9E9E7 #EEEEEE #1B1B1B #5A5C63 #334488 #D6D6D6 #1B1B1B #9A9A9A #FFFFFF	display body mono Inter Inter IBM Plex Mono	title address support caption 132px / 1.02 / -0.035em / 900 42px / 1 / 0 / 400 mono 38px / 1.45 / -0.005em / 400 42px / 1.2 / -0.005em / 700	10px	ease reveal idle power4.out for reveals, power3.out for copy, expo.out for rules cued to the narration's measured word timings — never front-loaded none; the film holds still rather than drifting

frame.md — example.com intro

Where the palette comes from

Nothing here is chosen by taste. capture/extracted/tokens.json reports three colours on the live page — #EEEEEE, #000000, #334488 — and its CSS resolves them:

body {
  background: #eee;
  font-family: system-ui, sans-serif;
}
div {
  opacity: 0.8;
} /* so #000 ink actually reads as ~#333 */
a {
  color: #348;
} /* → #334488 */

One value is derived, not read: the composition canvas. If the frame were also #EEEEEE, the captured plate would have the same fill as the ground and only its border would separate them. Stepping the canvas down to #E9E9E7 gives the plate somewhere to lift from, which is why its shadow reads at all.

Type

Only weights the renderer actually embeds:

Role	Family	Weight	Why
Title	Inter	900	bundled; the lockup's whole job is mass
Body	Inter	400	bundled
Address	IBM Plex Mono	400	bundled; mono says "this is a literal string"
Caption	Inter	700	bundled; the heaviest weight that is not the title's

Weights 500 and 600 are not in the embedded bundle. Asking for them means the render machine synthesises or substitutes, and preview stops matching output. Snap to 400 / 700 / 900.

The one graphic device

A single accent family, three instances, each with a job:

1. Top rule — 6px, full bleed. The frame asserting itself at t=0.1.
2. Brand bar — 200×8px under the title. Separates the name from the address.
3. Page marker — 5px vertical, inside the plate, beside the page's own content block. This is the film's argument: those are the page's words, not ours.

Anything that is not one of those three is not in this composition. No sheen, no ambient bloom, no grid or paper texture, no gradient mesh, no drifting camera.

The plate rule

The capture is a 1x, 1920×1080 screenshot. It is displayed through a 1000×400 window with object-fit: none, so the page renders at exactly 1:1 and its real 16px body text is as crisp as it is in a browser.

Consequences, and they are hard rules:

• Never scale the plate. Any zoom past 1:1 resamples a 1x capture into mush.
• Never rotate the plate. A 3D tilt does the same thing more expensively.
• Entrance is x translate + opacity only.

Caption skin

Fixed lower band, 184px tall (17% of the canvas), reserved structurally — the stage ends where the band begins, so nothing can ever collide with it. Dark pill, centred, one phrase group visible at a time, per-word emphasis by luminance only (#9A9A9A → #FFFFFF). No colour flashing, no scale popping, no scatter exits, no random placement.