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

chore(catalog): remove internal source markers

Browse Source
This commit is contained in:
Miguel Ángel
2026-08-13 21:10:12 -04:00
committed by GitHub
parent f7d2260f9d
commit 532caf7aa2
144 changed files with 1347 additions and 1425 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/components/zoom-through-transition/demo.html
Vendored
+12 -12
View File
@@ -31,7 +31,7 @@
/* ponytail: scale non-animated wrapper to fill ~65% of 1920×1080 */
transform: scale(1.7);
}
.hf-remocn-zoom-through-transition {
.hf-catalog-zoom-through-transition {
--hf-accent: var(--accent, rgba(255, 255, 255, 0.28));
--hf-l1: rgba(255, 255, 255, 0.72);
--hf-l3: rgba(255, 255, 255, 0.18);
@@ -43,7 +43,7 @@
color: var(--hf-ink);
font-family: Inter, system-ui, sans-serif;
}
.hf-remocn-zoom-through-transition {
.hf-catalog-zoom-through-transition {
position: relative;
width: 760px;
height: 428px;
@@ -52,7 +52,7 @@
background: #111827;
box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
}
.hf-remocn-zoom-through-transition .scene {
.hf-catalog-zoom-through-transition .scene {
position: absolute;
inset: 0;
display: grid;
@@ -62,7 +62,7 @@
letter-spacing: -0.05em;
color: #fff;
}
.hf-remocn-zoom-through-transition .from {
.hf-catalog-zoom-through-transition .from {
background:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
var(--hf-l4);
@@ -70,7 +70,7 @@
scale(var(--hf-from-scale, 1));
filter: blur(var(--hf-from-blur, 0px));
}
.hf-remocn-zoom-through-transition .to {
.hf-catalog-zoom-through-transition .to {
background:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
var(--hf-l3);
@@ -81,14 +81,14 @@
var(--hf-clip-left, 0%)
);
}
.hf-remocn-zoom-through-transition .fx {
.hf-catalog-zoom-through-transition .fx {
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
mix-blend-mode: screen;
transform: translateX(var(--hf-fx-x, -110%));
}
.hf-remocn-zoom-through-transition .rgb {
.hf-catalog-zoom-through-transition .rgb {
position: absolute;
inset: 0;
pointer-events: none;
@@ -113,7 +113,7 @@
data-duration="5"
>
<div class="demo-frame">
<div class="hf-remocn-zoom-through-transition">
<div class="hf-catalog-zoom-through-transition">
<div class="scene from">Before</div>
<div class="scene to">Zoom Through Transition</div>
<div class="fx"></div>
@@ -124,7 +124,7 @@
const tl = gsap.timeline({ paused: true });
const startTime = 0.5;
tl.fromTo(
".hf-remocn-zoom-through-transition .to",
".hf-catalog-zoom-through-transition .to",
{ "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
{
"--hf-clip-right": "0%",
@@ -136,7 +136,7 @@
startTime,
);
tl.to(
".hf-remocn-zoom-through-transition .from",
".hf-catalog-zoom-through-transition .from",
{
"--hf-from-x": "-70px",
"--hf-from-scale": 0.96,
@@ -147,13 +147,13 @@
startTime,
);
tl.fromTo(
".hf-remocn-zoom-through-transition .fx",
".hf-catalog-zoom-through-transition .fx",
{ "--hf-fx-x": "-110%" },
{ "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
startTime + 0.18,
);
tl.fromTo(
".hf-remocn-zoom-through-transition .rgb",
".hf-catalog-zoom-through-transition .rgb",
{ "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
{
"--hf-rgb-opacity": 1,
registry/components/zoom-through-transition/registry-item.json
+1 -1
View File
@@ -4,7 +4,7 @@
"type": "hyperframes:component",
"title": "Zoom Through Transition",
"description": "A transition that zooms through a focal card into the next scene.",
"tags": ["transition-primitive", "remocn-port"],
"tags": ["transition-primitive"],
"variables": [
{
"id": "from-label",
registry/components/zoom-through-transition/zoom-through-transition.html
Vendored
+10 -10
View File
@@ -65,7 +65,7 @@
background: #111827;
}
.hf-remocn-zoom-through-transition {
.hf-catalog-zoom-through-transition {
--hf-accent: var(--accent, rgba(255, 255, 255, 0.28));
--hf-l1: rgba(255, 255, 255, 0.72);
--hf-l3: rgba(255, 255, 255, 0.18);
@@ -77,13 +77,13 @@
color: var(--hf-ink);
font-family: Inter, system-ui, sans-serif;
}
.hf-remocn-zoom-through-transition {
.hf-catalog-zoom-through-transition {
position: absolute;
inset: 0;
overflow: hidden;
background: #111827;
}
.hf-remocn-zoom-through-transition .scene {
.hf-catalog-zoom-through-transition .scene {
position: absolute;
inset: 0;
display: grid;
@@ -93,7 +93,7 @@
letter-spacing: -0.05em;
color: #fff;
}
.hf-remocn-zoom-through-transition .from {
.hf-catalog-zoom-through-transition .from {
background:
repeating-linear-gradient(
90deg,
@@ -108,7 +108,7 @@
scale(var(--hf-from-scale, 1));
filter: blur(calc(var(--hf-from-blur, 0px) * var(--hf-depth, 1)));
}
.hf-remocn-zoom-through-transition .to {
.hf-catalog-zoom-through-transition .to {
background:
repeating-linear-gradient(
90deg,
@@ -127,14 +127,14 @@
var(--hf-clip-left, 0%)
);
}
.hf-remocn-zoom-through-transition .fx {
.hf-catalog-zoom-through-transition .fx {
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
mix-blend-mode: screen;
transform: translateX(var(--hf-fx-x, -110%));
}
.hf-remocn-zoom-through-transition .rgb {
.hf-catalog-zoom-through-transition .rgb {
position: absolute;
inset: 0;
pointer-events: none;
@@ -149,7 +149,7 @@
}
</style>
<div class="hf-remocn-zoom-through-transition">
<div class="hf-catalog-zoom-through-transition">
>
<div class="scene from">Before</div>
<div class="scene to">Zoom Through Transition</div>
@@ -191,7 +191,7 @@
var fromLabel = label(vars["from-label"]);
var toLabel = label(vars["to-label"]);
var roots = document.querySelectorAll(".hf-remocn-zoom-through-transition");
var roots = document.querySelectorAll(".hf-catalog-zoom-through-transition");
var mountRoot = document.getElementById("root");
for (var i = 0; i < roots.length; i += 1) {
var root = roots[i];
@@ -214,7 +214,7 @@
// this composition's own id so the runtime seeks it frame by frame.
if (!mountRoot || !window.gsap) return;
var SELF = ".hf-remocn-zoom-through-transition";
var SELF = ".hf-catalog-zoom-through-transition";
var duration = Math.max(0.001, parseFloat(mountRoot.dataset.duration || "3"));
// The push reads as a transition only with a beat of the outgoing scene
// before it. Clamped so the wipe always lands inside the duration.