ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-13 07:40:06 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
08934bfd550bd7f92e531e2f4dd5bbc9076aadf3
hyperframes/docs/catalog/components/gloss-sweep.mdx
T
Miguel Ángel 9734578e60 feat(registry): bring back the video-primitive moves (#3169) 
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.
2026-08-10 18:46:03 -04:00

281 lines
10 KiB
Plaintext
Raw Blame History

---
title: "Gloss Sweep"
description: "A card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still."
---
import { InstallCommand } from "/snippets/install-command.jsx";
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="gloss-sweep preview"
loading="lazy"
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/gloss-sweep.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/gloss-sweep.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add gloss-sweep" />
That writes one file: `compositions/components/gloss-sweep.html`.
## Paste it into your composition
Open `compositions/components/gloss-sweep.html` and copy what is inside into your own composition.
A component has no size or duration of its own. It takes both from the composition
you paste it into.
## Variables
Every one of these has a default, so the piece works untouched. Set the ones you
want to change on the element:
| Variable | Default | Accepts | What it does |
| --- | --- | --- | --- |
| `text` | `Pro` | string | Text displayed on the card. |
| `accent` | `green` | `green`, `blue`, `violet` | Color treatment for the card. |
| `sweep_angle` | `25` | -60deg to 60deg, step 1deg | Angle of the specular gloss in degrees. |
Set them with `data-variable-values` on the element that mounts it. These are the
defaults, so this behaves exactly like the preview above until you change one:
```html wrap
<div
data-composition-id="gloss-sweep"
data-composition-src="compositions/components/gloss-sweep.html"
data-variable-values='{"text":"Pro","accent":"green","sweep_angle":25}'
></div>
```
## Source
<Accordion title={`gloss-sweep.html`}>
```html
<!doctype html>
<!--
gloss-sweep: HyperFrames video primitive (celebrations / payoff)
Concept: a compact card lands with a restrained slam, receives one
diagonal specular sweep, then holds perfectly still. The gloss is the
whole celebration. There is no pulse, confetti, drift, or exit.
Variables:
- text (string, default "Pro"): the card label.
- accent (green | blue | violet, default green): the card color.
- sweep_angle (number, default 25): gloss angle in degrees.
Envelope (fixed IN, elastic HOLD, no OUT):
IN_BASE = 1.35s, small landing followed by one gloss sweep
HOLD = elastic = max(0, D - IN_BASE), completely still
OUT_BASE = 0s, the card remains in its confident resting state
If D is shorter than IN_BASE, the landing and sweep compress together.
Mount contract: the runtime clones only this template. #root fills the
host box, establishes the container query basis, has no data-width or
data-height, and registers one paused timeline under the hardcoded
gloss-sweep id.
-->
<html
lang="en"
data-composition-id="gloss-sweep"
data-composition-duration="2.5"
data-composition-variables='[
{ "id": "text", "type": "string", "role": "content", "label": "Label", "description": "Text displayed on the card.", "default": "Pro" },
{ "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color treatment for the card.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
{ "id": "sweep_angle", "type": "number", "role": "style", "label": "Sweep angle", "description": "Angle of the specular gloss in degrees.", "default": 25, "min": -60, "max": 60, "step": 1, "unit": "deg" }
]'
>
<head>
<meta charset="UTF-8" />
<title>Gloss Sweep</title>
</head>
<body>
<template>
<div id="root" data-composition-id="gloss-sweep" data-duration="2.5" data-fps="30">
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
#root {
position: absolute;
inset: 0;
overflow: hidden;
container-type: size;
isolation: isolate;
color: var(--fg, #f8fafc);
font-family: var(--font-display, Inter, system-ui, sans-serif);
pointer-events: none;
}
.gs-clip {
position: absolute;
inset: 0;
display: grid;
place-items: center;
overflow: hidden;
}
.gs-card {
position: relative;
display: grid;
min-width: 48cqw;
max-width: 78cqw;
min-height: 34cqh;
padding: 7cqh 9cqw;
place-items: center;
overflow: hidden;
border: 0.22cqmin solid var(--gs-edge);
border-radius: 5cqmin;
background: linear-gradient(145deg, var(--gs-surface-bright), var(--gs-surface));
box-shadow:
0 3cqh 8cqh color-mix(in srgb, var(--bg, #05070d) 62%, transparent),
inset 0 0 0 0.12cqmin color-mix(in srgb, white 12%, transparent);
transform-origin: 50% 50%;
will-change: transform;
}
.gs-label {
position: relative;
z-index: 1;
max-width: 62cqw;
overflow: hidden;
color: var(--gs-label);
font-size: clamp(8cqmin, 15cqmin, 18cqmin);
font-weight: 780;
line-height: 1;
letter-spacing: -0.04em;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.gs-gloss {
--gs-sweep: -30;
--gs-angle: 25deg;
position: absolute;
inset: 0;
z-index: 2;
opacity: 0;
background: linear-gradient(
var(--gs-angle),
transparent calc(var(--gs-sweep) * 1% - 22%),
rgba(255, 255, 255, 0.06) calc(var(--gs-sweep) * 1% - 9%),
rgba(255, 255, 255, 0.72) calc(var(--gs-sweep) * 1%),
rgba(255, 255, 255, 0.08) calc(var(--gs-sweep) * 1% + 9%),
transparent calc(var(--gs-sweep) * 1% + 22%)
);
pointer-events: none;
}
</style>
<div
id="gloss-sweep-clip"
class="gs-clip clip"
data-start="0"
data-duration="2.5"
data-track-index="0"
>
<div class="gs-card">
<span class="gs-label"></span>
<span class="gs-gloss" aria-hidden="true"></span>
</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 card = root.querySelector(".gs-card");
var label = root.querySelector(".gs-label");
var gloss = root.querySelector(".gs-gloss");
var vars =
window.__hyperframes && window.__hyperframes.getVariables
? window.__hyperframes.getVariables()
: {};
var accents = {
green: {
surface: "#123b2c",
surfaceBright: "#1a513c",
edge: "#39d98a",
label: "#ecfff5",
},
blue: {
surface: "#123554",
surfaceBright: "#19486f",
edge: "#4db5ff",
label: "#eef8ff",
},
violet: {
surface: "#31205b",
surfaceBright: "#463078",
edge: "#a98cff",
label: "#f7f2ff",
},
};
var accent = accents[vars.accent] ? vars.accent : "green";
var palette = accents[accent];
var text = vars.text == null ? "Pro" : String(vars.text);
var angleValue = Number(vars.sweep_angle);
var sweepAngle = Number.isFinite(angleValue)
? Math.max(-60, Math.min(60, angleValue))
: 25;
label.textContent = text;
card.style.setProperty("--gs-surface", palette.surface);
card.style.setProperty("--gs-surface-bright", palette.surfaceBright);
card.style.setProperty("--gs-edge", palette.edge);
card.style.setProperty("--gs-label", palette.label);
gloss.style.setProperty("--gs-angle", sweepAngle + "deg");
var IN_BASE = 1.35;
var LAND_BASE = 0.5;
var SWEEP_AT_BASE = 0.65;
var SWEEP_BASE = 0.7;
var duration = Math.max(0.001, parseFloat(root.dataset.duration || "2.5"));
var scale = duration < IN_BASE ? duration / IN_BASE : 1;
var LAND = LAND_BASE * scale;
var SWEEP_AT = SWEEP_AT_BASE * scale;
var SWEEP = SWEEP_BASE * scale;
var tl = gsap.timeline({ paused: true });
tl.fromTo(
card,
{ y: "-5cqh", scale: 1.06 },
{ y: "0cqh", scale: 1, duration: LAND, ease: "expo.out" },
0,
);
tl.set(gloss, { opacity: 1, "--gs-sweep": -30 }, SWEEP_AT);
tl.to(gloss, { "--gs-sweep": 130, duration: SWEEP, ease: "power2.out" }, SWEEP_AT);
tl.set(gloss, { opacity: 0 }, SWEEP_AT + SWEEP);
tl.seek(0);
window.__timelines = window.__timelines || {};
window.__timelines["gloss-sweep"] = tl;
})();
</script>
</div>
</template>
</body>
</html>
```
</Accordion>
{/* hf:generated-footer */}
Tagged `motion-primitive` `celebration` `gloss` `card` `badge` `payoff`.
## Related topics
- [Browse the complete Catalog](/catalog)
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
- [Build a richer composition](/go-further)
Reference in New Issue View Git Blame Copy Permalink