ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-11 14:50:02 +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
docs/catalog/components/ai-generation-canvas.mdx
-131
View File
@@ -1,131 +0,0 @@
---
title: "AI Generation Canvas"
description: "A prompt composer expands into a generated dashboard preview."
---
import { InstallCommand } from "/snippets/install-command.jsx";
<iframe src="/public/catalog/preview/components/ai-generation-canvas.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="AI Generation Canvas preview" />
## Install
<InstallCommand command="npx hyperframes add ai-generation-canvas" />
That writes one file: `compositions/components/ai-generation-canvas.html`.
## Source
<Accordion title={`ai-generation-canvas.html`}>
```html
<!--
AI Generation Canvas - remocn component ported to HyperFrames authoring format.
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="panel prompt">
<h3>AI Generation Canvas</h3>
<p>A prompt composer expands into a generated dashboard preview.</p>
<div class="pill">Generate scene</div>
<div class="pill">Refine motion</div>
<div class="pill">Export</div>
</div>
<div class="panel preview">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
<style>
.hf-remocn-ai-generation-canvas {
--hf-accent: var(--accent, #18181b);
--hf-ink: #111827;
--hf-muted: #6b7280;
--hf-surface: #ffffff;
color: var(--hf-ink);
font-family: Inter, system-ui, sans-serif;
}
.hf-remocn-ai-generation-canvas {
width: 820px;
min-height: 460px;
border-radius: 34px;
padding: 28px;
background: linear-gradient(135deg, #fafafa, #e4e4e7);
box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
display: grid;
grid-template-columns: 280px 1fr;
gap: 22px;
overflow: hidden;
}
.hf-remocn-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 {
display: grid;
gap: 12px;
align-content: start;
}
.hf-remocn-ai-generation-canvas .pill {
height: 42px;
border-radius: 999px;
background: #111827;
color: #fff;
display: flex;
align-items: center;
padding: 0 18px;
font-weight: 800;
transform: translateX(var(--hf-pill-x, 0px));
}
.hf-remocn-ai-generation-canvas .preview {
display: grid;
gap: 14px;
}
.hf-remocn-ai-generation-canvas .card {
min-height: 78px;
border-radius: 18px;
background: #fff;
box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
scale(var(--hf-card-scale, 1));
opacity: var(--hf-card-opacity, 1);
}
.hf-remocn-ai-generation-canvas h3 {
margin: 0 0 14px;
font-size: 32px;
letter-spacing: -0.04em;
}
.hf-remocn-ai-generation-canvas p {
margin: 0;
color: #475569;
}
</style>
<!--
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);
-->
```
</Accordion>
## Usage
Open `compositions/components/ai-generation-canvas.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
{/* hf:generated-footer */}
Tagged `showcase` `remocn-port` `ai`.
## Related topics
- [Browse the complete Catalog](/catalog)
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
- [Build a richer composition](/go-further)