ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-11 06:30:03 +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/ai-generation-canvas.mdx
+13 -13
View File
@@ -24,13 +24,13 @@ That writes one file: `compositions/components/ai-generation-canvas.html`.
```html
<!--
AI Generation Canvas - remocn component ported to HyperFrames authoring format.
AI Generation Canvas - 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-ai-generation-canvas">
<div class="hf-catalog-ai-generation-canvas">
<div class="panel prompt">
<h3>AI Generation Canvas</h3>
<p>A prompt composer expands into a generated dashboard preview.</p>
@@ -46,7 +46,7 @@ That writes one file: `compositions/components/ai-generation-canvas.html`.
</div>
<style>
.hf-remocn-ai-generation-canvas {
.hf-catalog-ai-generation-canvas {
--hf-accent: var(--accent, #18181b);
--hf-ink: #111827;
--hf-muted: #6b7280;
@@ -54,7 +54,7 @@ That writes one file: `compositions/components/ai-generation-canvas.html`.
color: var(--hf-ink);
font-family: Inter, system-ui, sans-serif;
}
.hf-remocn-ai-generation-canvas {
.hf-catalog-ai-generation-canvas {
width: 820px;
min-height: 460px;
border-radius: 34px;
@@ -66,19 +66,19 @@ That writes one file: `compositions/components/ai-generation-canvas.html`.
gap: 22px;
overflow: hidden;
}
.hf-remocn-ai-generation-canvas .panel {
.hf-catalog-ai-generation-canvas .panel {
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 24px;
background: rgba(255, 255, 255, 0.76);
padding: 22px;
backdrop-filter: blur(12px);
}
.hf-remocn-ai-generation-canvas .prompt {
.hf-catalog-ai-generation-canvas .prompt {
display: grid;
gap: 12px;
align-content: start;
}
.hf-remocn-ai-generation-canvas .pill {
.hf-catalog-ai-generation-canvas .pill {
height: 42px;
border-radius: 999px;
background: #111827;
@@ -89,11 +89,11 @@ That writes one file: `compositions/components/ai-generation-canvas.html`.
font-weight: 800;
transform: translateX(var(--hf-pill-x, 0px));
}
.hf-remocn-ai-generation-canvas .preview {
.hf-catalog-ai-generation-canvas .preview {
display: grid;
gap: 14px;
}
.hf-remocn-ai-generation-canvas .card {
.hf-catalog-ai-generation-canvas .card {
min-height: 78px;
border-radius: 18px;
background: #fff;
@@ -102,12 +102,12 @@ That writes one file: `compositions/components/ai-generation-canvas.html`.
scale(var(--hf-card-scale, 1));
opacity: var(--hf-card-opacity, 1);
}
.hf-remocn-ai-generation-canvas h3 {
.hf-catalog-ai-generation-canvas h3 {
margin: 0 0 14px;
font-size: 32px;
letter-spacing: -0.04em;
}
.hf-remocn-ai-generation-canvas p {
.hf-catalog-ai-generation-canvas p {
margin: 0;
color: #475569;
}
@@ -115,7 +115,7 @@ That writes one file: `compositions/components/ai-generation-canvas.html`.
<!--
Timeline integration:
tl.fromTo('.hf-remocn-ai-generation-canvas .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-ai-generation-canvas .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
tl.fromTo('.hf-catalog-ai-generation-canvas .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-catalog-ai-generation-canvas .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
-->
```
@@ -127,7 +127,7 @@ Open `compositions/components/ai-generation-canvas.html` and paste its contents
{/* hf:generated-footer */}
Tagged `showcase` `remocn-port` `ai`.
Tagged `showcase` `ai`.
## Related topics