mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
Miguel Ángel
406bf316a3
* fix(catalog): make component previews answer their variables panel Every control on a component's catalog page did nothing. Asking caption-camera-follow for a violet accent rendered gold, and so did green and blue, on 166 of the 168 components that declare variables. A component ships a snippet, which is what the page hands you to paste and which carries the declaration plus the script that turns a chosen value into a CSS custom property, and a demo.html which stages and animates it. The preview is built from the demo, and the demo was authored as a copy of the snippet rather than a reference to it. The copies drifted until almost none of them carried the declaration or the reader, so the payload for that page never contained the word violet at all. Components come in two shapes, so the repair does too. 123 ship a snippet that registers its own paused timeline. That snippet is a whole piece, so their preview is now built from it and carries markup, variables and motion together. 45 are markup plus a commented recipe, where the demo owns the motion. Those demos now carry the snippet's declaration, reader and var-driven CSS in the registry itself, written by scripts/catalog/sync-demo-variables.ts. Nothing is patched in at build time. A test runs that tool in dry mode and fails when a demo has drifted again, naming the command that repairs it. It also asserts it inspected more than a hundred components, because a check that silently matches nothing is how this rotted in the first place. Measured by rendering every payload in a real player rather than by reading markup: payloads declaring their variables go from 2 of 168 to 168 of 168, previews that animate go from 166 to 167, and nothing that moved stopped moving. ascii-render-pass and star-rating-fill render a still frame when built from their snippet, so they keep the demo path as a recorded exception and stay in the state they were already in. * refactor(catalog): give the preview pipeline one lookup and one entrypoint guard Follow-up on the same branch, no behaviour change: 42 tests still pass and `sync-demo-variables --check` still reports all 168 components clean. The payload generator and the demo sync had each grown their own copy of "given a component directory, find the snippet and the demo". Both now call `componentFiles`, which is the same duplication-by-copying that broke the previews in the first place. Both catalog generators also carried a byte-identical 12-line guard for "only run main() when this file is the entrypoint". That clone was already in the tree, but nothing had touched both files at once before, so it had never surfaced. It is now `runAsCommand`, and the sync script's variant of the same condition is `isEntrypoint`. The rest is flattening: the layering guards read as a table of conditions instead of a chain, the reporting splits by what it reports, and the entry resolution comes out of `buildPayload` rather than being spliced into it. Also runs the formatter over the demos this branch rewrote. Whitespace only, and `notes-typing` is the only component demo that renders pre-formatted text, which this does not touch.
346 lines
11 KiB
HTML
Vendored
346 lines
11 KiB
HTML
Vendored
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=1920, height=1080" />
|
|
<title>Shared Axis Z - Demo</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
}
|
|
#demo {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: #f4f4f5;
|
|
font-family: Inter, system-ui, sans-serif;
|
|
}
|
|
/* ponytail: demo-frame is not a GSAP target — CSS transform is safe */
|
|
.demo-frame {
|
|
position: relative;
|
|
width: 720px;
|
|
height: 480px;
|
|
transform: scale(1.6);
|
|
}
|
|
/* Shared container that clips both panels */
|
|
.axis-z-stage {
|
|
position: relative;
|
|
width: 720px;
|
|
height: 480px;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow:
|
|
0 32px 80px rgba(0, 0, 0, 0.12),
|
|
0 2px 8px rgba(0, 0, 0, 0.06);
|
|
border: 1px solid #e4e4e7;
|
|
background: #ffffff;
|
|
}
|
|
/* Outgoing panel (zooms out + fades) */
|
|
.axis-z-outgoing {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 14px;
|
|
background: #ffffff;
|
|
will-change: transform, opacity;
|
|
}
|
|
.axis-z-outgoing-icon {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 12px;
|
|
background: #18181b;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.axis-z-outgoing-icon svg {
|
|
width: 26px;
|
|
height: 26px;
|
|
fill: none;
|
|
stroke: #ffffff;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
.axis-z-outgoing-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #18181b;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.axis-z-outgoing-subtitle {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: #71717a;
|
|
}
|
|
.axis-z-outgoing-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 4px;
|
|
}
|
|
.axis-z-chip {
|
|
padding: 5px 12px;
|
|
border-radius: 999px;
|
|
background: #f4f4f5;
|
|
border: 1px solid #e4e4e7;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #52525b;
|
|
}
|
|
/* Incoming panel (the component output — zooms in from small) */
|
|
.axis-z-incoming {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 40px;
|
|
gap: 24px;
|
|
background: #ffffff;
|
|
will-change: transform, opacity;
|
|
}
|
|
.axis-z-incoming-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.axis-z-incoming-eyebrow {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: #71717a;
|
|
}
|
|
/* GSAP animates .hf-catalog-shared-axis-z span — must keep class + span structure */
|
|
.hf-catalog-shared-axis-z {
|
|
display: inline-flex;
|
|
gap: 10px;
|
|
font-size: 36px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.04em;
|
|
line-height: 1;
|
|
color: #18181b;
|
|
}
|
|
.hf-catalog-shared-axis-z span {
|
|
display: inline-block;
|
|
transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
|
|
scale(var(--hf-word-scale, 1));
|
|
filter: blur(var(--hf-word-blur, 0px));
|
|
will-change: transform, filter, opacity;
|
|
}
|
|
.axis-z-incoming-meta {
|
|
font-size: 13px;
|
|
color: #71717a;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
max-width: 400px;
|
|
}
|
|
.axis-z-incoming-stats {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-top: auto;
|
|
}
|
|
.axis-z-stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
padding: 16px 20px;
|
|
background: #fafafa;
|
|
border: 1px solid #e4e4e7;
|
|
border-radius: 10px;
|
|
flex: 1;
|
|
}
|
|
.axis-z-stat-value {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #18181b;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
.axis-z-stat-label {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: #71717a;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
.axis-z-divider {
|
|
width: 100%;
|
|
height: 1px;
|
|
background: #e4e4e7;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div
|
|
id="demo"
|
|
data-composition-id="shared-axis-z-demo"
|
|
data-start="0"
|
|
data-width="1920"
|
|
data-height="1080"
|
|
data-duration="5"
|
|
>
|
|
<div class="demo-frame">
|
|
<div class="axis-z-stage">
|
|
<!-- Outgoing view: zooms out + fades as incoming arrives -->
|
|
<div class="axis-z-outgoing">
|
|
<div class="axis-z-outgoing-icon">
|
|
<svg viewBox="0 0 24 24">
|
|
<rect x="3" y="3" width="7" height="7" rx="1" />
|
|
<rect x="14" y="3" width="7" height="7" rx="1" />
|
|
<rect x="3" y="14" width="7" height="7" rx="1" />
|
|
<rect x="14" y="14" width="7" height="7" rx="1" />
|
|
</svg>
|
|
</div>
|
|
<div class="axis-z-outgoing-title">Overview</div>
|
|
<div class="axis-z-outgoing-subtitle">Select a context to zoom in</div>
|
|
<div class="axis-z-outgoing-row">
|
|
<div class="axis-z-chip">Analytics</div>
|
|
<div class="axis-z-chip">Reports</div>
|
|
<div class="axis-z-chip">Settings</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Incoming view: zooms in from center (shared-axis-Z) -->
|
|
<div class="axis-z-incoming">
|
|
<div class="axis-z-incoming-header">
|
|
<div class="axis-z-incoming-eyebrow">Analytics</div>
|
|
<div
|
|
class="hf-catalog-shared-axis-z"
|
|
data-composition-variables='[
|
|
{ "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Which way the words travel along the z axis: in swells up from small, out settles down from large.", "default": "in", "options": [{ "value": "in", "label": "In" }, { "value": "out", "label": "Out" }] },
|
|
{ "id": "depth", "type": "enum", "role": "motion", "label": "Depth", "description": "Scales how far the words start from their final size, so the push covers a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "shallow", "label": "Shallow" }, { "value": "standard", "label": "Standard" }, { "value": "deep", "label": "Deep" }] },
|
|
{ "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
|
|
]'
|
|
>
|
|
<span>Zoom</span><span>context</span>
|
|
</div>
|
|
<div class="axis-z-incoming-meta">
|
|
Drill into any metric with a shared-axis Z transition — the new view scales in from
|
|
the tap point.
|
|
</div>
|
|
</div>
|
|
<div class="axis-z-divider"></div>
|
|
<div class="axis-z-incoming-stats">
|
|
<div class="axis-z-stat">
|
|
<div class="axis-z-stat-value">24.8k</div>
|
|
<div class="axis-z-stat-label">Sessions</div>
|
|
</div>
|
|
<div class="axis-z-stat">
|
|
<div class="axis-z-stat-value">3.4s</div>
|
|
<div class="axis-z-stat-label">Avg. time</div>
|
|
</div>
|
|
<div class="axis-z-stat">
|
|
<div class="axis-z-stat-value">91%</div>
|
|
<div class="axis-z-stat-label">Retention</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(function () {
|
|
"use strict";
|
|
|
|
var vars =
|
|
window.__hyperframes && window.__hyperframes.getVariables
|
|
? window.__hyperframes.getVariables()
|
|
: {};
|
|
|
|
// Unrecognised overrides return to their declared defaults.
|
|
var signs = { in: 1, out: -1 };
|
|
var reaches = { shallow: 0.5, standard: 1, deep: 1.85 };
|
|
var tones = {
|
|
ink: "#18181b",
|
|
paper: "#fafafa",
|
|
accent: "var(--brand, #34d399)",
|
|
};
|
|
|
|
function pick(table, value, fallback) {
|
|
return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
|
|
}
|
|
|
|
var sign = signs[pick(signs, vars.direction, "in")];
|
|
var reach = reaches[pick(reaches, vars.depth, "standard")];
|
|
var tone = tones[pick(tones, vars.tone, "ink")];
|
|
|
|
var roots = document.querySelectorAll(".hf-catalog-shared-axis-z");
|
|
for (var i = 0; i < roots.length; i += 1) {
|
|
roots[i].style.setProperty("--hf-word-depth", String(sign * reach));
|
|
roots[i].style.setProperty("--hf-word-color", tone);
|
|
}
|
|
})();
|
|
</script>
|
|
<script>
|
|
const tl = gsap.timeline({ paused: true });
|
|
const startTime = 0.5;
|
|
|
|
// Outgoing panel: zoom out + fade (shared-axis Z departure)
|
|
tl.fromTo(
|
|
".axis-z-outgoing",
|
|
{ opacity: 1, scale: 1 },
|
|
{ opacity: 0, scale: 1.18, duration: 0.4, ease: "power2.in" },
|
|
startTime,
|
|
);
|
|
|
|
// Incoming panel: zoom in from small + fade (shared-axis Z arrival)
|
|
tl.fromTo(
|
|
".axis-z-incoming",
|
|
{ opacity: 0, scale: 0.82 },
|
|
{ opacity: 1, scale: 1, duration: 0.45, ease: "expo.out" },
|
|
startTime + 0.05,
|
|
);
|
|
|
|
// Word-by-word reveal on the title
|
|
tl.fromTo(
|
|
".hf-catalog-shared-axis-z span",
|
|
{ opacity: 0, "--hf-word-scale": 0.72 },
|
|
{
|
|
opacity: 1,
|
|
"--hf-word-scale": 1,
|
|
duration: 0.34,
|
|
stagger: 0.06,
|
|
ease: "back.out(1.8)",
|
|
},
|
|
startTime + 0.28,
|
|
);
|
|
|
|
tl.set({}, {}, 5);
|
|
window.__timelines = window.__timelines || {};
|
|
window.__timelines["shared-axis-z-demo"] = tl;
|
|
</script>
|
|
</div>
|
|
<style>
|
|
.hf-catalog-shared-axis-z {
|
|
color: var(--hf-word-color, #18181b);
|
|
font-family: Inter, system-ui, sans-serif;
|
|
font-weight: 900;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
.hf-catalog-shared-axis-z {
|
|
display: inline-flex;
|
|
gap: 12px;
|
|
font-size: 56px;
|
|
line-height: 1;
|
|
}
|
|
.hf-catalog-shared-axis-z span {
|
|
display: inline-block;
|
|
transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
|
|
scale(calc(1 + (var(--hf-word-scale, 1) - 1) * var(--hf-word-depth, 1)));
|
|
filter: blur(var(--hf-word-blur, 0px));
|
|
will-change: transform, filter, opacity;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|