mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 18:01:20 +08:00
ukimsanov
102 lines
3.9 KiB
Markdown
102 lines
3.9 KiB
Markdown
---
|
||
name: example-com-intro
|
||
source: https://example.com (live capture, 2026-08-03)
|
||
format: 1920x1080
|
||
colors:
|
||
canvas: "#E9E9E7" # the page's #EEEEEE stepped down ~3% so the plate lifts off it
|
||
surface: "#EEEEEE" # the captured page's own background — the plate
|
||
ink: "#1B1B1B" # the page's #000 at .8 opacity, resolved
|
||
ink_muted: "#5A5C63" # supporting copy
|
||
accent: "#334488" # the page's own link colour
|
||
hairline: "#D6D6D6" # plate edge
|
||
caption_bg: "#1B1B1B"
|
||
caption_idle: "#9A9A9A"
|
||
caption_active: "#FFFFFF"
|
||
fonts:
|
||
display: "Inter" # 900 only
|
||
body: "Inter" # 400 only
|
||
mono: "IBM Plex Mono" # 400 only
|
||
type_ramp:
|
||
title: "132px / 1.02 / -0.035em / 900"
|
||
address: "42px / 1 / 0 / 400 mono"
|
||
support: "38px / 1.45 / -0.005em / 400"
|
||
caption: "42px / 1.2 / -0.005em / 700"
|
||
radius: "10px"
|
||
motion:
|
||
ease: "power4.out for reveals, power3.out for copy, expo.out for rules"
|
||
reveal: "cued to the narration's measured word timings — never front-loaded"
|
||
idle: "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:
|
||
|
||
```css
|
||
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.
|