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

Revert "feat(registry): the video-primitive moves, documented and customisable (#3090)" (#3162)

Browse Source 
This reverts commit 3b53bfd2f7.
This commit is contained in:
Miguel Ángel
2026-08-10 14:47:47 -04:00
committed by GitHub
parent 3b53bfd2f7
commit c86d4013f5
2328 changed files with 5906 additions and 458525 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/components/offset-path-traveler/offset-path-traveler.html
Vendored
-287
View File
@@ -1,287 +0,0 @@
<!doctype html>
<!--
offset-path-traveler: HyperFrames video primitive (product demo / path travel)
One traveler follows an authored SVG path and rotates to its tangent. The
traveler wrapper is the content slot; the default slot content is a chip.
Variables:
- path (string): SVG path data authored in the 1000 by 500 route viewBox.
- traveler_label (string): label inside the default traveler chip.
- accent (green | blue | violet): chip and route color.
Envelope, fixed IN and OUT with elastic HOLD only:
IN_BASE = 1.20s, traveler enters along the authored curve to 72 percent
HOLD = max(0, D - IN - OUT), subtle finite drift on the same curve
OUT_BASE = 0.65s, traveler accelerates along the curve and exits
If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
The timeline is never time-scaled.
Seek safety: GSAP tweens one plain progress value. Its onUpdate samples the
same SVG path for position and tangent, so repeated and reverse seeks render
the same pose at the same time without a plugin or a free-running loop.
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 literal offset-path-traveler key.
-->
<html
lang="en"
data-composition-id="offset-path-traveler"
data-composition-duration="4"
data-composition-variables='[
{ "id": "path", "type": "string", "role": "content", "label": "Path", "description": "SVG path data authored in a 1000 by 500 route viewBox.", "default": "M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35" },
{ "id": "traveler_label", "type": "string", "role": "content", "label": "Traveler label", "description": "Text displayed inside the default traveler chip.", "default": "Live preview" },
{ "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the traveler and route.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
]'
>
<head>
<meta charset="UTF-8" />
<title>Offset Path Traveler</title>
</head>
<body>
<template>
<div id="root" data-composition-id="offset-path-traveler" data-duration="4" 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-body, Inter, system-ui, sans-serif);
pointer-events: none;
}
.opt-clip {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--bg, transparent);
}
.opt-route {
position: absolute;
inset: 8cqh 4cqw;
}
.opt-route svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.opt-guide {
fill: none;
stroke: color-mix(in srgb, var(--opt-accent) 34%, var(--border, #475569));
stroke-width: 0.42cqmin;
stroke-linecap: round;
stroke-dasharray: 1.1cqmin 1.5cqmin;
opacity: 0.62;
vector-effect: non-scaling-stroke;
}
.opt-traveler-slot {
position: absolute;
left: 0;
top: 0;
display: block;
transform-origin: 50% 50%;
will-change: transform, opacity;
}
.opt-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1, 1.4cqmin);
max-width: 34cqw;
min-height: 8cqh;
padding: var(--space-1, 1.6cqh) var(--space-2, 2.6cqw);
overflow: hidden;
border: 0.18cqmin solid
color-mix(in srgb, var(--opt-accent) 68%, var(--border, #475569));
border-radius: var(--radius, 999px);
background: color-mix(in srgb, var(--surface, #18212f) 88%, var(--opt-accent));
box-shadow:
0 2.2cqh 5cqh color-mix(in srgb, var(--bg, #020617) 48%, transparent),
0 0 3.5cqh color-mix(in srgb, var(--opt-accent) 24%, transparent);
color: var(--fg, #f8fafc);
font-family: var(--font-display, Inter, system-ui, sans-serif);
font-size: clamp(12px, 3.5cqmin, 30px);
font-weight: 760;
line-height: 1;
letter-spacing: -0.01em;
white-space: nowrap;
}
.opt-dot {
flex: 0 0 auto;
width: 2.4cqmin;
aspect-ratio: 1;
border-radius: 50%;
background: var(--opt-accent);
box-shadow: 0 0 2cqmin color-mix(in srgb, var(--opt-accent) 58%, transparent);
}
.opt-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<div
id="offset-path-traveler-clip"
class="opt-clip clip"
data-start="0"
data-duration="4"
data-track-index="0"
>
<div class="opt-route">
<svg viewBox="0 0 1000 500" preserveAspectRatio="none" aria-hidden="true">
<path class="opt-guide"></path>
</svg>
<div class="opt-traveler-slot" data-slot="traveler">
<div class="opt-chip">
<span class="opt-dot" aria-hidden="true"></span>
<span class="opt-label"></span>
</div>
</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 route = root.querySelector(".opt-route");
var guide = root.querySelector(".opt-guide");
var traveler = root.querySelector(".opt-traveler-slot");
var label = root.querySelector(".opt-label");
var vars =
window.__hyperframes && window.__hyperframes.getVariables
? window.__hyperframes.getVariables()
: {};
var DEFAULT_PATH =
"M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35";
var requestedPath = vars.path == null ? "" : String(vars.path).trim();
var pathData = requestedPath === "" ? DEFAULT_PATH : requestedPath;
var travelerLabel =
vars.traveler_label == null ? "Live preview" : String(vars.traveler_label);
var accentColors = {
green: "var(--brand, #71f5a7)",
blue: "var(--accent, #61a8ff)",
violet: "var(--accent-2, #c5a3ff)",
};
var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
? vars.accent
: "green";
guide.setAttribute("d", pathData);
label.textContent = travelerLabel;
root.style.setProperty("--opt-accent", accentColors[accent]);
var totalLength;
try {
totalLength = guide.getTotalLength();
} catch (_error) {
totalLength = 0;
}
if (!Number.isFinite(totalLength) || totalLength <= 0) {
guide.setAttribute("d", DEFAULT_PATH);
totalLength = guide.getTotalLength();
}
var VIEWBOX_WIDTH = 1000;
var VIEWBOX_HEIGHT = 500;
var travel = { progress: 0 };
function renderTraveler() {
var distance = Math.max(0, Math.min(1, travel.progress)) * totalLength;
var tangentStep = Math.max(0.5, totalLength * 0.002);
var before = guide.getPointAtLength(Math.max(0, distance - tangentStep));
var after = guide.getPointAtLength(Math.min(totalLength, distance + tangentStep));
var scaleX = route.clientWidth / VIEWBOX_WIDTH;
var scaleY = route.clientHeight / VIEWBOX_HEIGHT;
var point = guide.getPointAtLength(distance);
var rotation =
(Math.atan2((after.y - before.y) * scaleY, (after.x - before.x) * scaleX) * 180) /
Math.PI;
gsap.set(traveler, {
x: point.x * scaleX,
y: point.y * scaleY,
xPercent: -50,
yPercent: -50,
rotation: rotation,
});
}
var IN_BASE = 1.2;
var OUT_BASE = 0.65;
var STILLNESS = 0.3;
var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
var totalBase = IN_BASE + OUT_BASE;
var scale = duration < totalBase ? duration / totalBase : 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 driftHalf = Math.max(0, HOLD - STILLNESS) / 2;
gsap.set(traveler, { opacity: 0, scale: 0.9 });
renderTraveler();
var tl = gsap.timeline({ paused: true });
tl.to(
travel,
{ progress: 0.72, duration: IN, ease: "power3.out", onUpdate: renderTraveler },
0,
);
tl.to(traveler, { opacity: 1, duration: Math.min(0.28, IN), ease: "power2.out" }, 0);
tl.to(traveler, { scale: 1, duration: Math.min(0.5, IN), ease: "back.out(1.7)" }, 0);
if (driftHalf > 0) {
tl.to(
travel,
{
progress: 0.78,
duration: driftHalf,
ease: "sine.inOut",
yoyo: true,
repeat: 1,
onUpdate: renderTraveler,
},
IN,
);
}
tl.to(
travel,
{ progress: 1, duration: OUT, ease: "power2.in", onUpdate: renderTraveler },
OUT_START,
);
tl.to(traveler, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
tl.seek(0);
window.__timelines = window.__timelines || {};
window.__timelines["offset-path-traveler"] = tl;
})();
</script>
</div>
</template>
</body>
</html>