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

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/mesh-gradient-bg/mesh-gradient-bg.html
Vendored
+11 -11
View File
@@ -1,11 +1,11 @@
<!--
Mesh Gradient Background - remocn component ported to HyperFrames authoring format.
Mesh Gradient Background - catalog component for HyperFrames.
Paste the markup and CSS into a composition. Drive the timeline integration
from a paused GSAP timeline so renders remain deterministic.
-->
<div class="hf-remocn-mesh-gradient-bg">
<div class="hf-catalog-mesh-gradient-bg">
<div class="mesh"></div>
<div class="card">
<div class="spot"></div>
@@ -17,7 +17,7 @@
</div>
<style>
.hf-remocn-mesh-gradient-bg {
.hf-catalog-mesh-gradient-bg {
--hf-accent: #2563eb;
--hf-ink: #111827;
--hf-muted: #6b7280;
@@ -25,7 +25,7 @@
color: var(--hf-ink);
font-family: Inter, system-ui, sans-serif;
}
.hf-remocn-mesh-gradient-bg {
.hf-catalog-mesh-gradient-bg {
position: relative;
width: 760px;
height: 428px;
@@ -34,7 +34,7 @@
background: #080b12;
box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
}
.hf-remocn-mesh-gradient-bg .mesh {
.hf-catalog-mesh-gradient-bg .mesh {
position: absolute;
inset: -22%;
filter: blur(44px);
@@ -52,7 +52,7 @@
),
radial-gradient(circle at var(--hf-x3, 46%) var(--hf-y3, 78%), #34d399 0 18%, transparent 34%);
}
.hf-remocn-mesh-gradient-bg .card {
.hf-catalog-mesh-gradient-bg .card {
position: absolute;
inset: 74px 92px;
border: 1px solid rgba(255, 255, 255, 0.16);
@@ -64,7 +64,7 @@
text-align: center;
overflow: hidden;
}
.hf-remocn-mesh-gradient-bg .spot {
.hf-catalog-mesh-gradient-bg .spot {
position: absolute;
width: 260px;
height: 260px;
@@ -73,7 +73,7 @@
transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
mix-blend-mode: screen;
}
.hf-remocn-mesh-gradient-bg .particle {
.hf-catalog-mesh-gradient-bg .particle {
position: absolute;
left: 50%;
top: 54%;
@@ -84,12 +84,12 @@
transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
opacity: var(--hf-po, 0);
}
.hf-remocn-mesh-gradient-bg h3 {
.hf-catalog-mesh-gradient-bg h3 {
margin: 0;
font-size: 44px;
letter-spacing: -0.04em;
}
.hf-remocn-mesh-gradient-bg p {
.hf-catalog-mesh-gradient-bg p {
margin: 8px 0 0;
color: rgba(255, 255, 255, 0.7);
}
@@ -97,5 +97,5 @@
<!--
Timeline integration:
tl.fromTo('.hf-remocn-mesh-gradient-bg .mesh', { '--hf-x1': '18%', '--hf-y1': '28%', '--hf-x2': '78%', '--hf-y2': '46%', '--hf-x3': '44%', '--hf-y3': '80%' }, { '--hf-x1': '34%', '--hf-y1': '42%', '--hf-x2': '62%', '--hf-y2': '60%', '--hf-x3': '58%', '--hf-y3': '64%', duration: 4, ease: 'sine.inOut' }, startTime); tl.fromTo('.hf-remocn-mesh-gradient-bg .spot', { '--hf-spot-x': '-120px', '--hf-spot-y': '-70px' }, { '--hf-spot-x': '190px', '--hf-spot-y': '90px', duration: 3, ease: 'sine.inOut' }, startTime); const particles_mesh_gradient_bg = gsap.utils.toArray('.hf-remocn-mesh-gradient-bg .particle'); if (particles_mesh_gradient_bg.length) { tl.fromTo(particles_mesh_gradient_bg, { '--hf-po': 0, '--hf-px': '0px', '--hf-py': '0px', '--hf-pr': '0deg' }, { '--hf-po': 1, '--hf-px': (i) => (Math.cos(i * 0.83) * 250) + 'px', '--hf-py': (i) => (-120 - Math.sin(i * 0.61) * 120) + 'px', '--hf-pr': (i) => (180 + i * 37) + 'deg', duration: 0.8, stagger: 0.015, ease: 'power2.out' }, startTime + 0.2); }
tl.fromTo('.hf-catalog-mesh-gradient-bg .mesh', { '--hf-x1': '18%', '--hf-y1': '28%', '--hf-x2': '78%', '--hf-y2': '46%', '--hf-x3': '44%', '--hf-y3': '80%' }, { '--hf-x1': '34%', '--hf-y1': '42%', '--hf-x2': '62%', '--hf-y2': '60%', '--hf-x3': '58%', '--hf-y3': '64%', duration: 4, ease: 'sine.inOut' }, startTime); tl.fromTo('.hf-catalog-mesh-gradient-bg .spot', { '--hf-spot-x': '-120px', '--hf-spot-y': '-70px' }, { '--hf-spot-x': '190px', '--hf-spot-y': '90px', duration: 3, ease: 'sine.inOut' }, startTime); const particles_mesh_gradient_bg = gsap.utils.toArray('.hf-catalog-mesh-gradient-bg .particle'); if (particles_mesh_gradient_bg.length) { tl.fromTo(particles_mesh_gradient_bg, { '--hf-po': 0, '--hf-px': '0px', '--hf-py': '0px', '--hf-pr': '0deg' }, { '--hf-po': 1, '--hf-px': (i) => (Math.cos(i * 0.83) * 250) + 'px', '--hf-py': (i) => (-120 - Math.sin(i * 0.61) * 120) + 'px', '--hf-pr': (i) => (180 + i * 37) + 'deg', duration: 0.8, stagger: 0.015, ease: 'power2.out' }, startTime + 0.2); }
-->