---
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)