diff --git a/docs/catalog/blocks/mk-callout-highlight.mdx b/docs/catalog/blocks/mk-callout-highlight.mdx index 18fcb7ca28e..81c5934b32b 100644 --- a/docs/catalog/blocks/mk-callout-highlight.mdx +++ b/docs/catalog/blocks/mk-callout-highlight.mdx @@ -14,7 +14,7 @@ import { InstallCommand } from "/snippets/install-command.jsx"; title="Word-Sweep Highlight" description="A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover" variables={[]} - meta={{"duration":8,"width":1920,"height":1080,"category":"Captions","badge":"Stable","codeLines":156}} + meta={{"duration":8,"width":1920,"height":1080,"category":"Captions","badge":"Stable","codeLines":182}} attribution={{"path":"registry/blocks/mk-callout-highlight","tags":["typography","karaoke","captions","minimal"]}} hasCode rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/mk-callout-highlight/mk-callout-highlight.html" @@ -55,8 +55,20 @@ import { InstallCommand } from "/snippets/install-command.jsx"; overflow: hidden; background: transparent; /* overlays footage or mk-background */ } - #mk-ch-box { + #mk-ch-center { + /* CSS centring. The box is a flex item of this full-frame wrapper, so its + place is laid out by the browser rather than measured from a DOM rect + taken before web fonts are ready. An explicit CONFIG.x / CONFIG.y turns + that axis into an edge offset (see the script). No pointer-events:none + here: it inherits to the word spans and the contrast audit skips them. */ position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + } + #mk-ch-box { + flex: none; /* max-content width, clamped by max-width; never shrunk */ font-family: var(--mk-font); font-weight: 500; letter-spacing: -0.015em; @@ -75,7 +87,9 @@ import { InstallCommand } from "/snippets/install-command.jsx"; data-width="1920" data-height="1080" > -
+
+
+
``` diff --git a/docs/catalog/components/device-frame-stage.mdx b/docs/catalog/components/device-frame-stage.mdx index 6246f470510..fdf8dc2371c 100644 --- a/docs/catalog/components/device-frame-stage.mdx +++ b/docs/catalog/components/device-frame-stage.mdx @@ -44,7 +44,7 @@ import { InstallCommand } from "/snippets/install-command.jsx"; hardware reveal, glare sweep, or camera-lens tour, ever. This file is a mountable HyperFrames sub-composition (see - skills/hyperframes-core/references/sub-compositions.md): a host + skills/hyperframes/references/format.md): a host composition embeds it via a clip carrying data-composition-src, a matching data-composition-id, and its own data-start / data-duration / data-track-index / data-width / data-height. Everything the render needs diff --git a/docs/catalog/components/focus-swap.mdx b/docs/catalog/components/focus-swap.mdx index 261c6db330d..6537f3652f5 100644 --- a/docs/catalog/components/focus-swap.mdx +++ b/docs/catalog/components/focus-swap.mdx @@ -89,9 +89,9 @@ import { InstallCommand } from "/snippets/install-command.jsx"; container-type: size; isolation: isolate; overflow: hidden; - background: var(--bg); - color: var(--fg); - font-family: var(--font-body); + background: var(--bg, #070a12); + color: var(--fg, #f8fafc); + font-family: var(--font-body, Inter, system-ui, sans-serif); } .fs-clip { @@ -121,15 +121,15 @@ import { InstallCommand } from "/snippets/install-command.jsx"; justify-content: space-between; padding: 5cqh 3.2cqw; overflow: hidden; - border: 0.16cqw solid var(--border); - border-radius: var(--radius); - background: var(--surface); - box-shadow: 0 2.2cqh 5cqh color-mix(in srgb, var(--bg) 72%, transparent); + border: 0.16cqw solid var(--border, #34405a); + border-radius: var(--radius, 22px); + background: var(--surface, #151c2c); + box-shadow: 0 2.2cqh 5cqh color-mix(in srgb, var(--bg, #070a12) 72%, transparent); transform-origin: center; will-change: transform, filter, opacity; /* Both cards are the same placeholder material. Which one holds attention is said by blur, scale, and opacity, never by hue. */ - --fs-card-accent: color-mix(in srgb, var(--fg) 72%, var(--surface)); + --fs-card-accent: color-mix(in srgb, var(--fg, #f8fafc) 72%, var(--surface, #151c2c)); } .fs-card::before { @@ -144,7 +144,7 @@ import { InstallCommand } from "/snippets/install-command.jsx"; display: flex; align-items: center; justify-content: space-between; - gap: var(--space-2); + gap: var(--space-2, 16px); } .fs-card-letter { @@ -153,16 +153,16 @@ import { InstallCommand } from "/snippets/install-command.jsx"; width: 5cqw; aspect-ratio: 1; border-radius: 50%; - background: color-mix(in srgb, var(--fg) 13%, var(--surface)); - color: var(--fg); - font-family: var(--font-mono); + background: color-mix(in srgb, var(--fg, #f8fafc) 13%, var(--surface, #151c2c)); + color: var(--fg, #f8fafc); + font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace); font-size: 2.3cqw; font-weight: 700; } .fs-status { - color: var(--muted); - font-family: var(--font-mono); + color: var(--muted, #94a3b8); + font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace); font-size: 1.25cqw; letter-spacing: 0.12em; text-transform: uppercase; @@ -170,12 +170,12 @@ import { InstallCommand } from "/snippets/install-command.jsx"; .fs-copy { display: grid; - gap: var(--space-1); + gap: var(--space-1, 8px); } .fs-title { - color: var(--fg); - font-family: var(--font-display); + color: var(--fg, #f8fafc); + font-family: var(--font-display, Inter, system-ui, sans-serif); font-size: 3.4cqw; font-weight: 680; line-height: 1; @@ -183,7 +183,7 @@ import { InstallCommand } from "/snippets/install-command.jsx"; } .fs-detail { - color: var(--muted); + color: var(--muted, #94a3b8); font-size: 1.45cqw; line-height: 1.35; } @@ -191,8 +191,8 @@ import { InstallCommand } from "/snippets/install-command.jsx"; .fs-meter { height: 1.1cqh; overflow: hidden; - border-radius: var(--radius); - background: color-mix(in srgb, var(--border) 60%, transparent); + border-radius: var(--radius, 22px); + background: color-mix(in srgb, var(--border, #34405a) 60%, transparent); } .fs-meter-fill { diff --git a/docs/catalog/components/oversized-cursor.mdx b/docs/catalog/components/oversized-cursor.mdx index 713c19c3e08..a024332946e 100644 --- a/docs/catalog/components/oversized-cursor.mdx +++ b/docs/catalog/components/oversized-cursor.mdx @@ -39,7 +39,7 @@ import { InstallCommand } from "/snippets/install-command.jsx"; mount contract: this file is a HyperFrames sub-composition, loaded by a host via data-composition-src, never opened standalone. The runtime clones ONLY the