ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-10-30 09:16:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(catalog): publish generated catalog

Browse Source
This commit is contained in:
github-actions[bot]
2026-10-30 06:25:26 +00:00
committed by GitHub
parent 36cf990d99
commit 5a1e819d80
26 changed files with 161 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/catalog/blocks/mk-callout-highlight.mdx
+36 -10
View File
@@ -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"
>
<div id="mk-ch-box" data-layout-allow-occlusion></div>
<div id="mk-ch-center">
<div id="mk-ch-box" data-layout-allow-occlusion></div>
</div>
<div
id="mk-ch-drv"
class="clip"
@@ -99,7 +113,9 @@ import { InstallCommand } from "/snippets/install-command.jsx";
fontSize: 60,
lineHeight: 1.3,
maxWidth: 700, // px; sentence wraps inside this
x: 1030, // box left edge; null = centered horizontally
x: 1030, // box left edge; null = centered horizontally. Keep x + maxWidth <= 1920:
// the box never shrinks (flex: none), so past the frame edge it is clipped
// by the root's overflow instead of wrapping earlier.
y: null, // box top edge; null = centered vertically
align: "left",
sweep: { start: 1.2, end: 6.2 }, // block-local seconds, linear
@@ -132,12 +148,19 @@ import { InstallCommand } from "/snippets/install-command.jsx";
wordEls.push(span);
});
/* position (measure after building) */
var rect = box.getBoundingClientRect();
box.style.left =
(CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
box.style.top =
(CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + "px";
/* position: #mk-ch-center centres the box with flex (no measurement, so the
placement does not depend on font timing). A non-null CONFIG.x / CONFIG.y
switches that axis to an edge offset: the box keeps its content width
(clamped by maxWidth) and is pushed from the frame edge by a margin. */
var center = document.getElementById("mk-ch-center");
if (CONFIG.x !== null) {
center.style.justifyContent = "flex-start";
box.style.marginLeft = CONFIG.x + "px";
}
if (CONFIG.y !== null) {
center.style.alignItems = "flex-start";
box.style.marginTop = CONFIG.y + "px";
}
/* state proxy: GSAP animates st.p, render derives every word color from it */
var st = { p: 0 };
@@ -152,6 +175,9 @@ import { InstallCommand } from "/snippets/install-command.jsx";
var tl = gsap.timeline({ paused: true });
/* entrance / exit motion stays a GSAP transform on the box itself: the box
carries no CSS transform (centring is flex on the parent), so there is
nothing for the tween to fight. */
if (CONFIG.animationIn) {
gsap.set(box, { opacity: 0, y: 24 });
tl.to(box, { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" }, 0.3);
docs/catalog/components/camera-scan-gate.mdx
+6 -6
View File
@@ -13,7 +13,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
compositionSrc="compositions/components/camera-scan-gate.html"
title="Camera Scan Gate"
description="A camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat."
variables={[{"id":"scanColor","type":"string","role":"style","label":"Scan color","description":"Any CSS color value used by the scan line and recognition glow.","default":"var(--brand)"},{"id":"targetLabel","type":"string","role":"content","label":"Target label","description":"Confirmation label revealed at recognition lock. Blank hides the line.","default":"Verified"},{"id":"sweepSpeed","type":"number","role":"timing","label":"Sweep speed","description":"Speed multiplier for the scan sweep phase only.","default":1,"min":0.8,"max":1.6,"step":0.1,"unit":"x"}]}
variables={[{"id":"scanColor","type":"string","role":"style","label":"Scan color","description":"Any CSS color value used by the scan line and recognition glow.","default":"var(--brand, #22c55e)"},{"id":"targetLabel","type":"string","role":"content","label":"Target label","description":"Confirmation label revealed at recognition lock. Blank hides the line.","default":"Verified"},{"id":"sweepSpeed","type":"number","role":"timing","label":"Sweep speed","description":"Speed multiplier for the scan sweep phase only.","default":1,"min":0.8,"max":1.6,"step":0.1,"unit":"x"}]}
meta={{"category":"Camera","badge":"Stable","codeLines":522}}
attribution={{"path":"registry/components/camera-scan-gate","tags":["prop","ui-props","camera","qr","scan","recognition","interaction","demonstrate"]}}
hasCode
@@ -40,7 +40,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
it for passive camera decoration or a generic loading state.
Variables (declared in data-composition-variables below):
- scanColor (string, default "var(--brand)"): any CSS color value used by
- scanColor (string, default "var(--brand, #22c55e)"): any CSS color value used by
the scan line, lock brackets, and confirmation glow.
- targetLabel (string, default "Verified"): label revealed at lock. Empty
string hides the label line entirely.
@@ -80,7 +80,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
<html
lang="en"
data-composition-variables='[
{ "id": "scanColor", "type": "string", "role": "style", "label": "Scan color", "description": "Any CSS color value used by the scan line and recognition glow.", "default": "var(--brand)" },
{ "id": "scanColor", "type": "string", "role": "style", "label": "Scan color", "description": "Any CSS color value used by the scan line and recognition glow.", "default": "var(--brand, #22c55e)" },
{ "id": "targetLabel", "type": "string", "role": "content", "label": "Target label", "description": "Confirmation label revealed at recognition lock. Blank hides the line.", "default": "Verified" },
{ "id": "sweepSpeed", "type": "number", "role": "timing", "label": "Sweep speed", "description": "Speed multiplier for the scan sweep phase only.", "default": 1, "min": 0.8, "max": 1.6, "step": 0.1, "unit": "x" }
]'
@@ -394,7 +394,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
: {};
var scanColor =
vars.scanColor == null || String(vars.scanColor).trim() === ""
? "var(--brand)"
? "var(--brand, #22c55e)"
: String(vars.scanColor);
var targetLabel = vars.targetLabel == null ? "" : String(vars.targetLabel);
var rawSweepSpeed = Number(vars.sweepSpeed);
@@ -573,7 +573,7 @@ want to change on the element:
| Variable | Default | Accepts | What it does |
| --- | --- | --- | --- |
| `scanColor` | `var(--brand)` | string | Any CSS color value used by the scan line and recognition glow. |
| `scanColor` | `var(--brand, #22c55e)` | string | Any CSS color value used by the scan line and recognition glow. |
| `targetLabel` | `Verified` | string | Confirmation label revealed at recognition lock. Blank hides the line. |
| `sweepSpeed` | `1` | 0.8x to 1.6x, step 0.1x | Speed multiplier for the scan sweep phase only. |
@@ -584,7 +584,7 @@ defaults, so this behaves exactly like the preview above until you change one:
<div
data-composition-id="camera-scan-gate"
data-composition-src="compositions/components/camera-scan-gate.html"
data-variable-values='{"scanColor":"var(--brand)","targetLabel":"Verified","sweepSpeed":1}'
data-variable-values='{"scanColor":"var(--brand, #22c55e)","targetLabel":"Verified","sweepSpeed":1}'
></div>
```
docs/catalog/components/caption-clip-wipe.mdx
+3 -2
View File
@@ -14,7 +14,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
title="Clip Wipe"
description="Left-to-right clip-path wipe reveal per word"
variables={[]}
meta={{"category":"Captions","badge":"Stable","codeLines":226}}
meta={{"category":"Captions","badge":"Stable","codeLines":227}}
attribution={{"path":"registry/components/caption-clip-wipe","tags":["captions","caption-style","wipe","clip-path","reveal"]}}
hasCode
rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/components/caption-clip-wipe/caption-clip-wipe.html"
@@ -178,7 +178,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
var GROUPS = RAW_GROUPS.map(function (pair, gi) {
var ws = pair[0],
we = pair[1];
var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
var nextStart =
gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : Infinity;
var gEnd = Math.min(WORDS[we].end + 0.5, nextStart - 0.05);
return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
});
docs/catalog/components/caption-glitch-rgb.mdx
+1 -1
View File
@@ -229,7 +229,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
var ws = pair[0];
var we = pair[1];
var nextStart =
gi + 1 < RAW_GROUPS.length ? TRANSCRIPT[RAW_GROUPS[gi + 1][0]].start : 8.0;
gi + 1 < RAW_GROUPS.length ? TRANSCRIPT[RAW_GROUPS[gi + 1][0]].start : Infinity;
var end = Math.min(TRANSCRIPT[we].end + 0.24, nextStart - 0.04);
return { wordStart: ws, wordEnd: we, start: TRANSCRIPT[ws].start, end: end };
});
docs/catalog/components/caption-highlight.mdx
+3 -2
View File
@@ -14,7 +14,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
title="Highlight"
description="Red background sweep behind each active word, TikTok-style"
variables={[]}
meta={{"category":"Captions","badge":"Stable","codeLines":261}}
meta={{"category":"Captions","badge":"Stable","codeLines":262}}
attribution={{"path":"registry/components/caption-highlight","tags":["captions","caption-style","highlight","social","tiktok"]}}
hasCode
rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/components/caption-highlight/caption-highlight.html"
@@ -203,7 +203,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
var GROUPS = RAW_GROUPS.map(function (pair, gi) {
var ws = pair[0],
we = pair[1];
var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
var nextStart =
gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : Infinity;
var gEnd = Math.min(WORDS[we].end + 0.5, nextStart - 0.05);
return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
});
docs/catalog/components/caption-particle-burst.mdx
+3 -2
View File
@@ -14,7 +14,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
title="Particle Burst"
description="Keyword words trigger colored particle explosions"
variables={[]}
meta={{"category":"Captions","badge":"Stable","codeLines":296}}
meta={{"category":"Captions","badge":"Stable","codeLines":297}}
attribution={{"path":"registry/components/caption-particle-burst","tags":["captions","caption-style","particles","burst","effects"]}}
hasCode
rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/components/caption-particle-burst/caption-particle-burst.html"
@@ -199,7 +199,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
var GROUPS = RAW_GROUPS.map(function (pair, gi) {
var ws = pair[0],
we = pair[1];
var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
var nextStart =
gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : Infinity;
var gEnd = Math.min(WORDS[we].end + 0.35, nextStart - 0.05);
return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
});
docs/catalog/components/device-frame-stage.mdx
+1 -1
View File
@@ -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
docs/catalog/components/focus-swap.mdx
+20 -20
View File
@@ -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 {
docs/catalog/components/oversized-cursor.mdx
+1 -1
View File
@@ -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
<template> contents into the host slot (see
skills/hyperframes-core/references/sub-compositions.md); everything outside
skills/hyperframes/references/format.md); everything outside
<template>, including this <head>, is discarded at render. The root is #root:
elastic, no data-width/data-height declared here, it fills whatever box the host
clip gives it (position:absolute; inset:0). See demo.html for the mount usage
docs/catalog/components/overwhelm-surround.mdx
+1 -1
View File
@@ -61,7 +61,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
composition. A host loads it via data-composition-src; the runtime only
clones <template> contents (everything outside <template>, including the
entire <head>, is discarded on mount), see
skills/hyperframes-core/references/sub-compositions.md. The root carries no
skills/hyperframes/references/format.md. The root carries no
data-width/data-height: it is elastic, sized off whatever box the host clip
gives it (position:absolute; inset:0; container-type:size), so the effect
reads correctly whether the host mounts it into a 960x540 slot or a full
docs/catalog/components/spring-pop.mdx
+1 -1
View File
@@ -33,7 +33,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
Compiled-from evidence: Video Primitives v1 build contract, Easing
vocabulary (--ease-overshoot = GSAP back.out(1.7), taste rules 4 and 5),
plus hyperframes-animation rules/spring-pop-entrance.md's playful
plus hyperframes/animation rules/spring-pop-entrance.md's playful
overshoot variation. This fills the gap left by spring-scale-in, whose
power3.out curve never overshoots.
docs/catalog/components/stagger-cascade.mdx
+9 -9
View File
@@ -107,8 +107,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
container-type: size;
isolation: isolate;
overflow: hidden;
color: var(--fg);
font-family: var(--font-body);
color: var(--fg, #f4f7fb);
font-family: var(--font-body, Inter, system-ui, sans-serif);
}
.sc-clip {
@@ -117,7 +117,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
display: grid;
place-items: center;
overflow: hidden;
background: var(--bg);
background: var(--bg, #090d16);
}
.sc-grid {
@@ -136,10 +136,10 @@ import { InstallCommand } from "/snippets/install-command.jsx";
display: grid;
place-items: center;
overflow: hidden;
border: 0.16cqw solid var(--border);
border: 0.16cqw solid var(--border, rgba(244, 247, 251, 0.14));
border-radius: min(2.4cqw, 4cqh);
background: color-mix(in srgb, var(--surface) 92%, var(--brand));
color: var(--fg);
background: color-mix(in srgb, var(--surface, #171e2d) 92%, var(--brand, #79a8ff));
color: var(--fg, #f4f7fb);
}
.sc-tile::after {
@@ -150,17 +150,17 @@ import { InstallCommand } from "/snippets/install-command.jsx";
bottom: 12%;
height: min(0.55cqw, 0.95cqh);
border-radius: 50cqw;
background: var(--brand);
background: var(--brand, #79a8ff);
opacity: 0.72;
}
.sc-tile-index {
display: block;
font-family: var(--font-display);
font-family: var(--font-display, Inter, system-ui, sans-serif);
font-size: min(5cqw, 8cqh);
font-weight: 700;
line-height: 1;
color: var(--fg);
color: var(--fg, #f4f7fb);
}
</style>
docs/catalog/components/store-badge-lockup.mdx
+22 -22
View File
@@ -89,8 +89,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
container-type: size;
isolation: isolate;
overflow: hidden;
color: var(--fg);
font-family: var(--font-body);
color: var(--fg, #f7f9fc);
font-family: var(--font-body, Inter, system-ui, sans-serif);
}
.sbl-clip {
@@ -98,9 +98,9 @@ import { InstallCommand } from "/snippets/install-command.jsx";
height: 100%;
display: grid;
place-items: center;
padding: var(--space-3);
padding: var(--space-3, 4.8cqh);
overflow: hidden;
background: var(--bg);
background: var(--bg, #080b13);
}
.sbl-lockup {
@@ -113,8 +113,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
.sbl-headline {
margin: 0;
max-width: 82cqw;
color: var(--fg);
font-family: var(--font-display);
color: var(--fg, #f7f9fc);
font-family: var(--font-display, Inter, system-ui, sans-serif);
font-size: min(8.2cqw, 12.5cqh);
font-weight: 750;
line-height: 1;
@@ -129,7 +129,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
gap: var(--space-2, 2.4cqh);
}
/* EDIT ZONE: both destinations share one badge geometry and one
@@ -141,13 +141,13 @@ import { InstallCommand } from "/snippets/install-command.jsx";
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--space-1);
gap: var(--space-1, 1.2cqh);
padding: min(2.2cqw, 3.2cqh) min(3cqw, 4.8cqh);
border: 0.16cqh solid var(--border);
border-radius: calc(var(--radius) * 4);
background: var(--surface);
color: var(--fg);
box-shadow: 0 1.5cqh 3.8cqh color-mix(in srgb, var(--bg) 70%, transparent);
border: 0.16cqh solid var(--border, #3b4659);
border-radius: calc(var(--radius, 2.4cqh) * 4);
background: var(--surface, #151c29);
color: var(--fg, #f7f9fc);
box-shadow: 0 1.5cqh 3.8cqh color-mix(in srgb, var(--bg, #080b13) 70%, transparent);
will-change: transform, opacity;
}
@@ -157,14 +157,14 @@ import { InstallCommand } from "/snippets/install-command.jsx";
display: grid;
place-items: center;
flex: none;
border: 0.16cqh solid color-mix(in srgb, var(--fg) 28%, transparent);
border-radius: calc(var(--radius) * 0.72);
background: color-mix(in srgb, var(--brand) 20%, var(--surface));
color: var(--fg);
border: 0.16cqh solid color-mix(in srgb, var(--fg, #f7f9fc) 28%, transparent);
border-radius: calc(var(--radius, 2.4cqh) * 0.72);
background: color-mix(in srgb, var(--brand, #7c6cff) 20%, var(--surface, #151c29));
color: var(--fg, #f7f9fc);
}
.sbl-apple-mark {
font-family: var(--font-display);
font-family: var(--font-display, Inter, system-ui, sans-serif);
font-size: min(3.2cqw, 5.2cqh);
font-weight: 800;
line-height: 1;
@@ -184,8 +184,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
}
.sbl-microcopy {
color: var(--muted);
font-family: var(--font-body);
color: var(--muted, #aab4c5);
font-family: var(--font-body, Inter, system-ui, sans-serif);
font-size: min(1.65cqw, 2.65cqh);
font-weight: 600;
line-height: 1;
@@ -194,8 +194,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
}
.sbl-label {
color: var(--fg);
font-family: var(--font-display);
color: var(--fg, #f7f9fc);
font-family: var(--font-display, Inter, system-ui, sans-serif);
font-size: min(3.75cqw, 5.8cqh);
font-weight: 720;
line-height: 1;
docs/catalog/components/svg-mask-reveal.mdx
+10 -10
View File
@@ -105,9 +105,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, #101d31);
color: var(--fg, #f8fafc);
font-family: var(--font-body, Inter, system-ui, sans-serif);
}
.smr-clip,
@@ -134,20 +134,20 @@ import { InstallCommand } from "/snippets/install-command.jsx";
}
.smr-media-start {
stop-color: var(--brand);
stop-color: var(--brand, #ff7a33);
}
.smr-media-middle {
stop-color: var(--accent);
stop-color: var(--accent, #22d3ee);
}
.smr-media-end {
stop-color: var(--fg);
stop-color: var(--fg, #f8fafc);
}
.smr-mask-text {
fill: var(--fg);
font-family: var(--font-display);
fill: var(--fg, #f8fafc);
font-family: var(--font-display, Inter, system-ui, sans-serif);
font-size: 240px;
font-weight: 850;
letter-spacing: 0.02em;
@@ -160,9 +160,9 @@ import { InstallCommand } from "/snippets/install-command.jsx";
.smr-outline {
fill: none;
stroke: var(--border);
stroke: var(--border, rgba(248, 250, 252, 0.22));
stroke-width: 2;
font-family: var(--font-display);
font-family: var(--font-display, Inter, system-ui, sans-serif);
font-size: 240px;
font-weight: 850;
letter-spacing: 0.02em;
docs/catalog/components/testimonial-card.mdx
+20 -20
View File
@@ -92,9 +92,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);
}
.tc-clip {
@@ -114,10 +114,10 @@ import { InstallCommand } from "/snippets/install-command.jsx";
gap: min(4.6cqw, 4.6cqh);
padding: min(6.5cqw, 6.5cqh);
overflow: hidden;
border: 0.16cqh solid var(--border);
border-radius: var(--radius);
background: var(--surface);
box-shadow: 0 3cqh 8cqh color-mix(in srgb, var(--bg) 68%, transparent);
border: 0.16cqh solid var(--border, #34405a);
border-radius: var(--radius, 28px);
background: var(--surface, #151c2c);
box-shadow: 0 3cqh 8cqh color-mix(in srgb, var(--bg, #070a12) 68%, transparent);
}
.tc-proof {
@@ -131,8 +131,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
align-items: center;
gap: min(2cqw, 2cqh);
width: max-content;
color: var(--muted);
font-family: var(--font-mono);
color: var(--muted, #a8b3c7);
font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
font-size: min(2.4cqw, 2.4cqh);
font-weight: 650;
line-height: 1;
@@ -141,7 +141,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
.tc-stars {
position: relative;
display: inline-block;
color: var(--muted);
color: var(--muted, #a8b3c7);
font-size: min(3.4cqw, 3.4cqh);
letter-spacing: 0.18em;
line-height: 1;
@@ -155,14 +155,14 @@ import { InstallCommand } from "/snippets/install-command.jsx";
overflow: hidden;
/* The earned portion of the rating is the data. Flat ink over the
muted track says it by value, with no second hue. */
color: var(--fg);
color: var(--fg, #f8fafc);
white-space: nowrap;
}
.tc-quote {
margin: 0;
color: var(--fg);
font-family: var(--font-display);
color: var(--fg, #f8fafc);
font-family: var(--font-display, Inter, system-ui, sans-serif);
font-size: min(5.2cqw, 5.2cqh);
font-weight: 650;
line-height: 1.23;
@@ -185,13 +185,13 @@ import { InstallCommand } from "/snippets/install-command.jsx";
place-items: center;
width: min(8.4cqw, 8.4cqh);
aspect-ratio: 1;
border: 0.16cqh solid color-mix(in srgb, var(--fg) 20%, transparent);
border: 0.16cqh solid color-mix(in srgb, var(--fg, #f8fafc) 20%, transparent);
border-radius: 50%;
/* Placeholder person: a single (front) avatar circle at L1, with
the initials knocked out in the ground colour. */
background: color-mix(in srgb, var(--fg) 72%, var(--surface));
color: var(--bg);
font-family: var(--font-display);
background: color-mix(in srgb, var(--fg, #f8fafc) 72%, var(--surface, #151c2c));
color: var(--bg, #070a12);
font-family: var(--font-display, Inter, system-ui, sans-serif);
font-size: min(2.65cqw, 2.65cqh);
font-weight: 780;
letter-spacing: 0.03em;
@@ -200,8 +200,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
.tc-author {
min-width: 0;
align-self: end;
color: var(--fg);
font-family: var(--font-display);
color: var(--fg, #f8fafc);
font-family: var(--font-display, Inter, system-ui, sans-serif);
font-size: min(3.2cqw, 3.2cqh);
font-weight: 700;
line-height: 1.08;
@@ -210,7 +210,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
.tc-handle {
min-width: 0;
align-self: start;
color: var(--muted);
color: var(--muted, #a8b3c7);
font-size: min(2.35cqw, 2.35cqh);
line-height: 1.15;
}
docs/catalog/components/toggle-flip.mdx
+1 -1
View File
@@ -75,7 +75,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
composition. A host loads it via data-composition-src; the runtime only
clones <template> contents (everything outside <template>, including the
entire <head>, is discarded on mount) -- see
skills/hyperframes-core/references/sub-compositions.md. The root carries
skills/hyperframes/references/format.md. The root carries
no data-width/data-height: it is elastic, sized off whatever box the host
clip gives it (position:absolute; inset:0; container-type:size), so the
toggle reads correctly whether the host mounts it into a 960x540 slot or a
docs/catalog/components/touch-indicator.mdx
+1 -1
View File
@@ -36,7 +36,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
MOUNTABLE SUB-COMPOSITION: this file is loaded by a host via
data-composition-src, not pasted inline. The runtime only clones
<template> contents (see skills/hyperframes-core/references/sub-compositions.md),
<template> contents (see skills/hyperframes/references/format.md),
so every style, the markup, and the script that builds and registers the
timeline all live inside <template> below. The file is self-driving: it
builds its own paused GSAP timeline and registers it under
docs/catalog/components/wordmark-tiles.mdx
+14 -14
View File
@@ -108,8 +108,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
container-type: size;
isolation: isolate;
overflow: hidden;
color: var(--fg);
font-family: var(--font-body);
color: var(--fg, #f5f7ff);
font-family: var(--font-body, Inter, system-ui, sans-serif);
}
.wt-clip {
@@ -118,7 +118,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
display: grid;
place-items: center;
overflow: hidden;
background: var(--bg);
background: var(--bg, #070a12);
}
.wt-stage {
@@ -138,9 +138,9 @@ import { InstallCommand } from "/snippets/install-command.jsx";
grid-template-columns: repeat(var(--wt-columns), minmax(0, 1fr));
grid-template-rows: repeat(var(--wt-rows), minmax(0, 1fr));
overflow: hidden;
border: min(0.12cqw, 0.22cqh) solid var(--border);
border-radius: var(--radius);
background: var(--surface);
border: min(0.12cqw, 0.22cqh) solid var(--border, rgba(245, 247, 255, 0.14));
border-radius: var(--radius, 16px);
background: var(--surface, #151b2b);
}
.wt-tile {
@@ -148,8 +148,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
min-width: 0;
min-height: 0;
overflow: hidden;
box-shadow: inset 0 0 0 min(0.08cqw, 0.14cqh) var(--border);
background: var(--surface);
box-shadow: inset 0 0 0 min(0.08cqw, 0.14cqh) var(--border, rgba(245, 247, 255, 0.14));
background: var(--surface, #151b2b);
}
.wt-noise,
@@ -161,20 +161,20 @@ import { InstallCommand } from "/snippets/install-command.jsx";
}
.wt-noise-a {
background: color-mix(in srgb, var(--surface) 64%, var(--muted));
background: color-mix(in srgb, var(--surface, #151b2b) 64%, var(--muted, #7f8aa3));
}
.wt-noise-b {
background: color-mix(in srgb, var(--surface) 58%, var(--brand));
background: color-mix(in srgb, var(--surface, #151b2b) 58%, var(--brand, #7c9dff));
}
.wt-noise-c {
background: color-mix(in srgb, var(--surface) 56%, var(--accent));
background: color-mix(in srgb, var(--surface, #151b2b) 56%, var(--accent, #64e2c2));
}
.wt-resolved {
overflow: hidden;
background: color-mix(in srgb, var(--surface) 92%, var(--brand));
background: color-mix(in srgb, var(--surface, #151b2b) 92%, var(--brand, #7c9dff));
}
/* Every tile contains one crop of the same stable wordmark surface.
@@ -187,8 +187,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
height: 48cqh;
display: grid;
place-items: center;
color: var(--fg);
font-family: var(--font-display);
color: var(--fg, #f5f7ff);
font-family: var(--font-display, Inter, system-ui, sans-serif);
font-size: var(--wt-font-size);
font-weight: 800;
line-height: 1;
docs/public/catalog/blocks/aurora.json
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/public/catalog/blocks/blob.json
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/public/catalog/blocks/camcorder-hud.json
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/public/catalog/blocks/chrome-orb.json
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/public/catalog/blocks/code-snippet-dark-2026.json
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/public/catalog/blocks/code-snippet-dark-modern.json
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/public/catalog/blocks/color-wheel.json
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/public/catalog/blocks/editorial-flash-overlay.json
+1 -1
View File
File diff suppressed because one or more lines are too long