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.
236 lines
8.8 KiB
HTML
Vendored
236 lines
8.8 KiB
HTML
Vendored
<!doctype html>
|
|
<!--
|
|
conic-progress-ring: HyperFrames video primitive (data / prove / demonstrate)
|
|
|
|
Concept: one registered percentage moves the hard frontier of a conic
|
|
gradient while a radial mask cuts out the center. The center value is
|
|
derived from that same percentage on every GSAP update, so fill and count
|
|
cannot drift apart.
|
|
|
|
Compiled-from evidence: hyperframes-research-css-gems.md, section 10,
|
|
"Registered conic progress ring". The finding specifies a typed percentage
|
|
as the seek handle for a conic-gradient frontier and a radial mask for the
|
|
ring cutout.
|
|
|
|
Use when: a scene needs to prove completion, attainment, or a measured
|
|
result with one immediately legible data mark.
|
|
|
|
Variables:
|
|
progress number 0 to 100 default 100 target angular fill
|
|
thickness number 4 to 30 default 12 ring stroke as a percent
|
|
label string default "100" center count target
|
|
|
|
Envelope:
|
|
IN 1.40s fixed fill and synchronized count, power2.out
|
|
HOLD elastic and deliberately still after the result settles
|
|
OUT 0.50s fixed opacity release, power2.in
|
|
For durations shorter than 1.90s, IN and OUT scale together. HOLD is the
|
|
only elastic phase. The timeline is never time-scaled.
|
|
|
|
Sync point:
|
|
progress-settled at the end of IN, always outside the elastic HOLD
|
|
|
|
Sound cues: none. A data proof should not claim an audio event for its host.
|
|
|
|
Mount contract: this file is a template-wrapped sub-composition. The host
|
|
owns dimensions. #root fills that box with inset:0 and has no data-width or
|
|
data-height. The hardcoded composition id matches the root and timeline key.
|
|
-->
|
|
<html
|
|
lang="en"
|
|
data-composition-variables='[
|
|
{ "id": "progress", "type": "number", "role": "content", "label": "Progress", "description": "Target angular fill from 0 to 100.", "default": 100, "min": 0, "max": 100, "step": 1, "unit": "%" },
|
|
{ "id": "thickness", "type": "number", "role": "layout", "label": "Thickness", "description": "Ring stroke thickness as a percent of the ring radius.", "default": 12, "min": 4, "max": 30, "step": 1, "unit": "%" },
|
|
{ "id": "label", "type": "string", "role": "content", "label": "Center label", "description": "Numeric target shown in the center and counted in sync with the fill.", "default": "100" }
|
|
]'
|
|
>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Conic Progress Ring</title>
|
|
</head>
|
|
<body>
|
|
<template>
|
|
<div id="root" data-composition-id="conic-progress-ring" data-duration="4" data-fps="30">
|
|
<style>
|
|
/* The registration must live in this document-level stylesheet.
|
|
Registrations inside shadow roots are ignored by the platform. */
|
|
@property --ring-progress {
|
|
syntax: "<percentage>";
|
|
inherits: false;
|
|
initial-value: 0%;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* INVARIANT: #root is the mount contract owner. The host owns the
|
|
box, and every internal measurement is relative to that box. */
|
|
#root {
|
|
position: absolute;
|
|
inset: 0;
|
|
container-type: size;
|
|
isolation: isolate;
|
|
overflow: hidden;
|
|
color: var(--fg, #f4f7fb);
|
|
font-family: var(--font-display, Inter, system-ui, sans-serif);
|
|
}
|
|
|
|
.ring-clip {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.ring-stage {
|
|
position: relative;
|
|
width: min(68cqw, 68cqh);
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
/* EDIT ZONE: --ring-thickness is the only geometry control.
|
|
--ring-progress is the only registered animation scalar. Paint
|
|
comes only from the host theme's surface and brand tokens. */
|
|
.ring {
|
|
--ring-thickness: 12%;
|
|
--ring-progress: 0%;
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
background: conic-gradient(
|
|
from -90deg,
|
|
var(--brand, #35d6a0) 0 var(--ring-progress),
|
|
var(--surface, #1b2938) var(--ring-progress) 100%
|
|
);
|
|
-webkit-mask: radial-gradient(
|
|
farthest-side,
|
|
transparent calc(100% - var(--ring-thickness)),
|
|
var(--fg, #f4f7fb) 0
|
|
);
|
|
mask: radial-gradient(
|
|
farthest-side,
|
|
transparent calc(100% - var(--ring-thickness)),
|
|
var(--fg, #f4f7fb) 0
|
|
);
|
|
}
|
|
|
|
.ring-label {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
color: var(--fg, #f4f7fb);
|
|
font-size: min(18cqw, 18cqh);
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: -0.04em;
|
|
line-height: 1;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
|
|
<div
|
|
id="conic-progress-ring-clip"
|
|
class="ring-clip clip"
|
|
data-start="0"
|
|
data-duration="4"
|
|
data-track-index="0"
|
|
>
|
|
<div class="ring-stage">
|
|
<div
|
|
class="ring"
|
|
role="progressbar"
|
|
aria-label="Progress"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
aria-valuenow="0"
|
|
></div>
|
|
<div class="ring-label" aria-hidden="true">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<script>
|
|
(function () {
|
|
"use strict";
|
|
|
|
var root = document.getElementById("root");
|
|
var compositionId = "conic-progress-ring";
|
|
var stage = root.querySelector(".ring-stage");
|
|
var ring = root.querySelector(".ring");
|
|
var label = root.querySelector(".ring-label");
|
|
var vars =
|
|
window.__hyperframes && window.__hyperframes.getVariables
|
|
? window.__hyperframes.getVariables()
|
|
: {};
|
|
|
|
/* INVARIANT: zero is a valid progress value, so missing and zero
|
|
are handled separately. Both numeric controls clamp to their
|
|
declared ranges before they reach layout or animation. */
|
|
var progressValue = Number(vars.progress);
|
|
var targetProgress = Number.isFinite(progressValue)
|
|
? Math.max(0, Math.min(100, progressValue))
|
|
: 100;
|
|
var thicknessValue = Number(vars.thickness);
|
|
var thickness = Number.isFinite(thicknessValue)
|
|
? Math.max(4, Math.min(30, thicknessValue))
|
|
: 12;
|
|
var labelText = vars.label == null ? "100" : String(vars.label);
|
|
var labelMatch = labelText.trim().match(/^(-?\d+(?:\.\d+)?)(.*)$/);
|
|
var labelTarget = labelMatch ? Number(labelMatch[1]) : null;
|
|
var labelSuffix = labelMatch ? labelMatch[2] : "";
|
|
|
|
ring.style.setProperty("--ring-thickness", thickness + "%");
|
|
|
|
function updateLabel(fillPercent) {
|
|
var ratio = targetProgress > 0 ? fillPercent / targetProgress : 1;
|
|
label.textContent =
|
|
labelTarget == null ? labelText : Math.round(labelTarget * ratio) + labelSuffix;
|
|
ring.setAttribute("aria-valuenow", String(Math.round(fillPercent)));
|
|
}
|
|
|
|
updateLabel(0);
|
|
|
|
/* RETIME RANGE: IN_BASE and OUT_BASE own the lifecycle timing.
|
|
The fill uses --ease-standard's GSAP form, power2.out. */
|
|
var IN_BASE = 1.4;
|
|
var OUT_BASE = 0.5;
|
|
var durationValue = Number(root.dataset.duration);
|
|
var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
|
|
var scale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
|
|
var IN = IN_BASE * scale;
|
|
var OUT = OUT_BASE * scale;
|
|
var HOLD = Math.max(0, duration - IN - OUT);
|
|
var OUT_START = IN + HOLD;
|
|
|
|
var tl = gsap.timeline({ paused: true });
|
|
|
|
tl.fromTo(
|
|
ring,
|
|
{ "--ring-progress": "0%" },
|
|
{
|
|
"--ring-progress": targetProgress + "%",
|
|
duration: IN,
|
|
ease: "power2.out",
|
|
onUpdate: function () {
|
|
updateLabel(parseFloat(ring.style.getPropertyValue("--ring-progress")) || 0);
|
|
},
|
|
},
|
|
0,
|
|
);
|
|
tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
|
|
|
|
tl.seek(0);
|
|
|
|
window.__timelines = window.__timelines || {};
|
|
window.__timelines[compositionId] = tl;
|
|
})();
|
|
</script>
|
|
</div>
|
|
</template>
|
|
</body>
|
|
</html>
|