mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
Miguel Ángel
9734578e60
Restores the 208 catalog items reverted after their previews 404'd in production, this time on the payload mechanism rather than the .html files that caused the outage. The generator no longer writes a preview document to docs/public. That writer, and the machinery under it, existed only to produce files the docs host discards, so it is gone rather than bypassed. Items now embed the composition itself via a payload, which is what the previous change already does for the items that were already in the catalog. The variables explorer is parked, not restored: it drove its preview through the same unpublished .html path, so it would have shown an empty frame. Items that declare variables get the live player plus the static variables table, and reconnecting the explorer to payloads is a follow-up.
239 lines
11 KiB
HTML
Vendored
239 lines
11 KiB
HTML
Vendored
<!--
|
|
Separator - Operator Black structural rule primitive for HyperFrames.
|
|
|
|
Paste the markup, CSS and script into a composition. Animate the CSS
|
|
variables from a paused GSAP timeline for deterministic video renders.
|
|
|
|
Variables. The script reads each one, falls back to the declared default on
|
|
anything missing or unrecognised, and writes the result as a custom property
|
|
or an attribute the CSS above consumes. The timeline recipe below is
|
|
untouched by them: it still drives one progress value from 0 to 1, and these
|
|
decide what that progress reveals.
|
|
|
|
- orientation (horizontal | vertical, default horizontal): which way the
|
|
rule runs. horizontal is a 360px wide rule wiping left to right,
|
|
vertical is a 180px tall rule wiping top to bottom.
|
|
- thickness (hairline | medium | bold, default hairline): the rule size
|
|
across its short edge, 1px, 2px or 4px.
|
|
- tone (neutral | accent | warning, default neutral): colour of the
|
|
revealed fill. neutral keeps the control border grey, accent rides
|
|
--hf-ui-accent, warning rides --hf-ui-warning.
|
|
|
|
On every default the result is identical to the original: a 1px horizontal
|
|
grey rule wiping left to right.
|
|
-->
|
|
|
|
<div
|
|
data-hf-ui-root
|
|
class="hf-ui-separator"
|
|
role="separator"
|
|
aria-orientation="horizontal"
|
|
data-composition-variables='[
|
|
{ "id": "orientation", "type": "enum", "role": "layout", "label": "Orientation", "description": "Which way the rule runs, and so which way the reveal travels.", "default": "horizontal", "options": [{ "value": "horizontal", "label": "Horizontal" }, { "value": "vertical", "label": "Vertical" }] },
|
|
{ "id": "thickness", "type": "enum", "role": "style", "label": "Thickness", "description": "Size of the rule across its short edge, from a 1px hairline to a 4px bar.", "default": "hairline", "options": [{ "value": "hairline", "label": "Hairline" }, { "value": "medium", "label": "Medium" }, { "value": "bold", "label": "Bold" }] },
|
|
{ "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Colour of the revealed fill: neutral grey, the theme accent, or the warning hue.", "default": "neutral", "options": [{ "value": "neutral", "label": "Neutral" }, { "value": "accent", "label": "Accent" }, { "value": "warning", "label": "Warning" }] }
|
|
]'
|
|
>
|
|
<span></span>
|
|
</div>
|
|
|
|
<style>
|
|
/* hf-ui:tokens:start */
|
|
/* prettier-ignore */
|
|
[data-hf-ui-root] {
|
|
--_hf-ui-accent: var(--hf-ui-accent, #3ce6ac);
|
|
--_hf-ui-action: var(--hf-ui-action, #eeeeee);
|
|
--_hf-ui-action-contrast: var(--hf-ui-action-contrast, #111111);
|
|
--_hf-ui-border: var(--hf-ui-border, #2a2a2a);
|
|
--_hf-ui-border-strong: var(--hf-ui-border-strong, #383838);
|
|
--_hf-ui-canvas: var(--hf-ui-canvas, #0a0a0a);
|
|
--_hf-ui-control-border: var(--hf-ui-control-border, #686868);
|
|
--_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #777777);
|
|
--_hf-ui-control-height: var(--hf-ui-control-height, 40px);
|
|
--_hf-ui-danger: var(--hf-ui-danger, #ff7878);
|
|
--_hf-ui-data-1: var(--hf-ui-data-1, #3ce6ac);
|
|
--_hf-ui-data-2: var(--hf-ui-data-2, #63a5ff);
|
|
--_hf-ui-data-3: var(--hf-ui-data-3, #e9ab55);
|
|
--_hf-ui-data-4: var(--hf-ui-data-4, #a78bfa);
|
|
--_hf-ui-data-5: var(--hf-ui-data-5, #ff8a75);
|
|
--_hf-ui-duration-drawer-enter: var(--hf-ui-duration-drawer-enter, 360ms);
|
|
--_hf-ui-duration-drawer-exit: var(--hf-ui-duration-drawer-exit, 240ms);
|
|
--_hf-ui-duration-modal-enter: var(--hf-ui-duration-modal-enter, 280ms);
|
|
--_hf-ui-duration-modal-exit: var(--hf-ui-duration-modal-exit, 180ms);
|
|
--_hf-ui-duration-overlay-enter: var(--hf-ui-duration-overlay-enter, 210ms);
|
|
--_hf-ui-duration-overlay-exit: var(--hf-ui-duration-overlay-exit, 140ms);
|
|
--_hf-ui-duration-press: var(--hf-ui-duration-press, 120ms);
|
|
--_hf-ui-duration-state: var(--hf-ui-duration-state, 160ms);
|
|
--_hf-ui-ease-enter: var(--hf-ui-ease-enter, cubic-bezier(0.32, 0.72, 0, 1));
|
|
--_hf-ui-ease-exit: var(--hf-ui-ease-exit, cubic-bezier(0.23, 1, 0.32, 1));
|
|
--_hf-ui-ease-response: var(--hf-ui-ease-response, cubic-bezier(0.23, 1, 0.32, 1));
|
|
--_hf-ui-font-mono: var(--hf-ui-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
|
|
--_hf-ui-font-sans: var(--hf-ui-font-sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
|
|
--_hf-ui-hit-target: var(--hf-ui-hit-target, 44px);
|
|
--_hf-ui-radius-control: var(--hf-ui-radius-control, 5px);
|
|
--_hf-ui-radius-overlay: var(--hf-ui-radius-overlay, 10px);
|
|
--_hf-ui-radius-surface: var(--hf-ui-radius-surface, 7px);
|
|
--_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 8px 18px rgba(0, 0, 0, 0.38));
|
|
--_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.035));
|
|
--_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(0, 0, 0, 0.52));
|
|
--_hf-ui-space-1: var(--hf-ui-space-1, 4px);
|
|
--_hf-ui-space-12: var(--hf-ui-space-12, 48px);
|
|
--_hf-ui-space-16: var(--hf-ui-space-16, 64px);
|
|
--_hf-ui-space-2: var(--hf-ui-space-2, 8px);
|
|
--_hf-ui-space-3: var(--hf-ui-space-3, 12px);
|
|
--_hf-ui-space-4: var(--hf-ui-space-4, 16px);
|
|
--_hf-ui-space-6: var(--hf-ui-space-6, 24px);
|
|
--_hf-ui-space-8: var(--hf-ui-space-8, 32px);
|
|
--_hf-ui-surface: var(--hf-ui-surface, #141414);
|
|
--_hf-ui-surface-inset: var(--hf-ui-surface-inset, #101010);
|
|
--_hf-ui-surface-raised: var(--hf-ui-surface-raised, #1a1a1a);
|
|
--_hf-ui-text: var(--hf-ui-text, #e5e5e5);
|
|
--_hf-ui-text-faint: var(--hf-ui-text-faint, #7e7e7e);
|
|
--_hf-ui-text-muted: var(--hf-ui-text-muted, #929292);
|
|
--_hf-ui-text-strong: var(--hf-ui-text-strong, #f3f3f3);
|
|
--_hf-ui-warning: var(--hf-ui-warning, #e9ab55);
|
|
--_hf-ui-weight-medium: var(--hf-ui-weight-medium, 500);
|
|
--_hf-ui-weight-regular: var(--hf-ui-weight-regular, 400);
|
|
--_hf-ui-weight-semibold: var(--hf-ui-weight-semibold, 600);
|
|
box-sizing: border-box;
|
|
color-scheme: dark;
|
|
font-family: var(--_hf-ui-font-sans);
|
|
}
|
|
/* prettier-ignore */
|
|
[data-hf-ui-root] *,
|
|
[data-hf-ui-root] *::before,
|
|
[data-hf-ui-root] *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
/* prettier-ignore */
|
|
[data-hf-theme="light"] [data-hf-ui-root],
|
|
[data-hf-ui-root][data-hf-theme="light"] {
|
|
--_hf-ui-accent: var(--hf-ui-accent, #087a57);
|
|
--_hf-ui-action: var(--hf-ui-action, #171717);
|
|
--_hf-ui-action-contrast: var(--hf-ui-action-contrast, #ffffff);
|
|
--_hf-ui-border: var(--hf-ui-border, #e0dfdb);
|
|
--_hf-ui-border-strong: var(--hf-ui-border-strong, #cbc9c3);
|
|
--_hf-ui-canvas: var(--hf-ui-canvas, #f6f5f1);
|
|
--_hf-ui-control-border: var(--hf-ui-control-border, #888888);
|
|
--_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #6f6e68);
|
|
--_hf-ui-danger: var(--hf-ui-danger, #a61b1b);
|
|
--_hf-ui-data-1: var(--hf-ui-data-1, #087a57);
|
|
--_hf-ui-data-2: var(--hf-ui-data-2, #245ea8);
|
|
--_hf-ui-data-3: var(--hf-ui-data-3, #8a4b00);
|
|
--_hf-ui-data-4: var(--hf-ui-data-4, #6d3fc0);
|
|
--_hf-ui-data-5: var(--hf-ui-data-5, #a83d2d);
|
|
--_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 7px 16px rgba(26, 24, 20, 0.13));
|
|
--_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.78));
|
|
--_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(26, 24, 20, 0.18));
|
|
--_hf-ui-surface: var(--hf-ui-surface, #ffffff);
|
|
--_hf-ui-surface-inset: var(--hf-ui-surface-inset, #f0efeb);
|
|
--_hf-ui-surface-raised: var(--hf-ui-surface-raised, #ffffff);
|
|
--_hf-ui-text: var(--hf-ui-text, #171717);
|
|
--_hf-ui-text-faint: var(--hf-ui-text-faint, #6f6e68);
|
|
--_hf-ui-text-muted: var(--hf-ui-text-muted, #5f5f5a);
|
|
--_hf-ui-text-strong: var(--hf-ui-text-strong, #0a0a0a);
|
|
--_hf-ui-warning: var(--hf-ui-warning, #8a4b00);
|
|
color-scheme: light;
|
|
}
|
|
/* prettier-ignore */
|
|
[data-hf-ui-root]:focus-visible {
|
|
outline: 2px solid var(--_hf-ui-accent);
|
|
outline-offset: 3px;
|
|
}
|
|
/* prettier-ignore */
|
|
[data-hf-rendering="true"][data-hf-ui-root],
|
|
[data-hf-rendering="true"] [data-hf-ui-root],
|
|
[data-hf-rendering="true"][data-hf-ui-root] *,
|
|
[data-hf-rendering="true"] [data-hf-ui-root] *,
|
|
[data-hf-rendering="true"][data-hf-ui-root]::before,
|
|
[data-hf-rendering="true"][data-hf-ui-root]::after,
|
|
[data-hf-rendering="true"] [data-hf-ui-root]::before,
|
|
[data-hf-rendering="true"] [data-hf-ui-root]::after,
|
|
[data-hf-rendering="true"][data-hf-ui-root] *::before,
|
|
[data-hf-rendering="true"][data-hf-ui-root] *::after,
|
|
[data-hf-rendering="true"] [data-hf-ui-root] *::before,
|
|
[data-hf-rendering="true"] [data-hf-ui-root] *::after {
|
|
animation-duration: 0s !important;
|
|
animation-delay: 0s !important;
|
|
transition-duration: 0s !important;
|
|
transition-delay: 0s !important;
|
|
}
|
|
/* prettier-ignore */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[data-hf-ui-root],
|
|
[data-hf-ui-root] *,
|
|
[data-hf-ui-root] *::before,
|
|
[data-hf-ui-root] *::after {
|
|
animation-duration: 0s !important;
|
|
animation-delay: 0s !important;
|
|
transition-duration: 0s !important;
|
|
transition-delay: 0s !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
/* hf-ui:tokens:end */
|
|
.hf-ui-separator {
|
|
--hf-separator-progress: 1;
|
|
width: min(360px, 100%);
|
|
height: var(--hf-separator-thickness, 1px);
|
|
background: var(--_hf-ui-border);
|
|
overflow: hidden;
|
|
}
|
|
.hf-ui-separator span {
|
|
display: block;
|
|
width: calc(var(--hf-separator-progress) * 100%);
|
|
height: 100%;
|
|
background: var(--hf-separator-fill, var(--_hf-ui-control-border));
|
|
transform-origin: left center;
|
|
}
|
|
.hf-ui-separator[data-orientation="vertical"] {
|
|
width: var(--hf-separator-thickness, 1px);
|
|
height: 180px;
|
|
}
|
|
.hf-ui-separator[data-orientation="vertical"] span {
|
|
width: 100%;
|
|
height: calc(var(--hf-separator-progress) * 100%);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(function () {
|
|
"use strict";
|
|
|
|
var vars =
|
|
window.__hyperframes && window.__hyperframes.getVariables
|
|
? window.__hyperframes.getVariables()
|
|
: {};
|
|
|
|
// Unrecognised overrides return to their declared defaults.
|
|
var orientations = { horizontal: true, vertical: true };
|
|
var thicknesses = { hairline: "1px", medium: "2px", bold: "4px" };
|
|
var tones = {
|
|
neutral: "var(--_hf-ui-control-border)",
|
|
accent: "var(--_hf-ui-accent)",
|
|
warning: "var(--_hf-ui-warning)",
|
|
};
|
|
|
|
function pick(table, value, fallback) {
|
|
return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
|
|
}
|
|
|
|
var orientation = pick(orientations, vars.orientation, "horizontal");
|
|
var thickness = thicknesses[pick(thicknesses, vars.thickness, "hairline")];
|
|
var tone = tones[pick(tones, vars.tone, "neutral")];
|
|
|
|
var roots = document.querySelectorAll(".hf-ui-separator");
|
|
for (var i = 0; i < roots.length; i += 1) {
|
|
roots[i].setAttribute("data-orientation", orientation);
|
|
roots[i].setAttribute("aria-orientation", orientation);
|
|
roots[i].style.setProperty("--hf-separator-thickness", thickness);
|
|
roots[i].style.setProperty("--hf-separator-fill", tone);
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<!--
|
|
Timeline integration:
|
|
tl.fromTo('.hf-ui-separator', { '--hf-separator-progress': 0 }, { '--hf-separator-progress': 1, duration: 0.42, ease: 'power3.out' }, startTime);
|
|
-->
|