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

feat(registry): bring back the video-primitive moves (#3169)

Browse Source 
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.
This commit is contained in:
Miguel Ángel
2026-08-10 18:46:03 -04:00
committed by GitHub
parent 0f76305191
commit 9734578e60
1383 changed files with 255573 additions and 5760 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/components/testimonial-card/demo.html
Vendored
+101
View File
@@ -0,0 +1,101 @@
<!doctype html>
<!--
testimonial-card demo: standalone 1920x1080 composition that mounts the
primitive through data-composition-src. Non-default content exercises all
four variables while the host owns the stage and mount dimensions.
-->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<title>Testimonial Card - Demo</title>
<style>
:root {
--bg: #070a12;
--fg: #f8fafc;
--muted: #a8b3c7;
--surface: #151c2c;
--border: #34405a;
--brand: #e4e4e7;
--accent: #e4e4e7;
--font-display: Inter, system-ui, sans-serif;
--font-body: Inter, system-ui, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--radius: 28px;
--space-1: 8px;
--space-2: 16px;
--space-3: 32px;
--dur-beat: 0.4s;
--ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 1920px;
height: 1080px;
overflow: hidden;
background: var(--bg);
}
#root {
position: relative;
width: 1920px;
height: 1080px;
overflow: hidden;
background: radial-gradient(
ellipse at 50% 44%,
color-mix(in srgb, var(--surface) 72%, var(--bg)),
var(--bg) 72%
);
}
.mount-card {
width: 54%;
height: 64%;
left: 23%;
top: 18%;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
border-radius: calc(var(--radius) * 1.35);
box-shadow: 0 40px 90px color-mix(in srgb, var(--bg) 78%, transparent);
}
</style>
</head>
<body>
<div
id="root"
data-composition-id="testimonial-card-demo"
data-start="0"
data-width="1920"
data-height="1080"
data-duration="4"
data-fps="30"
>
<div
id="testimonial-card-mount"
class="mount-card clip"
data-composition-id="testimonial-card"
data-composition-src="./testimonial-card.html"
data-variable-values='{"quote":"Our launch video went from brief to polished in one afternoon.","author":"Maya Chen","handle":"@mayac","rating":4.6}'
data-start="0"
data-duration="4"
data-track-index="0"
data-width="1037"
data-height="691"
></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script>
window.__timelines = window.__timelines || {};
window.__timelines["testimonial-card-demo"] = gsap.timeline({ paused: true });
</script>
</body>
</html>
registry/components/testimonial-card/registry-item.json
+60
View File
@@ -0,0 +1,60 @@
{
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
"name": "testimonial-card",
"type": "hyperframes:component",
"title": "Testimonial Card",
"description": "Reveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat.",
"tags": ["prop", "ui-props", "testimonial", "social-proof", "quote", "prove"],
"jobs": ["prove"],
"family": "ui-props",
"profile": "holdable",
"evidence": "fixture social-proof shelf, GAP A1+A2 convergent miss: both consumer simulations needed a testimonial proof beat, with reading-pace discipline as the frozen law.",
"syncPoints": [
{ "id": "quote-readable", "phase": "in", "offset": 0.82 },
{ "id": "attribution-settled", "phase": "in", "offset": 1.5 }
],
"files": [
{
"path": "testimonial-card.html",
"target": "compositions/components/testimonial-card.html",
"type": "hyperframes:snippet"
}
],
"variables": [
{
"id": "quote",
"type": "string",
"role": "content",
"label": "Quote",
"description": "Customer testimonial copy revealed at reading pace.",
"default": "This changed how we ship."
},
{
"id": "author",
"type": "string",
"role": "content",
"label": "Author",
"description": "Name attributed to the testimonial.",
"default": "Ken Tanaka"
},
{
"id": "handle",
"type": "string",
"role": "content",
"label": "Handle",
"description": "Role or social handle shown beneath the author name.",
"default": "@ken"
},
{
"id": "rating",
"type": "number",
"role": "content",
"label": "Rating",
"description": "Visible customer rating from zero to five stars.",
"default": 5,
"min": 0,
"max": 5,
"step": 0.1
}
]
}
registry/components/testimonial-card/testimonial-card.html
Vendored
+329
View File
@@ -0,0 +1,329 @@
<!doctype html>
<!--
testimonial-card: HyperFrames video primitive (ui-props / holdable / prove)
Concept: a token-themed testimonial card proves a claim in one clean reveal.
The rating and quote rise into reading position first, then the avatar,
author name, and handle settle beneath with a small stagger.
Compiled-from evidence: fixture social-proof shelf, GAP evidence from the
A1+A2 convergent miss. Both consumer simulations needed a testimonial proof
beat, and the fixture freezes reading-pace discipline as its governing law.
Use when: a scene needs customer testimony to substantiate a product claim
without recreating a platform-specific social post.
Variables:
- quote (string, default "This changed how we ship."): testimonial copy.
- author (string, default "Ken Tanaka"): attributed customer name.
- handle (string, default "@ken"): role or social handle beneath the name.
- rating (number, 0 to 5, default 5): visible star rating.
Envelope (holdable):
IN 1.50s fixed quote reveal followed by attribution settle.
HOLD elastic and deliberately still for reading.
OUT 0.45s fixed release fade.
If D is shorter than 1.95s, IN and OUT scale together. The timeline is
never time-scaled, and HOLD remains the only elastic phase.
Sync points:
- quote-readable at 0.82s into IN.
- attribution-settled at 1.50s, the end of IN.
Both offsets compress only with short durations and never enter HOLD.
Sound cues: none. The proof beat has no discrete impact event.
Mount contract: this file is a template-wrapped sub-composition. The host
owns dimensions. #root fills that box with inset:0 and container-type:size,
carries no data-width or data-height, and registers one paused GSAP timeline
under the hardcoded composition id "testimonial-card".
-->
<html
lang="en"
data-composition-variables='[
{ "id": "quote", "type": "string", "role": "content", "label": "Quote", "description": "Customer testimonial copy revealed at reading pace.", "default": "This changed how we ship." },
{ "id": "author", "type": "string", "role": "content", "label": "Author", "description": "Name attributed to the testimonial.", "default": "Ken Tanaka" },
{ "id": "handle", "type": "string", "role": "content", "label": "Handle", "description": "Role or social handle shown beneath the author name.", "default": "@ken" },
{ "id": "rating", "type": "number", "role": "content", "label": "Rating", "description": "Visible customer rating from zero to five stars.", "default": 5, "min": 0, "max": 5, "step": 0.1 }
]'
>
<head>
<meta charset="UTF-8" />
<title>Testimonial Card</title>
</head>
<body>
<template>
<div id="root" data-composition-id="testimonial-card" data-duration="4" data-fps="30">
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
#root {
position: absolute;
inset: 0;
container-type: size;
isolation: isolate;
overflow: hidden;
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
}
.tc-clip {
width: 100%;
height: 100%;
display: grid;
place-items: center;
padding: 6cqh 6cqw;
}
/* EDIT ZONE: card proportions and type scale. Paint is owned only
by theme-contract tokens, and every measurement resolves from
the host container. GSAP owns all transforms and opacity. */
.tc-card {
width: min(86cqw, 128cqh);
display: grid;
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);
}
.tc-proof {
display: grid;
gap: min(3.2cqw, 3.2cqh);
will-change: transform, opacity;
}
.tc-rating {
display: flex;
align-items: center;
gap: min(2cqw, 2cqh);
width: max-content;
color: var(--muted);
font-family: var(--font-mono);
font-size: min(2.4cqw, 2.4cqh);
font-weight: 650;
line-height: 1;
}
.tc-stars {
position: relative;
display: inline-block;
color: var(--muted);
font-size: min(3.4cqw, 3.4cqh);
letter-spacing: 0.18em;
line-height: 1;
white-space: nowrap;
}
.tc-stars-fill {
position: absolute;
inset: 0 auto 0 0;
width: var(--tc-rating-fill);
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);
white-space: nowrap;
}
.tc-quote {
margin: 0;
color: var(--fg);
font-family: var(--font-display);
font-size: min(5.2cqw, 5.2cqh);
font-weight: 650;
line-height: 1.23;
letter-spacing: -0.025em;
text-wrap: balance;
}
.tc-attribution {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: min(2.7cqw, 2.7cqh);
row-gap: min(0.65cqw, 0.65cqh);
align-items: center;
}
.tc-avatar {
grid-row: 1 / 3;
display: grid;
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-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);
font-size: min(2.65cqw, 2.65cqh);
font-weight: 780;
letter-spacing: 0.03em;
}
.tc-author {
min-width: 0;
align-self: end;
color: var(--fg);
font-family: var(--font-display);
font-size: min(3.2cqw, 3.2cqh);
font-weight: 700;
line-height: 1.08;
}
.tc-handle {
min-width: 0;
align-self: start;
color: var(--muted);
font-size: min(2.35cqw, 2.35cqh);
line-height: 1.15;
}
.tc-attribution-item {
will-change: transform, opacity;
}
</style>
<div
id="testimonial-card-clip"
class="tc-clip clip"
data-start="0"
data-duration="4"
data-track-index="0"
>
<article class="tc-card" aria-label="Customer testimonial">
<div class="tc-proof">
<div class="tc-rating" role="img" aria-label="5 out of 5 stars">
<span class="tc-stars" aria-hidden="true">
★★★★★
<span class="tc-stars-fill">★★★★★</span>
</span>
<span class="tc-rating-value" aria-hidden="true">5 / 5</span>
</div>
<blockquote class="tc-quote"></blockquote>
</div>
<footer class="tc-attribution">
<div class="tc-avatar tc-attribution-item" aria-hidden="true"></div>
<div class="tc-author tc-attribution-item"></div>
<div class="tc-handle tc-attribution-item"></div>
</footer>
</article>
</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 = "testimonial-card";
var card = root.querySelector(".tc-card");
var proof = root.querySelector(".tc-proof");
var quoteEl = root.querySelector(".tc-quote");
var avatarEl = root.querySelector(".tc-avatar");
var authorEl = root.querySelector(".tc-author");
var handleEl = root.querySelector(".tc-handle");
var ratingEl = root.querySelector(".tc-rating");
var ratingValueEl = root.querySelector(".tc-rating-value");
var attributionItems = root.querySelectorAll(".tc-attribution-item");
var vars =
window.__hyperframes && window.__hyperframes.getVariables
? window.__hyperframes.getVariables()
: {};
/* INVARIANT: getVariables() is the sole owner of content. Missing
values use the declared defaults, while intentional empty
strings remain empty. Rating zero is valid and cannot fall
through to the default. */
var quoteText = vars.quote == null ? "This changed how we ship." : String(vars.quote);
var authorText = vars.author == null ? "Ken Tanaka" : String(vars.author);
var handleText = vars.handle == null ? "@ken" : String(vars.handle);
var rawRating = Number(vars.rating);
var rating = Number.isFinite(rawRating) ? Math.max(0, Math.min(5, rawRating)) : 5;
var ratingText = Number.isInteger(rating) ? String(rating) : rating.toFixed(1);
var initials = authorText
.trim()
.split(/\s+/)
.filter(Boolean)
.slice(0, 2)
.map(function (part) {
return part.charAt(0);
})
.join("")
.toUpperCase();
quoteEl.textContent = quoteText;
authorEl.textContent = authorText;
handleEl.textContent = handleText;
avatarEl.textContent = initials === "" ? "?" : initials;
ratingEl.style.setProperty("--tc-rating-fill", rating * 20 + "%");
ratingEl.setAttribute("aria-label", ratingText + " out of 5 stars");
ratingValueEl.textContent = ratingText + " / 5";
/* RETIME RANGE: these constants own the complete lifecycle. The
reveal uses --ease-standard's GSAP form, power2.out, with the
quote first and three attribution items staggered beneath. */
var IN_BASE = 1.5;
var OUT_BASE = 0.45;
var QUOTE_START_BASE = 0.12;
var QUOTE_DURATION_BASE = 0.7;
var ATTRIBUTION_START_BASE = 0.82;
var ATTRIBUTION_DURATION_BASE = 0.56;
var ATTRIBUTION_STAGGER_BASE = 0.06;
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(
proof,
{ y: "18%", opacity: 0 },
{
y: "0%",
opacity: 1,
duration: QUOTE_DURATION_BASE * scale,
ease: "power2.out",
},
QUOTE_START_BASE * scale,
);
tl.fromTo(
attributionItems,
{ y: "34%", opacity: 0 },
{
y: "0%",
opacity: 1,
duration: ATTRIBUTION_DURATION_BASE * scale,
stagger: ATTRIBUTION_STAGGER_BASE * scale,
ease: "power2.out",
},
ATTRIBUTION_START_BASE * scale,
);
tl.to(card, { 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>