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
docs/catalog/components/spotlight-card.mdx
+12 -12
View File
@@ -24,13 +24,13 @@ That writes one file: `compositions/components/spotlight-card.html`.
```html
<!--
Spotlight Card - remocn component ported to HyperFrames authoring format.
Spotlight Card - 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-spotlight-card">
<div class="hf-catalog-spotlight-card">
<div class="mesh"></div>
<div class="card">
<div class="spot"></div>
@@ -42,7 +42,7 @@ That writes one file: `compositions/components/spotlight-card.html`.
</div>
<style>
.hf-remocn-spotlight-card {
.hf-catalog-spotlight-card {
--hf-accent: var(--accent, #18181b);
--hf-ink: #111827;
--hf-muted: #6b7280;
@@ -50,7 +50,7 @@ That writes one file: `compositions/components/spotlight-card.html`.
color: var(--hf-ink);
font-family: Inter, system-ui, sans-serif;
}
.hf-remocn-spotlight-card {
.hf-catalog-spotlight-card {
position: relative;
width: 760px;
height: 428px;
@@ -59,7 +59,7 @@ That writes one file: `compositions/components/spotlight-card.html`.
background: #080b12;
box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
}
.hf-remocn-spotlight-card .mesh {
.hf-catalog-spotlight-card .mesh {
position: absolute;
inset: -22%;
filter: blur(44px);
@@ -81,7 +81,7 @@ That writes one file: `compositions/components/spotlight-card.html`.
transparent 34%
);
}
.hf-remocn-spotlight-card .card {
.hf-catalog-spotlight-card .card {
position: absolute;
inset: 74px 92px;
border: 1px solid rgba(255, 255, 255, 0.16);
@@ -93,7 +93,7 @@ That writes one file: `compositions/components/spotlight-card.html`.
text-align: center;
overflow: hidden;
}
.hf-remocn-spotlight-card .spot {
.hf-catalog-spotlight-card .spot {
position: absolute;
width: 260px;
height: 260px;
@@ -102,7 +102,7 @@ That writes one file: `compositions/components/spotlight-card.html`.
transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
mix-blend-mode: screen;
}
.hf-remocn-spotlight-card .particle {
.hf-catalog-spotlight-card .particle {
position: absolute;
left: 50%;
top: 54%;
@@ -113,12 +113,12 @@ That writes one file: `compositions/components/spotlight-card.html`.
transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
opacity: var(--hf-po, 0);
}
.hf-remocn-spotlight-card h3 {
.hf-catalog-spotlight-card h3 {
margin: 0;
font-size: 44px;
letter-spacing: -0.04em;
}
.hf-remocn-spotlight-card p {
.hf-catalog-spotlight-card p {
margin: 8px 0 0;
color: rgba(255, 255, 255, 0.7);
}
@@ -126,7 +126,7 @@ That writes one file: `compositions/components/spotlight-card.html`.
<!--
Timeline integration:
tl.fromTo('.hf-remocn-spotlight-card .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-spotlight-card .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_spotlight_card = gsap.utils.toArray('.hf-remocn-spotlight-card .particle'); if (particles_spotlight_card.length) { tl.fromTo(particles_spotlight_card, { '--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-spotlight-card .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-spotlight-card .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_spotlight_card = gsap.utils.toArray('.hf-catalog-spotlight-card .particle'); if (particles_spotlight_card.length) { tl.fromTo(particles_spotlight_card, { '--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); }
-->
```
@@ -138,7 +138,7 @@ Open `compositions/components/spotlight-card.html` and paste its contents into y
{/* hf:generated-footer */}
Tagged `effect` `remocn-port`.
Tagged `effect`.
## Related topics