mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 07:19:52 +00:00
Miguel Ángel
0bf15119f8
Compositions are now self-contained: the compiler captures font files and embeds them as woff2 data URIs, eliminating silent render-time fallback when the render environment lacks the author's fonts. Resolution order (each tier falls through to the next): 1. Existing @font-face → use as-is 2. Bundled alias (38 cross-platform mappings) → embed data URI 3. Google Fonts → fetch, cache, embed 4. Local system font → locate on OS, compress to woff2, embed 5. Local @font-face paths → read file, compress, inline as data URI 6. External CDN stylesheets → fetch CSS, extract @font-face, inline 7. Alias map fallback → closest bundled equivalent 8. Actionable error with guidance Key changes: - System font locator (macOS/Windows/Linux) with path-bounding and symlink defense (realpathSync + O_NOFOLLOW) - woff2 compression via wawoff2 (WASM, cross-platform) - Multi-weight/style variant capture with length-sorted token matching - External stylesheet inlining with SSRF defense (assertPublicHttpsUrl, HTTPS-only, private-host blocking, 2MB cap, 4-concurrent limit) - Studio auto-import via GET /fonts/file API + renderAliasFor() derived from shared FONT_ALIAS_MAP (no more hand-curated drift) - failClosedFontFetch throws on unresolved fonts in distributed renders - Single source of truth: @hyperframes/core/fonts/aliases - system_font_will_alias lint rule (escalates to warning for distributed) - Default to Inter + JetBrains Mono in templates and CSS reset
76 lines
1.8 KiB
HTML
76 lines
1.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=1920, height=1080" />
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
background: #000;
|
|
}
|
|
body {
|
|
font-family: "Inter", sans-serif;
|
|
}
|
|
code,
|
|
pre,
|
|
.monospace {
|
|
font-family: "JetBrains Mono", monospace;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div
|
|
id="root"
|
|
data-composition-id="main"
|
|
data-start="0"
|
|
data-duration="__VIDEO_DURATION__"
|
|
data-width="1920"
|
|
data-height="1080"
|
|
>
|
|
<video
|
|
id="a-roll"
|
|
class="clip"
|
|
src="__VIDEO_SRC__"
|
|
muted
|
|
playsinline
|
|
data-duration="__VIDEO_DURATION__"
|
|
data-track-index="0"
|
|
style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover"
|
|
></video>
|
|
<audio
|
|
id="a-roll-audio"
|
|
src="__VIDEO_SRC__"
|
|
data-start="0"
|
|
data-duration="__VIDEO_DURATION__"
|
|
data-track-index="2"
|
|
data-volume="1"
|
|
></audio>
|
|
|
|
<!--
|
|
Add your clips here. Example:
|
|
<div id="title" class="clip" data-start="0" data-duration="5" data-track-index="1"
|
|
style="font-size: 64px; color: #fff; padding: 40px">
|
|
Hello World
|
|
</div>
|
|
-->
|
|
</div>
|
|
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
const tl = gsap.timeline({ paused: true });
|
|
// Example: tl.from("#title", { opacity: 0, y: -50, duration: 1 }, 0);
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</body>
|
|
</html>
|